Ticket #3 (assigned task)

Opened 4 years ago

Last modified 4 years ago

Converting query forms to tableless layout

Reported by: ben.winnubst@nmhs.govt.nz Owned by: vinicius.antonio
Priority: minor Milestone:
Component: interface Version:
Keywords: Cc: renato.murasaki
Estimated Hours: 0.0 Add Hours to Ticket: 0
Total Hours: 0

Description

As requested by Ernesto Spinaker, I have converted one query form to tableless layout. I applied the CSS styles which were in my ABCD demo. The original html page is http://abcd.homolog.bireme.br/cgi-bin/wxis.exe/iah/scripts/?IsisScript=iah.xis&lang=en&base=MARC
However, I was not able to reproduce the same top banner, to do that I would probably need to edit styles.css and add some suitable classes. Also there are minor changes in fonts and layout, however I wanted to minimise the use of inline styles. I am ready to continue with converting other files, and wait for your feedback and instructions.

Attachments

MARC6.htm (6.0 kB) - added by renato.murasaki 4 years ago.
MARC7.htm (6.0 kB) - added by Ben Winnubst <ben.winnubst@nmhs.govt.nz> 4 years ago.
Corrected layout
advMARC4.htm (13.1 kB) - added by Ben Winnubst <ben.winnubst@nmhs.govt.nz> 4 years ago.
Advanced MARC search form
formiah.css (2.6 kB) - added by Ben Winnubst <ben.winnubst@nmhs.govt.nz> 4 years ago.
MARC8.zip (2.2 kB) - added by Ben Winnubst <ben.winnubst@nmhs.govt.nz> 4 years ago.
advMARC9.zip (2.8 kB) - added by Ben Winnubst <ben.winnubst@nmhs.govt.nz> 4 years ago.
tableless_lay.zip (27.1 kB) - added by Ben Winnubst <ben.winnubst@nmhs.govt.nz> 4 years ago.
scripts and css for tableless layout
tableless_lay2.zip (0.5 MB) - added by Ben Winnubst <ben.winnubst@nmhs.govt.nz> 4 years ago.
Completed version
tableless_lay3.zip (0.5 MB) - added by Ben Winnubst <ben.winnubst@nmhs.govt.nz> 4 years ago.
Corrected paths
tableless_lay4.zip (0.5 MB) - added by Ben Winnubst <ben.winnubst@nmhs.govt.nz> 4 years ago.
includes latest changes (vs 20 of ahform.htm)
tableless_lay5.zip (0.6 MB) - added by Ben Winnubst <ben.winnubst@nmhs.govt.nz> 4 years ago.
Final version
tableless_lay6.zip (0.6 MB) - added by Ben Winnubst <ben.winnubst@nmhs.govt.nz> 4 years ago.
tableless_lay7.zip (0.6 MB) - added by Ben Winnubst <ben.winnubst@nmhs.govt.nz> 4 years ago.
Amended to comply with new page design
tableless_lay7a.zip (0.6 MB) - added by Ben Winnubst <ben.winnubst@nmhs.govt.nz> 4 years ago.
Slight amendment made to prevent buttons overflowing in French
tableless_lay7b.zip (0.6 MB) - added by Ben Winnubst <ben.winnubst@nmhs.govt.nz> 4 years ago.
Changes made to buttons and to allow using large fonts

Change History

  Changed 4 years ago by ben.winnubst@nmhs.govt.nz

My ticket keeps getting rejected ("max number of external posts exceeded"), so I can't send the file that I've changed. Please advise.

  Changed 4 years ago by ben.winnubst@nmhs.govt.nz

Have now succeeded with a tableless layout which is closer to the original, and improved the top banner. Tried this previously, but it didn't work, because there was a small error in the markup which broke the rendering. I will email a corrected file to you. I cannot send it as an attachment to this ticket, because it will apparently be rejected as potential spam. Please advise if you do not get the email.
Further, I have tested the layout under IE 6, IE 7, and Firefox, and 1024x768pix and 1280x1024pix monitors. All ok.

Ben Winnubst

  Changed 4 years ago by renato.murasaki

  • cc renato.murasaki added

Hi, Ben. Thanks for your contribution. Please, before sending attach files, try to put your personal information on "Preferences". Let me know if this works.
Thanks.

Changed 4 years ago by renato.murasaki

  Changed 4 years ago by renato.murasaki

Hi, Ben! Please, let me know if the file which you were tring to upload is this attached. I received it by email with your last comment. Thanks.

Changed 4 years ago by Ben Winnubst <ben.winnubst@nmhs.govt.nz>

Corrected layout

  Changed 4 years ago by Ben Winnubst <ben.winnubst@nmhs.govt.nz>

Hi Renato
Have attached the correction version MARC7.htm herewith.
Two comments:
1. Following standard English usage, I have changed the terms "Free form" and "Advanced form" to "Basic search" and "Advanced search".
2. The graphical buttons Help, Config and Search are only 13pix high, and very small on my 1280 x 1024 pix monitor. They should be either made larger, or changed to standard buttons (at least, for the Search button).

  Changed 4 years ago by renato.murasaki

  • owner set to vinicius.antonio
  • status changed from new to assigned

  Changed 4 years ago by Ben Winnubst <ben.winnubst@nmhs.govt.nz>

Advanced MARC search form:
I have been working on converting this, however it is necessary to add many inline style commands. This is because the existing CSS do not have adequate elements or class id's to keep the combo boxes, text box and icons aligned in rows. Two options: I could create an inline style sheet, which should be placed in the <head> section, or I could add some elements or class id's to an external style sheet eg layout.css. Which option is preferred?

Changed 4 years ago by Ben Winnubst <ben.winnubst@nmhs.govt.nz>

Advanced MARC search form

  Changed 4 years ago by Ben Winnubst <ben.winnubst@nmhs.govt.nz>

Attached is a provisional tableless layout for the Advanced search form for MARC db. I've put an inline style sheet into the <head> section, it would be better to rename some elements and class id's, and put them into components.css or styles.css. Have tested it with IE 7, 1280x1024pix and 1024x768pix monitors (ok). The row elements are almost (but not exactly) aligned with IE 6 and Firefox - probably due to different rendering of margins and padding by different browsers, therefore some fine tuning still needed. I can continue with this task after 22 Jan approx.

  Changed 4 years ago by vinicius.andrade

Hi Ben,

Looks great, one information that could help is that we planning to have a separated CSS just for the IAH interface, so you could copy the ABCD standard style and remove the parts that IAH don't use and add specifics ones, or start a new from scratch using the convention (identifiers, class names) from the ABCD site (style-en.css).

Please let us know if you have any doubt.

Best Regards,
Vinicius Andrade

  Changed 4 years ago by Ben Winnubst <ben.winnubst@nmhs.govt.nz>

Hi Vinicius
Unable to attach my finished search layouts, sent them as email attachments, to a new ticket #4. Sending attachments worked previously, but not this time.
Ben

Changed 4 years ago by Ben Winnubst <ben.winnubst@nmhs.govt.nz>

Changed 4 years ago by Ben Winnubst <ben.winnubst@nmhs.govt.nz>

Changed 4 years ago by Ben Winnubst <ben.winnubst@nmhs.govt.nz>

  Changed 4 years ago by Ben Winnubst <ben.winnubst@nmhs.govt.nz>

Hi Vinicius
Converted search interface forms (basic - MARC8.htm, and advanced - advMARC9.htm) for MARC db to zip files, succeeded in attaching them. See also ticket #4. Awaiting your feedback on what else needs converting to tableless layout - eg results, configuration screen etc.
Ben

  Changed 4 years ago by Ben Winnubst <ben.winnubst@nmhs.govt.nz>

Hi Vinicius
I converted a few more forms, then realised that I would need to revise the forms already done, to become very close to the original layouts. Looking good so far. Still need to do the result displays. Takes some time to do, a tableless & CSS layout is more complex than a simple <table>! The next step would be to paste my markup into the .htm templates (in the iah\wxis\I\ folder) and test that the correct page is created dynamically. I will try to test one or two pages. Two questions: 1)is there a tool to make this easier? 2)do you want me to try doing this next step (ie editing the .htm templates)? The job will take at least a week or two.
Ben Winnubst

follow-up: ↓ 14   Changed 4 years ago by Ben Winnubst <ben.winnubst@nmhs.govt.nz>

