Using Nested Symbols To Generate Web Pages

1. Using Nested Symbols To Generate Web Pages Scott Luebking

2. Usability Mistakes When Handling User Form Errors • Returned page has only error messages • User has to return to previous web page and remember errors • Returned page has error messages only at top • User has to search for the field with error • Occasionally form on returned page with error messages doesn’t have values initially entered by users • User has to re-enter data

3. Symbolizing A Form • Need ability to integrate user’s initial form values into error message web page • A function introduces temporary symbols of format <<symbol-name>> into a form • double << and >> helps reduce potential conflict

4. Symbolizing Text and Radio • Text field • <INPUT NAME=ph> • <INPUT NAME=ph VALUE=<<FORM-ph>> > • Any pre-existing VALUE attribute is deleted • Radio field • <INPUT TYPE=RADIO NAME=p VALUE=z> • <INPUT TYPE=RADIO NAME=p VALUE=z <<FORM-p=z>>> • Any CHECKED attribute is deleted • Checkbox field • Like radio field

5. Symbolizing Textarea and Select • Textarea field • <TEXTAREA NAME=a></TEXTAREA> • <TEXTAREA NAME=a><<FORM-a>></TEXTAREA> • Text in textarea container is removed • Select field • <SELECT NAME=z> <OPTION VALUE=a> • <SELECT NAME=z> <OPTION VALUE=a <<FORM-z=a>> > • Any SELECTED attribute in OPTION is deleted

6. Additional Major Benefit To Symbolizing A Form • Could just specify values in form after determining what the errors are • While symbolizing, the function can also gather information about the fields which can be useful for error checking • types of fields • maximum size of text or password fields • expected values for RADIO, CHECKBOX or SELECT fields

7. Simplified Symbol Process • Symbolize form and gather information about the fields • Check user data using information about fields • If data errors • Create a symbol table • Put symbols in symbol table containing user-specified values for types of fields • FORM-firstname => “John” • Replace temporary symbols in form with values in symbol table

8. Using SymbolsFor Error Messages • The concept of symbols in forms can also be used for handling error messages • Symbols can be placed in the form where error messages would go • <<ERROR-zip>> <INPUT NAME=zip SIZE=5>

9. General Symbol Process • Create a symbol table • Symbolize form and gather information about the fields • Check user data using information about fields • Put symbols for errors messages in symbol table • ERROR-zip => “Please specify a zip code. <P>” • If data errors • Put symbols in symbol table containing user-specified values for types of fields • FORM-firstname => “John” • Replace symbols in form with values in symbol table

10. Benefits of Using Symbols For Error Messages • Code which is checking data and generating error messages doesn’t need to know where the error message is going on the page • Can change location of error message and not worry about changing the data checking code

11. Various Error Message Formats PLAIN ERROR MESSAGE ERROR-zip => “Please enter zip code.<P>” Result: Please enter zip code. BOXED ERROR MESSAGE ERROR-zip => <TABLE BGCOLOR=“YELLOW”> <TR> <TD> <STRONG>Please enter zip code.</STRONG> </TD> </TR> </TABLE> Result: Please enter zip code.

12. Using Nested Symbols Symbols ERROR-zip => <TABLE BGCOLOR=“<<ERROR-BACKGROUND>>“> <TR> <TD> <STRONG>Please enter zip code.</STRONG> </TD> </TR> </TABLE> ERROR-BACKGROUND => YELLOW Resulting HTML <TABLE BGCOLOR=“YELLOW”> <TR> <TD> <STRONG>Please enter zip code.</STRONG> </TD> </TR> </TABLE> Can easily change background color by changing symbol

13. More Nested Symbols ERROR-zip => <<BEGIN-ERROR>> Please enter zip code. <<END-ERROR>> BEGIN-ERROR => <TABLE BGCOLOR=“<<ERROR-BACKGROUND>>“> <TR><TD> <STRONG> END-ERROR => </STRONG> </TD> </TR> </TABLE> ERROR-BACKGROUND => YELLOW

14. More Nested Symbols ERROR-zip => <<BEGIN-ERROR>> Please enter zip code. ( 3 / <<ERROR-COUNT>>) <<END-ERROR>> ERROR-COUNT => 7 • Shows which number the error message is of all the error messages • The ERROR-COUNT symbol doesn’t need to be specified until after all the error messages are created.

15. Additional Ways To Use Symbols • Web page configuring • <BODY BGCOLOR=“<<project-page-background>>” > • <<project-left-menu>> • User identity • Portal page for <<user-full-name>> in <<user-city>>. • Time-sensitive greeting • greeting => ( “Good morning”, “Good afternoon”, ...) • User-specific information / functionality • <<additional-manager-info>> • <<info-for-developer>>

16. More Ways To Use Symbols • Data from databases • <<retrieved-article>> • <<student-list>> • <<subject-search-results>> • Multiple languages • day-of-week-text => (“Monday”, “Montag”, ...) • Symbols can also be used to generate web pages which don’t have forms

17. Symbols and XML • Each has benefits: • Symbols can be a easier concept to learn • Symbols can be faster to process • XML supports much more complicated information structures • The two methodologies can support each other: • The output from processing symbols can be passed to XML processors • XML can be used to create strings to store in symbol tables

18. Summary • Symbols can help improve the usability of web pages which are reporting user form errors • Symbols can be very useful when generating certain types of dynamic web pages • Symbols and XML can support each other • A dynamic web page generator (DWPG) perl class • form symbolizer • symbol table creator for user-entered data • symbol processor • macro processor