SSI Tips and Tricks - PowerPoint PPT Presentation

1 / 36
About This Presentation

SSI Tips and Tricks


... rotate your banner image to something season-specific ( ... the IE Tab extension (or just open IE), due to IE's numerous rendering ... – PowerPoint PPT presentation

Number of Views:83
Avg rating:3.0/5.0
Slides: 37
Provided by: BillPa4
Learn more at:
Tags: ssi | season | tips | tricks


Transcript and Presenter's Notes

Title: SSI Tips and Tricks

SSI Tips and Tricks
  • Server-Side Includes (technically eXtended SSI or
    XSSI) can do much more than add headers and

SSI Tips and Tricks
Content Re-use
  • Use SSI to re-use content. Less typing and easier
  • If youre going to use the same content more than
    once (if its big) or two or three times (if its
    small) make it an include.
  • Examples
  • http//
  • http//

SSI Tips and Tricks
Term/Year switching
  • Never update your pages for term/year again
  • lt!--config timefmt"Y" --gt Sets DATE_LOCAL to
    YYYY format
  • lt!--set var"year" value"DATE_LOCAL" --gt
  • lt!--config timefmt"m" --gt Sets DATE_LOCAL to
    MM format
  • lt!--if expr"DATE_LOCAL gt 08 DATE_LOCAL lt
    12" --gt lt!--set var"term" value"Fall" --gt
    Aug-Dec, termFall
  • lt!--elif expr"DATE_LOCAL gt 01 DATE_LOCAL
    lt 06" --gt lt!--set var"term" value"Spring"
    --gt Jan-May termSpring
  • lt!--else --gt All other times (June and July)
  • lt!--set var"term" value"Summer" --gt
  • lt!--endif --gt

SSI Tips and Tricks
Term/Year switching
  • Example
  • ltpgt
  • You must be enrolled on the Lawrence campus and
    have paid the
  • Legal Services for Students campus required fees
  • lt!--echo var"term" --gt lt!--echo var"year" --gt
    to be
  • eligible for our services during the lt!--echo
    var"term" --gt
  • session.
  • lt/pgt
  • Turns into fees for Fall 2009 and during the
    Fall session
  • You can also use this to rotate your banner image
    to something season-specific (http//

SSI Tips and Tricks
SSI Date Filters
  • Use SSI to switch date-specific content
  • lt!--config timefmtm/d" --gt
  • lt!--if expr"DATE_LOCAL gt 03/01 DATE_LOCAL
    lt 05/01" --gt
  • ltpgt
  • Any content within this conditional will not be
    displayed (in any fashion) unless it is March or
  • lt/pgt
  • lt!--endif --gt
  • These can be as generic or specific as you need,
    including time

SSI Tips and Tricks
  • Use SSI to between chunks of content
  • lt!--if expr"QUERY_STRING kulc" --gt
  • lta href"nontrad"gtWhat if I'm a nontraditional
    student?lt/agtltbr /gt
  • lt!--endif --gt
  • These can be as generic or specific as you need,
    including time
  • http//
  • http//
  • http//

SSI Tips and Tricks
File Sizes and Modify Dates
  • Use SSI to show file sizes
  • lt!--config sizefmt"abbrev" --gt
  • Size of is
  • lt!--fsize file"" --gt.
  • Show last modified dates for files or the page
  • lt!--config timefmt"c" --gt
  • file.pdf was last modified on lt!--flastmod
    filefile.pdf" --gt.
  • This page was last modified on lt!--echo
    var"LAST_MODIFIED" --gt

SSI Tips and Tricks
Final Notes
  • Pages must end in .shtml to use SSI
  • Can use SSI in files with PHP, just be careful
  • Can use include to pull in the results of PHP
  • Best practice to surround environment variables
    (ex. DATE_LOCAL) in braces when using, i.e.
  • This has never caused me a problem, YMMV
  • lt!--putenv --gt please dont use this on live
  • http//
  • http//

CSS Tips Tricks
  • CSS is more powerful than you may realize. Here
    are a few tricks you can use on your pages.

Invasion of the Body Switchers
  • This CSS trick is handy for having multiple page
    layouts in a single style sheet. It gives your
    users the ability to view the page with various
    font sizes, contrasts, etc. This flexibility
    aids in making your site much more accessible to
    larger audiences, and also illustrates a useful
    feature of CSS (the cascading part).
  • http//

CSS Image Maps
  • Image maps have been around for years, and with
    the rise of CSS, it is possible to create an
    image map with pure CSS. This helps make your
    website more accessible with CSS turned off,
    since the content will display in a logical
  • http//

CSS Sprites
  • CSS sprites give you the ability to reduce the
    number of images a user has to download. This
    cuts down on server requests and helps your pages
    load faster.
  • If you find yourself loading numerous small
    images (such as icons for navigational elements),
    CSS sprites are a useful tool to have in your
  • http//

Other Sources of Tips Tricks
  • There is no shortage of places to find CSS tips
    and tricks. Here are a few places we (SSTS) go
    when were looking for ideas and help
  • http//
  • http//
  • http//
  • http//
  • http//
  • http//

  • Just what in the world are they?

What are Microformats?
  • Microformats are standardized chunks of code
    designed for easy interpretation by people first.
    They can be useful when posting events, contact
    information, or a large number of various other
  • http//

Types of Microformats
  • hCard
  • An hCard is handy for displaying contact
    information about a person, organization, or
    place in a standardized way.
  • XFN (XHTML Friends Network)
  • If you link to another person or companys
    website, this microformat will help describe the
    relationship between you and the other individual.

Types of Microformats (contd)
  • hCalendar
  • Events and other calendar items marked up in this
    format can be easily interpreted.
  • hReview
  • hReviews are standardized ways to post reviews of
    products, services, etc. on a website.

Those look hard to use!
  • Microformats may seem complex at first, but as
    with anything code related, they come easier with
    time and use.
  • In addition, there are cheat sheets as well as
    tools that can help you automatically create
    microformats based on your data.
  • http//
  • http//
  • http//
  • http//

Useful Firefox Extensions for Web Development and
  • Why make it harder on yourself?

Recommended Extensions
  • Well cover these in more detail on the next few
  • ColorZilla
  • Firebug
  • FirePHP
  • YSlow
  • NoScript
  • Operator
  • User Agent Switcher
  • Web Developer

  • ColorZilla is a useful color picker that lets you
    get the exact color of any item on a web page.
    This is especially handy if you want to use a
    color on another website, but you do not want to
    wade through their CSS to figure out which
    specific color they used.

Firebug (and its sub-extensions)
  • Firebug is an extremely handy tool (we use it
    daily) for viewing and editing the HTML of a site
    in real-time. If you use JavaScript to
    dynamically change elements on your page, Firebug
    tracks those changes for you. It also tracks
    information such as how many HTTP requests you
    are making (images, css/js files, etc), any CSS
    rules that apply to a given (selected) element,
    and much more.
  • Firebug also has numerous sub-extensions that
    enhance its functionality. These include YSlow,
    which is a tool for analyzing the overall
    performance of your website and FirePHP, which
    allows you to log to Firebugs console with a PHP
    method call.

  • NoScript turns off JavaScript globally, then
    allows you to manually allow sites that you
    trust. This helps to prevent possible security
    holes in countless websites.
  • In addition, we use NoScript to test our
    websites functionality with JavaScript turned
    off. To do this, we disable JavaScript for the domain through the NoScript interface.
    After testing, we simply re-allow

  • Operator is an extension that deals with
    microformats. It scans the page you are on for
    any known microformats and displays them in a way
    that you can easily perform actions on them.
  • For example, if there is an event on a page, you
    are given the option to add that to a Google or
    Yahoo calendar, or to Microsoft Outlook.

User Agent Switcher
  • The User Agent Switcher extension allows you to
    change your user agent, tricking websites into
    thinking that you are using a different browser.
    This lets you test different CSS styles or
    content that is served to users of other browsers
    (such as Opera, Safari, or mobile browsers like
    the iPhone).
  • Note If you want to test what sites will look
    like in Internet Explorer, we recommend that you
    use the IE Tab extension (or just open IE), due
    to IEs numerous rendering bugs. The UA Switcher
    will not actually render the page differently
    unless your code serves different content/styles
    based on the users browser.

Web Developer
  • This extension adds a toolbar to Firefox that
    gives you numerous functions. From the toolbar
    you can
  • Validate the (X)HTML, CSS, and/or Section 508
    compatibility of your site
  • Edit the CSS rules applied to your page to test
  • Clear cookies, sessions, and other data without
    restarting your browser
  • Much more

Code Editors
  • The best tool(s) for the job

Recommended Editors
  • UltraEdit (version 14 or so)
  • Pros
  • Syntax highlighting
  • SFTP integration
  • SSH integration
  • Fast
  • Simple conversion functions built in
  • Column mode for edits
  • Can do just about anything to text
  • Great find/edit/replace support in folders/files

Recommended Editors
  • UltraEdit
  • Cons
  • Not free (but close, very cheap)
  • No code completion
  • No error checking
  • Not a true IDE, just a powerful text editor
  • Full IDE version is called UltraEdit Studio, more
  • Website
  • http//

Recommended Editors
  • Netbeans 6.5
  • Pros
  • Free
  • Full IDE
  • Code folding code completion
  • Thorough HTML code completion
  • Includes attributes and explanations
  • Automatic error checking
  • Works on Windows, Linux, Mac

Recommended Editors
  • Netbeans 6.5
  • Cons
  • No SFTP support yet
  • 6.7 is due in June 2009, or you could use 6.7 RC1
  • May be more complex than necessary for basic
    (X)HTML CSS development
  • Website
  • http//

  • Feedback?
  • Comments?
  • Concerns?
  • Ideas for future presentations?
  • Bill Parrott and Brian Fenton

Recommended Editors
  • ZendStudio 5.5.1
  • Pros
  • By the makers of PHP
  • Full IDE (integrated development environment)
  • Code completion (PHP, HTML, PHP comments)
  • PHPdocumentor built in
  • Syntax highlighting
  • Automatic error checking as you go
  • SFTP integration
  • SQL editor built in
  • Goto Source
  • Code Analyzer

Recommended Editors
  • ZendStudio 5.5.1
  • Cons
  • Not free
  • Mediocre integration with versioning software
  • Focused on PHP (limited JS and HTML support)
  • Website
  • http//

Recommended Editors
  • ZendStudio 6.1.2
  • Pros
  • Built on top of Eclipse IDE (could be a pro or
  • Code completion (PHP, HTML, PHP comments)
  • PHPdocumentor built in
  • Syntax highlighting
  • Automatic error checking and code analysis as you
  • SFTP integration
  • SQL editor built in
  • Goto Source
  • Good versioning support
  • Extendable via Eclipse plug-ins

Recommended Editors
  • ZendStudio 6.1.2
  • Cons
  • Not free (350-400)
  • Not always very speedy
  • Decent-sized learning curve
  • SFTP integration can be improved (Esftp plugin)
  • Website
  • http//
Write a Comment
User Comments (0)