Hi Vinicius
Have converted most of the pft's and htm's in my demo ABCD installation, in c:\ABCD\www\htdocs\iah\scripts\en folder, to test functionality and tableless layout. All work well. I will proceed with converting the result displays. Is there a tool to translate from English to other languages?
Ben Winnubst

in reply to: ↑ 13   Changed 4 years ago by vinicius.andrade

Replying to Ben Winnubst <ben.winnubst@…>:

Hi Ben,

Perfect, yes the project has a "translate" directory with small shell scripts that translate the system messages to other languages basead on a text file. Please see:

http://reddes.bvsaude.org/projects/iah/browser/trunk/htdocs/iah/scripts/translate

Best regards
Vinicius

Changed 4 years ago by Ben Winnubst <ben.winnubst@nmhs.govt.nz>

scripts and css for tableless layout

  Changed 4 years ago by Ben Winnubst <ben.winnubst@nmhs.govt.nz>

Hi Vinicius
Attached is my completed work so far. The style sheet formiah.css should go into the \site\css\public\skins\classic\common folder. The file style-en.css should go into the \site\css\public\skins\classic folder. The folder en should go into the www\htdocs\iah\scripts folder. All these are the normal locations.
I have not converted the scripts relating to decs or those which I cannot test because I don't have them set up. Also, I did not fully convert the "list" and display formats to a tableless layout. This is because it would be necessary to close <div> containers in ahfoot.pft, however that file is also used with ahlist.pft. The <table> at the end for displaying records (in ahbnav.htm and ahrnav.htm) is not closed. Doctype html will overlook this omission, but doctype xhtml will give an error if a <div> is not closed. This could be fixed easily (in ahfoot.pft), however I still need to investigate further, in case doing this has unexpected effects somewhere else.
Some of the scripts had errors (mainly, <option> not closed), I have fixed those. Again, under doctype html the web browser will usually gloss over those minor markup errors, but xhtml will generate a low-level error.
I've also added focus (to the free form only), and used two page widths, both selected by conditional statements in ahhead.pft.
I did convert two of the MARC display formats to tableless layout (not in attached file), and got very good results. However, they work only within the <table> mentioned above. I decided therefore, not to convert the display formats at this time, because (1) labour needed, and (2) errors eg <div> not closed, will probably break the display. Whereas, omitting </td> </tr> </table>, as is often done, will usually not cause much trouble. I will revisit this at a later date.
I am currently preparing versions of the scripts for the translate folder, and expanding the *.txt files for language conversion. So far, this project has taken many times longer than I expected!!
Ben Winnubst

Changed 4 years ago by Ben Winnubst <ben.winnubst@nmhs.govt.nz>

Completed version

  Changed 4 years ago by Ben Winnubst <ben.winnubst@nmhs.govt.nz>

Hi Vinicius
Attached is my final version of conversions done to date, this is ready for use and can be added into the next release of ABCD (and iAH). See further notes in file. It would be helpful to add a chapter to the VHL Graphic Design Guide, this I am willing to do when needed.
Ben Winnubst

Changed 4 years ago by Ben Winnubst <ben.winnubst@nmhs.govt.nz>

Corrected paths

  Changed 4 years ago by Ben Winnubst <ben.winnubst@nmhs.govt.nz>

Hi Vinicius
My apologies! - I had omitted the "pfts" folder in the path names, hence the shortcut.pft files would be extracted into the wrong folders. I have fixed this in the attached zip file tableless_lay3.zip.
Note that ALL previous attached files are now redundant, and could be deleted. (I do not have the rights to delete them).
Ben

  Changed 4 years ago by Ben Winnubst <ben.winnubst@nmhs.govt.nz>

