Author: Manuel Lemos
Viewers: 5
Last month viewers: 3
Categories: New site features, Web site design, Gamification
The PHPClasses site is accepting new site redesign proposals now.
In this phase, candidates may create design themes using a visual editor. Then they can submit the design theme proposal when they are done.
This article gives more detail of how the visual editor and the proposal system work.
In this phase, candidates may create design themes using a visual editor. Then they can submit the design theme proposal when they are done.
This article gives more detail of how the visual editor and the proposal system work.
Contents
- State of development of the redesign proposal system
- The current status of the editor
- Replacing the site icon images
- Visual HTML template editor
- Editor components are Open Source
- Submitting a design theme proposal
- Changing a submitted proposal
- Browsing approved proposals
- Voting period and winner announcements
- Your improvement suggestions
- State of development of the redesign proposal system
It has been more than one year since the first developments of the site redesign proposal system were announced.
Several reasons explain why it has been taking so long to reach to the current status.
One of the reasons is that other important site developments took place during this period. But the main reason is that this feature is something very new.
I have never seen any other site that gives the power to the users to change the original templates online and lets them try them immediately with all the flexibility, in a way that does not compromise the site security.
Therefore, several components have been develop from scratch. I mean that not only code was developed from scratch, but also totally new ideas are being tried without being inspired on other sites, as I do not know any other that has done something like this.
If you know of any other site that done something similar, I would certainly would like to know.
There is a risk that certain ideas may not be so well accepted. But I had to try them to know what works and what does not work.
Therefore, I would really appreciate your sincere feedback. Do not worry. I will not be upset if you sincerely express that you find out that something is not usable. Actually I really appreciate and would be happy if you make constructive criticism.
If you want to submit a redesign proposal and you find out that it does not work well for you, I would like to hear that from you.
Keep in mind that this system is for you to use. But saying just that it is not good, just by itself is not useful. If something is not quite right, I would appreciate that not only you tell me, but also suggest a better way to make it more usable.
So let me tell you in more detail how it is working now.
- The current status of the editor
Currently, each design theme proposal is made of files that define templates, CSS style sheets and icons. You start by going to the design theme creation page:
As demonstrated in the past, initially you create a design theme giving it an unique name.
The site creates a copy of the current site main template and the main CSS style sheet files.
For now you can only redefine the site main HTML template and style sheet. In the future you may be able to redefine other templates and style sheets.
If for some reason you are not happy with the changes you made to the template or style sheet files, you can revert to the original files by using a new link that says "Reset to initial contents".
- Replacing the site icon images
One of the new features added to the design editor since the last article, is that now you can provide alternative images for many types of icons used in the site.
You can replace either small or large icons. Small icons appear usually next to the navigation links and have the size of 24 x 24 pixels. Large icons appear usually in larger menus and have the size of 80 x 60 pixels.
You must provide images with the exact size for each type of icon. They can only be of GIF format, as it is the only transparent format that is well supported by all browsers.
- Visual HTML template editor
Everybody knows HTML. However, HTML templates usually employ a specific syntax to define how to insert special template variables that represent parts of pages that may vary from page to page.
The design theme editor provides a way to visually edit HTML templates without having to learn the syntax of template variable marks.
The editor presents a toolbar that has a button to insert a template variable mark. When you click in that button, it shows a pull down menu to select which template variable you want to insert. Which you pick a template variable, it will be inserted in the current cursor position of the visual editor.
Template variables appear in the visual editor as rectangle with a dashed border. Inside the rectangle you can see a preview of how that variable will appear when the template is processed.
For instance, if you insert a navigation bar, you may see the navigation bar entries in a way that is practically the same as in the pages that use the template.
Some template variables have alternative values that correspond to different options of the variables. Those that have alternative values appear with the sign + after the template variable name on the top left corner of the template variable rectangle.
If you click on that rectangle, a pull down menu will appear showing the available alternatives for that variable. Click on one of the menu entries to switch to a different alternative.
If you prefer to edit the template HTML directly, you should click on the HTML button of the editor toolbar.
The template variables appear in the HTML inside curly braces { } . The name inside defines the type of template variable, like this:
{navigation}
If you want to use an alternative value for that template variable, you need to follow the name by a single space and the name of the alternative, like this:
{navigation notabs}
- Editor components are Open Source
One of the reasons why the design proposal system has been taking so long is that it required developing a couple of complex components to implement features that were not available in similar Open Source solutions.
One of those components was the visual editor. It required developing a reasonable large JavaScript class that provides a WYSIWYG (What You See Is What You Get) editor. The idea is to simplify the lives of the designers that want to see immediately how their templates will look like.
The support for inserting template variable marks with custom previews for all supported alternatives is one of the features that required developing this editor component.
A plug-in was developed for the Forms Validation and Generation package to make it easy to integrate in a Web forms based user interface. So, this editor and its PHP plug-in are now Open Source code distributed as part of that package:
Recently I have written an article about this HTML editor plug-in:
Another component addresses security issues. For security reasons, HTML template and CSS style sheets are not allowed to have JavaScript in them.
The site will validate HTML and CSS to prevent the injection of Javascript that could be used to perform security exploits.
A new package of classes was developed to parse and validate HTML and CSS. Among other things, it can filter any form of JavaScript present in the theme files.
This is a really extensive package. It really parses element by element of HTML, XHTML, CSS and even DTD documents. That it why it took more than 2 months to develop.
It is very hard, if possible at all, to produce a really 100% secure HTML filtering solution. The problem is that browsers have security holes that make them mishandle malformed HTML in the most unexpected ways.
Therefore, the theme submission system will require approval from a moderator. He will take another look at the submitted HTML templates and CSS style sheets to avoid security problems. The idea is to minimize the chance approving themes with eventual exploits that could bypass the the secure HTML filter package.
In any case, if you need a robust solution to prevent most forms of cross-site scripting and cross-site request forgery security exploits in the form of JavaScript present in user submitted HTML or CSS, you may want to try this package.
It is Open Source and was already released some time ago. Just let me know if you find out any exploit cases that this package does not yet handle very well.
- Submitting a design theme proposal
When you are done with your design theme proposal, you need to submit it for approval using a link in the design page named "submit your design".
You are prompted to enter a description of your design theme proposal. Here you should enter a few sentences that enumerate the main changes that you made when compared to the original site design theme. This is just for helping users to notice what are the most important aspects that you improved.
[submitting a design proposal]
You need to wait a while before a moderator can review your design theme proposal. A moderator may reject your proposal if it does not present significant changes or is very similar to other proposals.
You will be notified by e-mail regardless your proposal is accepted or rejected.
- Changing a submitted proposal
After you submit your design theme you cannot make any changes, but you can view the contents of your theme files in the design page.
If for some reason you want to change any of the files or the design theme description, you need to use a link in the design page named "cancel the design submission".
After you make the changes you wanted, you need to submit your design theme again, so it can participate in the contest.
- Browsing approved proposals
After your proposal is accepted, it will be available for review by other site users.
Currently, this part is not yet implemented, but the intention is to let users see different screenshots of the approved design themes on different types of pages.
Each design theme proposal will have its own forum, so users can post comments and suggest other improvements.
Some users expressed concerns that their design theme HTML templates, CSS and icons be stolen by other contestants. Presenting the proposals as screenshot images should make more difficult that this happens.
Still, one possibility that I am considering is to have an option to do not let other users see a design proposal if the author does not want to, at least until the voting period starts.
In that case other users could not post comments. Just let me know if you think this would be a better idea.
Anyway, the moderators will be paying attention to designs that look too similar. Only the first to apply will be approved.
- Voting period and winner announcements
The voting system is also not yet ready. The intention is to finish it in time for the election to start no later than early December, so the winner and runner-ups are announced in January.
The winner will earn the amount of USD $3.000,00 as main prize. He must have an account in Paypal to receive that amount. Make sure you have created an account in Paypal before you apply to the contest.
The winner must sign a contract on which he states that he has all the rights to all the art work used in his design theme, so he can transfer those rights permanently to the PHPClasses site. It is the same as if the winner was hired directly to create a design theme for the site.
The winner will also earn an elePHPant mascot and a PHPClasses premium subscription. The runner-ups also earn prizes provided by sponsors. Take a look at the award page for more details:
You will have time until the election starts in December to submit your proposal. So now it is the time for you to start working on your design theme proposal, if you have not done so already.
- Your improvement suggestions
Since this is the first time the contest is organized, it is natural that not everything is perfect, so there is room for improvement.
If you have suggestions on how to improve the current system, please post a comment to let me know about your ideas.
- State of development of the redesign proposal system
- The current status of the editor
- Replacing the site icon images
- Visual HTML template editor
- Editor components are Open Source
- Submitting a design theme proposal
- Changing a submitted proposal
- Browsing approved proposals
- Voting period and winner announcements
- Your improvement suggestions
- State of development of the redesign proposal system
It has been more than one year since the first developments of the site redesign proposal system were announced.
phpclasses.org/blog/post/81-Site-de ...Several reasons explain why it has been taking so long to reach to the current status.
One of the reasons is that other important site developments took place during this period. But the main reason is that this feature is something very new.
I have never seen any other site that gives the power to the users to change the original templates online and lets them try them immediately with all the flexibility, in a way that does not compromise the site security.
Therefore, several components have been develop from scratch. I mean that not only code was developed from scratch, but also totally new ideas are being tried without being inspired on other sites, as I do not know any other that has done something like this.
If you know of any other site that done something similar, I would certainly would like to know.
There is a risk that certain ideas may not be so well accepted. But I had to try them to know what works and what does not work.
Therefore, I would really appreciate your sincere feedback. Do not worry. I will not be upset if you sincerely express that you find out that something is not usable. Actually I really appreciate and would be happy if you make constructive criticism.
If you want to submit a redesign proposal and you find out that it does not work well for you, I would like to hear that from you.
Keep in mind that this system is for you to use. But saying just that it is not good, just by itself is not useful. If something is not quite right, I would appreciate that not only you tell me, but also suggest a better way to make it more usable.
So let me tell you in more detail how it is working now.
- The current status of the editor
Currently, each design theme proposal is made of files that define templates, CSS style sheets and icons. You start by going to the design theme creation page:
phpclasses.org/design.htmlAs demonstrated in the past, initially you create a design theme giving it an unique name.
files.phpclasses.org/graphics/creat ...The site creates a copy of the current site main template and the main CSS style sheet files.
files.phpclasses.org/graphics/theme ...For now you can only redefine the site main HTML template and style sheet. In the future you may be able to redefine other templates and style sheets.
If for some reason you are not happy with the changes you made to the template or style sheet files, you can revert to the original files by using a new link that says "Reset to initial contents".
- Replacing the site icon images
One of the new features added to the design editor since the last article, is that now you can provide alternative images for many types of icons used in the site.
You can replace either small or large icons. Small icons appear usually next to the navigation links and have the size of 24 x 24 pixels. Large icons appear usually in larger menus and have the size of 80 x 60 pixels.
You must provide images with the exact size for each type of icon. They can only be of GIF format, as it is the only transparent format that is well supported by all browsers.
files.phpclasses.org/graphics/add_t ...- Visual HTML template editor
Everybody knows HTML. However, HTML templates usually employ a specific syntax to define how to insert special template variables that represent parts of pages that may vary from page to page.
The design theme editor provides a way to visually edit HTML templates without having to learn the syntax of template variable marks.
files.phpclasses.org/graphics/visua ...The editor presents a toolbar that has a button to insert a template variable mark. When you click in that button, it shows a pull down menu to select which template variable you want to insert. Which you pick a template variable, it will be inserted in the current cursor position of the visual editor.
files.phpclasses.org/graphics/inser ...Template variables appear in the visual editor as rectangle with a dashed border. Inside the rectangle you can see a preview of how that variable will appear when the template is processed.
files.phpclasses.org/graphics/visua ...For instance, if you insert a navigation bar, you may see the navigation bar entries in a way that is practically the same as in the pages that use the template.
Some template variables have alternative values that correspond to different options of the variables. Those that have alternative values appear with the sign + after the template variable name on the top left corner of the template variable rectangle.
If you click on that rectangle, a pull down menu will appear showing the available alternatives for that variable. Click on one of the menu entries to switch to a different alternative.
files.phpclasses.org/graphics/templ ...If you prefer to edit the template HTML directly, you should click on the HTML button of the editor toolbar.
The template variables appear in the HTML inside curly braces { } . The name inside defines the type of template variable, like this:
{navigation}
If you want to use an alternative value for that template variable, you need to follow the name by a single space and the name of the alternative, like this:
{navigation notabs}
- Editor components are Open Source
One of the reasons why the design proposal system has been taking so long is that it required developing a couple of complex components to implement features that were not available in similar Open Source solutions.
One of those components was the visual editor. It required developing a reasonable large JavaScript class that provides a WYSIWYG (What You See Is What You Get) editor. The idea is to simplify the lives of the designers that want to see immediately how their templates will look like.
The support for inserting template variable marks with custom previews for all supported alternatives is one of the features that required developing this editor component.
A plug-in was developed for the Forms Validation and Generation package to make it easy to integrate in a Web forms based user interface. So, this editor and its PHP plug-in are now Open Source code distributed as part of that package:
phpclasses.org/formsgenerationRecently I have written an article about this HTML editor plug-in:
phpclasses.org/blog/package/1/post/ ...Another component addresses security issues. For security reasons, HTML template and CSS style sheets are not allowed to have JavaScript in them.
The site will validate HTML and CSS to prevent the injection of Javascript that could be used to perform security exploits.
A new package of classes was developed to parse and validate HTML and CSS. Among other things, it can filter any form of JavaScript present in the theme files.
This is a really extensive package. It really parses element by element of HTML, XHTML, CSS and even DTD documents. That it why it took more than 2 months to develop.
It is very hard, if possible at all, to produce a really 100% secure HTML filtering solution. The problem is that browsers have security holes that make them mishandle malformed HTML in the most unexpected ways.
Therefore, the theme submission system will require approval from a moderator. He will take another look at the submitted HTML templates and CSS style sheets to avoid security problems. The idea is to minimize the chance approving themes with eventual exploits that could bypass the the secure HTML filter package.
In any case, if you need a robust solution to prevent most forms of cross-site scripting and cross-site request forgery security exploits in the form of JavaScript present in user submitted HTML or CSS, you may want to try this package.
It is Open Source and was already released some time ago. Just let me know if you find out any exploit cases that this package does not yet handle very well.
phpclasses.org/secure-html-filter- Submitting a design theme proposal
When you are done with your design theme proposal, you need to submit it for approval using a link in the design page named "submit your design".
You are prompted to enter a description of your design theme proposal. Here you should enter a few sentences that enumerate the main changes that you made when compared to the original site design theme. This is just for helping users to notice what are the most important aspects that you improved.
[submitting a design proposal]
You need to wait a while before a moderator can review your design theme proposal. A moderator may reject your proposal if it does not present significant changes or is very similar to other proposals.
You will be notified by e-mail regardless your proposal is accepted or rejected.
- Changing a submitted proposal
After you submit your design theme you cannot make any changes, but you can view the contents of your theme files in the design page.
If for some reason you want to change any of the files or the design theme description, you need to use a link in the design page named "cancel the design submission".
After you make the changes you wanted, you need to submit your design theme again, so it can participate in the contest.
- Browsing approved proposals
After your proposal is accepted, it will be available for review by other site users.
Currently, this part is not yet implemented, but the intention is to let users see different screenshots of the approved design themes on different types of pages.
Each design theme proposal will have its own forum, so users can post comments and suggest other improvements.
Some users expressed concerns that their design theme HTML templates, CSS and icons be stolen by other contestants. Presenting the proposals as screenshot images should make more difficult that this happens.
Still, one possibility that I am considering is to have an option to do not let other users see a design proposal if the author does not want to, at least until the voting period starts.
In that case other users could not post comments. Just let me know if you think this would be a better idea.
Anyway, the moderators will be paying attention to designs that look too similar. Only the first to apply will be approved.
- Voting period and winner announcements
The voting system is also not yet ready. The intention is to finish it in time for the election to start no later than early December, so the winner and runner-ups are announced in January.
The winner will earn the amount of USD $3.000,00 as main prize. He must have an account in Paypal to receive that amount. Make sure you have created an account in Paypal before you apply to the contest.
The winner must sign a contract on which he states that he has all the rights to all the art work used in his design theme, so he can transfer those rights permanently to the PHPClasses site. It is the same as if the winner was hired directly to create a design theme for the site.
The winner will also earn an elePHPant mascot and a PHPClasses premium subscription. The runner-ups also earn prizes provided by sponsors. Take a look at the award page for more details:
phpclasses.org/award/designYou will have time until the election starts in December to submit your proposal. So now it is the time for you to start working on your design theme proposal, if you have not done so already.
- Your improvement suggestions
Since this is the first time the contest is organized, it is natural that not everything is perfect, so there is room for improvement.
If you have suggestions on how to improve the current system, please post a comment to let me know about your ideas.
You need to be a registered user or login to post a comment
1,616,695 PHP developers registered to the PHP Classes site.
Be One of Us!
Login Immediately with your account on:
Comments:
4. Contest is over? - Daniel (2009-12-21 18:17)
Redesigning phpclasses.org... - 1 reply
Read the whole comment and replies
3. site design - Ben Francis (2009-11-11 02:52)
Rather elaborate!... - 1 reply
Read the whole comment and replies
1. site redesign - Aveesh Kumar (2009-10-16 19:00)
site redesign using dojo - the javascript framework... - 7 replies
Read the whole comment and replies
2. About Time - Aubrey (2009-10-14 09:42)
New Site Design - 4 suggestions and some general comments... - 1 reply
Read the whole comment and replies
1. Web design 2.0: o usuário redesenha seu site favorito (2009-12-10 03:18)
Site PHP Classes é um sucesso, tem ótima audiência, mas parte do público não gosta do design...
