1 / 36

SSI Tips and Tricks

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.

laurel
Download Presentation

SSI Tips and Tricks

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. 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: • http://orientation.ku.edu/registration/summer/terms.shtml • http://alcohol.ku.edu/education/

  3. 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 -->”

  4. SSI Tips and Tricks Term/Year switching • Example: “<p> 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" --> session. </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 (http://www.photos.ku.edu)

  5. 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" --> <p> Any content within this conditional will not be displayed (in any fashion) unless it is March or April. </p> <!--#endif -->” • These can be as generic or specific as you need, including time

  6. 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 • http://ssts.ku.edu/knowledgebase/web/htmlStandards.shtml • http://orientation.ku.edu/faq.shtml?kulc • http://orientation.ku.edu/faq.shtml?kuec

  7. SSI Tips and Tricks File Sizes and Modify Dates • Use SSI to show file sizes “<!--#config sizefmt="abbrev" --> Size of download.zip is <!--#fsize file="download.zip" -->.” • Show last modified dates for files or the page itself. “<!--#config timefmt="%c" --> file.pdf was last modified on <!--#flastmod file=“file.pdf" -->. This page was last modified on <!--#echo var="LAST_MODIFIED" --> ”

  8. 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 • HTTP_REFERER, REQUEST_URI, HTTP_USER_AGENT • <!--#putenv --> please don’t use this on live pages • http://www.std.com/web/help/xssi-cookbook.shtml • http://www.uic.edu/depts/scailab/system/tutorial.shtml

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

  10. 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://www.alistapart.com/articles/bodyswitchers/

  11. 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 structure. http://www.frankmanno.com/ideas/css-imagemap/

  12. 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. http://css-tricks.com/css-sprites/

  13. 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: • http://www.cssplay.co.uk/ • http://www.alistapart.com/ • http://css.maxdesign.com.au/ • http://meyerweb.com/eric/css/edge/ • http://www.noupe.com/ • http://css-tricks.com/

  14. Microformats Just what in the world are they?

  15. 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. http://microformats.org/

  16. 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 individual.

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

  18. 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://microformats.org/wiki/cheatsheets • http://microformats.org/code/hcard/creator • http://microformats.org/code/hcalendar/creator • http://microformats.org/code/hreview/creator

  19. Useful Firefox Extensions for Web Development and Programming Why make it harder on yourself?

  20. Recommended Extensions We’ll cover these in more detail on the next few slides. • ColorZilla • Firebug • FirePHP • YSlow • NoScript • Operator • User Agent Switcher • Web Developer

  21. ColorZilla 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.

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

  23. NoScript 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 ku.edu domain through the NoScript interface. After testing, we simply re-allow ku.edu.

  24. Operator 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.

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

  26. 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…

  27. Code Editors The best tool(s) for the job

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

  29. 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://www.ultraedit.com/

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

  31. 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: • http://www.netbeans.org/

  32. Questions? • Feedback? • Comments? • Concerns? • Ideas for future presentations? Bill Parrott and Brian Fenton sstsweb@ku.edu

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

  34. Recommended Editors ZendStudio 5.5.1 Cons: Not free Mediocre integration with versioning software Focused on PHP (limited JS and HTML support) Website: http://www.zend.com

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

  36. 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://www.zend.com

More Related