Hi Vinicius
Just noticed (on http://reddes.bvsaude.org/projects/iah/browser/trunk/htdocs/iah/scripts/translate)
that you had recently changed three files. I will update my versions accordingly, and send them to you tomorrow.
Ben

Changed 4 years ago by Ben Winnubst <ben.winnubst@nmhs.govt.nz>

includes latest changes (vs 20 of ahform.htm)

  Changed 4 years ago by Ben Winnubst <ben.winnubst@nmhs.govt.nz>

Hello Vinicius
attached tableless_lay4.zip now includes the latest changes made to ahform.htm (version 20). No other changes needed. Please note, I have added several more terms to the translation tables es.txt etc. You may want to ask someone with good knowledge of the non-English languages to check these. I can read a little Spanish and French, but not Portuguese.
Ben Winnubst

Changed 4 years ago by Ben Winnubst <ben.winnubst@nmhs.govt.nz>

Final version

  Changed 4 years ago by Ben Winnubst <ben.winnubst@nmhs.govt.nz>

Hi Vinicius
I have now done everything I can, and the project of converting the iAH forms part of ABCD is COMPLETED AT LAST!!. See further change notes in attachment tableless_lay5.zip. No further work is required on this project, except for some additions to the Graphic Design Guide to assist users who want to customise the appearance etc. Please advise if you want me to do that.
I estimate this project to have taken 300-400 hours.
Ben Winnubst

  Changed 4 years ago by Ben Winnubst <ben.winnubst@nmhs.govt.nz>

Hi Vinicius
I have not received any response to the tableless layouts and other files which I submitted on 30 March. They were not used in the latest ABCD demo 0.6. My layouts will work ok, but I think some improvements are possible. eg:
1. There are still a few <font> tags, these could be removed and another css rule added. Should all inline markup be removed? It is possible, but it would result in larger css files.
2. Add more alt, status and tooltip messages. They are often used by screen readers for people with poor vision.
3. Investigate whether it is possible to add a button whereby the user can change the font size (although, such a button should apply to the whole ABCD site, not only the search screens).
4. Add Close and Change Database buttons.
5. Fix the errors in some result formats.
Do you want me to continue work on any of the above improvement suggestions?
Regards
Ben Winnubst

  Changed 4 years ago by vinicius.andrade

Hi Ben

First of all sorry for the delay in responding ... We are right now finish the integration of your contributions with other contributions on IAH Style. We expect to publish next friday 15/05 on ABCD Site.

Thanks again ... very good work on this adaptation.

Regards,
Vinicius Andrade

Changed 4 years ago by Ben Winnubst <ben.winnubst@nmhs.govt.nz>

  Changed 4 years ago by Ben Winnubst <ben.winnubst@nmhs.govt.nz>

Hi Vinicius
I've attached file tableless_lay6.zip. See changelog in that file. Basically, I've converted entirely to css and tableless layout, and eliminated all deprecated markup. Should now be very close to proper XHTML standard. See also the solution I found to fix details display with secs-web.
Let me know if you want me to change anything to fit in with any new web design for the site.

Ben Winnubst

Changed 4 years ago by Ben Winnubst <ben.winnubst@nmhs.govt.nz>

Amended to comply with new page design

  Changed 4 years ago by Ben Winnubst <ben.winnubst@nmhs.govt.nz>

Hi Vinicius
New version tableless_lay7.zip attached, see changelog. Edited and corrected as required to apply your new page design for the iAH screens.

Note that for optimum display, all the files should be used.

Ben Winnubst

Changed 4 years ago by Ben Winnubst <ben.winnubst@nmhs.govt.nz>

Slight amendment made to prevent buttons overflowing in French

Changed 4 years ago by Ben Winnubst <ben.winnubst@nmhs.govt.nz>

Changes made to buttons and to allow using large fonts

  Changed 4 years ago by Ben Winnubst <ben.winnubst@nmhs.govt.nz>

Hi Vinicius
I have done further testing of iAH screens using larger fonts (up to 125%), to allow using a large font size. It was necessary to make some minor changes, to avoid overflows where possible. All ok in English, but if using a very large font in IE, the buttons on the top navigation bar will overflow onto the next line, if there are too many characters in the "values" attribute (as occurs in French, for example). I cannot find a way to change the intrinsic padding to prevent this.
Also, I have centered the A-Z buttons on the Index screen, to improve the appearance.
I have also fixed the small defect where buttons did not look exactly alike.
All these changes (in ahindx.htm, ah*top.htm, ah*bot.htm, layout.css) have been done for all languages, in the attached file tableless_lay7b.zip. Further details in change_notes.txt.
Regards
Ben Winnubst

Add/Change #3 (Converting query forms to tableless layout)

Author



Action
as assigned
 
Note: See TracTickets for help on using tickets.