SSI Tips and Tricks

Document Sample
SSI Tips and Tricks Powered By Docstoc
					     SSI Tips and Tricks

 Server-Side Includes (technically
eXtended SSI or XSSI) can do much
more than add headers and footers
             SSI Tips and Tricks
                  Content Re-use
• Use SSI to re-use content. Less typing and
  easier corrections.
• If you’re going to use the same content more
  than once (if it’s big) or two or three times (if
  it’s small) make it an include.
• Examples:
                  SSI Tips and Tricks
                     Term/Year switching
• Never update your pages for term/year again:
   “<!--#config   timefmt="%Y" --> Sets $DATE_LOCAL to YYYY format
   <!--#set var="year" value="$DATE_LOCAL" --> $year=YYYY

   <!--#config timefmt="%m" --> Sets $DATE_LOCAL to MM format

   <!--#if expr="$DATE_LOCAL >= 08 && $DATE_LOCAL <= 12" -->
     <!--#set var="term" value="Fall" --> Aug-Dec, $term=Fall
   <!--#elif expr="$DATE_LOCAL >= 01 && $DATE_LOCAL < 06" -->
     <!--#set var="term" value="Spring" --> Jan-May $term=Spring
   <!--#else --> All other times (June and July) $term=Summer
       <!--#set var="term" value="Summer" -->

   <!--#endif -->”
              SSI Tips and Tricks
                 Term/Year switching
• Example:
  You must be enrolled on the Lawrence campus and have paid the
  Legal Services for Students campus required fees for
  <!--#echo var="term" --> <!--#echo var="year" --> to be
  eligible for our services during the <!--#echo var="term" -->

  </p>   ”
• 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
             SSI Tips and Tricks
                 SSI Date Filters
• Use SSI to switch date-specific content
  “<!--#config   timefmt=“%m/%d" -->
  <!--#if expr="$DATE_LOCAL >= 03/01 && $DATE_LOCAL <
    05/01" -->
    Any content within this conditional will not be
    displayed (in any fashion) unless it is March or

  <!--#endif -->”

• These can be as generic or specific as you
  need, including time
                SSI Tips and Tricks
            Fun with QUERY_STRING
• Use SSI to between chunks of content
   “<!--#if   expr="$QUERY_STRING = kulc" -->
   <a href="#nontrad">What if I'm a nontraditional
     student?</a><br />

   <!--#endif -->”

• These can be as generic or specific as you
  need, including time
             SSI Tips and Tricks
           File Sizes and Modify Dates
• Use SSI to show file sizes
  “<!--#config   sizefmt="abbrev" -->
  Size of is

  <!--#fsize file="" -->.”

• Show last modified dates for files or the page
  “<!--#config timefmt="%c" -->
  file.pdf was last modified on <!--#flastmod
    file=“file.pdf" -->.
  This page was last modified on <!--#echo
    var="LAST_MODIFIED" -->   ”
               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 scripts
• Best practice to surround environment variables (ex.
  DATE_LOCAL) in braces when using, i.e. ${DATE_LOCAL}
   – This has never caused me a problem, YMMV
• <!--#putenv --> please don’t use this on live pages
       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).
             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
                 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 toolbox.
      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 we’re looking for ideas and help:


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 uses.

          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 company’s
    website, this microformat will help describe the
    relationship between you and the other
  Types of Microformats (cont’d)
• 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.
Useful Firefox Extensions for Web
 Development and Programming
   Why make it harder on yourself?
         Recommended Extensions
We’ll 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 Firebug’s 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
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 IE’s numerous
  rendering bugs. The UA Switcher will not actually
  render the page differently unless your code serves
  different content/styles based on the user’s 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 changes
• 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
           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 now
     • May be more complex than necessary for basic
       (X)HTML & CSS development

• Website:
•   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:
            Recommended Editors
• ZendStudio 6.1.2
  – Pros:
     •   Built on top of Eclipse IDE (could be a pro or con)
     •   Code completion (PHP, HTML, PHP comments)
     •   PHPdocumentor built in
     •   Syntax highlighting
     •   Automatic error checking and code analysis as you go
     •   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: