WebPAC Design and Best Practices
Co-Presented by: Debbie Turner, Library Training Consultant and Stephanie Dal Pra, Senior Systems Librarian, Encore Services
Standards for the WWW
W3C website provides lots of into such as: HTML element specs, validation tools, etc.
Web Devout website has lots of stats. Including stats on browsers compliance to html standard. The best is Firefox. IE is 70% compliant and has 52% of browser users.
http://www.w3schools.com has a lot of info and tools, tutorials, HTML element behavior, HTML element specs, browser compliance, HTML validator, which will look at your site and see what needs to be fixed, HTML Tidy also is a good validation tool.
Know your audience – consider voice browsers for disabled, consider older browsers too.
Stay compliant as possible, but be reasonable. Don’t go crazy and make your site unusable, for example by IE (remember IE only 70% compliant).
Validate and Evaluate
Prioritize exceptions to decide what needs code to accommodate IE, etc.
• HTML 4.01 – current
• HMTL 5.0
Bells and whistles
CSS – style sheets inline, external, old style HTML within HTML code
Tips and Tricks
Design for Firefox and fix for IE later
Plan your design first: what colors, images, etc.
Document your cod, you will forget! Document as if for someone else.
Maintain visual hierarchy in your code with tabs and spaces to make it readable and keep your tag structure readable, e.g., open and close in line.
Separate content and style as much as possible, leave only content in web page.
Use ALT tags for images, this helps with broken images, allows for search engine crawlers, and voice browsers.
Browser-Safe Web Palette – 216 color palette (see also http://www.lynda.com/hex.asp#) is used if you want to be absolutely sure your color choices are seen. This palette is basically the lowest common denominator for display types in existence.
Color names vs. Hex Values – hex is cross browser compliant
Fonts – keep headings, titles, and bullets in sans serif font and use serif fonts for large chunks of text. Use conditional CSS to call IE-only styles.
Use style wisely and plan – set styles to base HTML elements (H1, H2, body, p, td, etc.
Keep styles simple so they can be used multiple times
Font size and font family, colors, spacing
Keep Code Maintainable
- Use descriptive comments
- Annotate code for someone else
Test, Test, Test
- Make sure bells and whistles work as designed
- Check on multiple browsers
BUILDING A BETTER WEBPAC
Live and Staging Directories
-live live runs on port 80
-staging run on port 2082
Edit locally on PC
Then test on staging
Then move over to live when ready
Use good tools and back up frequently
See manual page #106808 for more info.
Always keep a complete backup set before you start editing
Example Sets – give out of the box look and feel, reference for new customizable forms that have been added to this release, are an easy starting point for redesigns, and are all on CSDirect for download. You can also see change notes here, you will need to read them, e.g. what will work with your version, etc.
Contents of Examples Sets
Images including those for the design, separate Photoshop images for customizing, also contains the CSS.
Includes those needed to support the functionality
Branding your WebPAC
-TOPLOGO Web options
-BOTLOGO Web Option
ProStyles.css – not editable
Styles.css is editable, allow you to override defaults
-editable, provides workarounds for IE
/ on its own or followed by words that causes the WebPAC to perform an action
/ -> mainmenu.html
/patroninfo -> pverify_web.html
No direct command link?
Mandatory for WEBPAC PRO
Also called Record Display Def. file
Controls what fields can and cannot be displayed
See CSDirect for tutorial and documentation #106853
b|n|522|||b| this example 522 is suppressed on a field because there is no info in the element that you want suppressed
What is not controlled by webpub.def
Order records info.
Only have SHOWOREC=no_rdate on or off
These allow you to impose your own design on 22 groups of forms for different purposes
they can replace html sometimes with JS
Save time in creating pages
Can be dynamic
Can be conditional for example error messages
They are from specific
-check the IGR for the form to see which are available page #106941
must be on their own line and left justified
mainmenu and opacmenu can be the same
-easy to maintain: edit one, copy to the other
-“Home” is often not mainmenu.html but another library webpage
Can be different
-enable different feature to be offered on each menu
-mainmenu.html can be used as the library homepage
OPAC in Alt Languages
Must include the language code in the name of the file
Check all links from a screen to make sure those files are translated
Check weboptions to set language
Controlled by the Scope extension in the name of the file:
Include the scope number preceded by a tilde char and S in the URL.
Patron Specified Menus
Can offer diff. screens and searches based on PTYPE
Only works when patrons are signed in
You could use this for example for staff vs. patron screens and searches
Search Help Pages
Allow you to include real examples for your site
Another search button goes to search help
Create one for each index you offer in your OPAC
Phrase is controlled by web option BROWSE
Keyword is controlled by briefcit.html
Record Browse is controlled by briefcit.html
Also: briefcit_auth.html, briefcit_program.html, breifcit.resources.html
Bib_display.html controls the bib rec. display
ProStyles.css, styles.css and ie_styles.css
Example of what is available
Record View: patronview_web.html
Book Cart Form: viewsaves_web.html
Controls web OPAC behavior both live and staging have these files
Keep in sync
Test changes to options on staging
Keep a record of changes made
Need to restart to see changes
Web Options for bib record
Controls some elements of the display
-function available e.g. MARC display
-which icons or images used e.g. ICON_BUT_
-IGR page #106926
-Webpubdef this is now ignored in PRO
-RECORDFRAM also now ignored in PRO
-see FAQ for PRO on CSDRIECT
Controls within Bib Display
See handout for layout of ICONS
Using LOC Web Option
-can be single location
-can be wild-carded location using *
-can be a link to a file in screens directory
-can be a link to a file on another server
Staff View of Record
Controlled by Web Option: Staff
Will only work once signed in
Shows read-only staff view of a record
Does not use license
Button to switch to patron view and use links
Tips for viewing files
-View /Page source for html code display
-you can only see the scripts.css via browser
These are good for seeing other sites code
Also to see webpub.def http:///screens/webpub.def
Used for validation, content manipulation, event based on user actions
Level one is HTML e.g. head body
Level two title
Level three div
Characteristics of Elements
-id, name, title, scr, alt
used to identify Elements
Common uses: hover over page element, click on page element invokes event
-change element style
-show or hide an element
change attributes of all element with same ID, Name Type or change attributes of click elements
Call scripts with web options
System generated pages
Toggle display of search tips
-Place cursor in field
-Invoke event on user click
On the web
Use for color fonts, sizes, link behavior, backgrounds, border, etc.
-Sheets defined later in a page trump those defined earlier
-Style cascades over each other, styles called later trump earlier ones
-shows before user-defined stylesheets
On the Web
HTML, XHTML, and CSS 6th ed.
HTML & XHTML: The Definitive Guide
FIREFOX EXTENTIONS FOR WEB DESIGN
More then 50 for web design
Simplify web page deconstruction
Web developer’s toolbar
-check different resolutions, CSS edit
Firebug – examines HTML and CSS and sees how browser interprets it
Colorzilla color picker lets you find color info like hex and see DOM info
Internet Explorer 7 Developer Toolbar
Programs for Web Design
GIF vs. JPG vs. PNG
Difference has to do with the compression
PNG is very portable and good for small images and transparent images
Don’t use HTML to resize takes less bandwidth , more reliable across browser
JPG best for photos
Use transparent backgrounds in GIF/PNG
Place logos on top of styled elements
Tip: use one monitor for code and one for browser
Keep styles simple
Organized by Native HTML (TD, H1, P, etc.)
General Styles (colors, font sizes, font types, padding)