Download
1 / 15
150 likes | 261 Vues
Replacing Frames without PHP. Linda Kerley User Element linda.kerley@userelement.com www.userelement.com. The problem space. Search Engine Optimization Search engines don't understand HTML frames. Search engines also don't understand JavaScript.
E N D
Replacing Frames without PHP Linda Kerley User Element linda.kerley@userelement.com www.userelement.com
The problem space Search Engine Optimization • Search engines don't understand HTML frames. • Search engines also don't understand JavaScript. Any content that is not ‘present and visible’ when a page arrives at the client will not be indexed.
Background • Often frames and JavaScript are used in combination to: • Blend static and dynamic elements within a single page • Handle navigation • Provide other related behaviours, e.g. style change to show current menu position, etc.)
Potential Solutions • AJAX • Client-side, typically uses <iframes>, doesn’t solve indexing problem. • PHP • Server-side. • Solves problem... But you need to learn the language. • SHMTL • Server-side features with standard HTML. • Very little learning involved.
SHTML approach • Process is very similar to converting to PHP. • We will: • Use server-side includes to manage static and dynamic page content***. • Use good, old-fashioned hyperlinks for page navigation. • Keep our JavaScript behaviours, but move them to a different event-handler (onload, etc.)
Preliminary Steps • Web hosting support: • Verify that host supports SHTML files. • Verify web server type, Apache or MS server. • (Optional) verify that you can upload an .htaccess file. • Review: • Current directory/file organization. • Current page layout re: static versus dynamic elements, reuse versus unique content.
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>Frame Sample</title> </head> <frameset framespacing="0" border="1" rows="234,*,29" frameborder="0"> <frame name=“branding-area" src=“branding-area.htm" scrolling="auto" target="_self" marginwidth="2" marginheight="1"> <frame name=“left-nav" src=“left-nav.htm" scrolling="auto" target="_self"> <frame name=“page-content" scrolling="no" noresize target="contents" src=“page-content.htm" marginwidth="2"> <noframes> <body> <p>This page uses frames, but your browser doesn't support them.</p> </body> </noframes> </frameset> </html> Frame example Index file serves as ‘parent’ container. ‘Static’ reuse branding element Branding area Left navigation Content area Dynamic, reuse left navigation Page- specific content
Server-side include example Parent concept disappears. Website consists of individual pages. ‘Dynamically inserted’ branding element <html> <head> <title>Individual web page</title> </head> <body> <div id="brandingArea"> <!--#include virtual="../includes/branding-area.ssi" --> </div> <div id="leftNav"> <!--#include virtual="../includes/left-nav.ssi" --> </div> <div id="pageContent"> <h1>Page Title</h1> <p>Loremipsumdolor sit amet, consectetueradipiscingelit. Praesentaliquam, justoconvallisluctusrutrum, eratnullafermentumdiam, at nonummy quam ante ac quam. Maecenas urnapurus, fermentum id, molestie in, commodoporttitor, felis. Nam blandit quam ut lacus. Quisqueornarerisusquisligula. </p> </div> <div id="footer"> <!--#include virtual="../includes/footer.ssi" --> </div> </div> </body> </html> Branding area Left navigation Content area Dynamically inserted’ left navigation
Conversion Steps • Name files that will contain includes with .SHTML extension. • Setup include files. • Insert references to includes.
1. Name individual pages SHTML • Each file that contains includes receives the .SHTML extension. (‘S’tells the server to parse the file and execute any commands it finds before sending the file to the client.)
2. Setup include files • Each layout area that is reused in the individual files gets its own include file. • You can give the include file any extension you want. • Each include file should contain only the HTML needed to render that layout section. Strip out HTML, HEAD, BODY tags. • If includes are called from files at different levels in the directory hierarchy, use absolute file references for image content and other files.
3. Insert include references <body> <div id="brandingArea"> <!--#include virtual="../includes/branding-area.ssi" --> </div> <div id="leftNav"> <!--#include virtual="../includes/left-nav.ssi" --> </div> <div id="pageContent"> <h1>Page Title</h1> <p>Loremipsumdolor sit amet, consectetueradipiscingelit. Praesentaliquam, justoconvallisluctusrutrum, eratnullafermentumdiam, at nonummy quam ante ac quam. Maecenas urnapurus, fermentum id, molestie in, commodoporttitor, felis. Nam blandit quam ut lacus. Quisqueornarerisusquisligula. </p> </div> <div id="footer"> <!--#include virtual="../includes/footer.ssi" --> </div> </div> </body> • Syntax varies by webserver. • Use ‘virtual’ for Apache. • Use ‘file’ for MS IIS. • IIS doesn’t support file references that are ‘above’ the calling file in the directory structure. With Apache the file references can be anywhere. • You can use nested includes with Apache. • Dreamweaver can provide SSI previews. <!--#include virtual="../includes/left-nav.ssi“ - ->
Issues • Usability issue of ‘unfamiliar’ file extension. • For existing websites, loss of page rank at rename of file. • Use 301 redirects to preserve page rank, or ... • Instead of renaming your files, use mod_rewrite in your .htaccess file to instruct the server to treat your old file names as .SHTML files. Sample: AddTypetext/x-server-parsed-html .html Or... • Use ‘XBitHack’ to instruct server to parse files. • Doing server-side includes can negatively impact performance (time to render page). • Confine SHTML pages to only those files that require it. (Don’t rename every file on the site just to be consistent.)
Other (positive) impacts • You regain back button navigation. • You regain the ability to bookmark individual pages.
Useful tools • Lynx: shows how a search engine views your website pages. • Google webmaster tools. • Diagnostics tools identify issues with website development.
