replacing frames without php
Post on 24-Feb-2016
65 Views
Preview:
DESCRIPTION
TRANSCRIPT
Replacing Frames without PHP
Linda KerleyUser Elementlinda.kerley@userelement.comwww.userelement.com
The problem spaceSearch 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.
BackgroundOften 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 SolutionsAJAX
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 approachProcess 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 StepsWeb 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.
Frame example
Branding area
Left naviga
tionContent
area
<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>
‘Static’ reuse branding element
Page-specific content
Dynamic, reuseleft navigation
Index file serves as ‘parent’ container.
Server-side include example
Branding area
Left naviga
tion
<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>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. </p> </div> <div id="footer"> <!--#include virtual="../includes/footer.ssi" --> </div> </div></body></html>
‘Dynamically inserted’ branding element
Parent conceptdisappears. Websiteconsists of individual pages.
Dynamicallyinserted’left navigation
Content area
Conversion Steps1. Name files that will contain includes with
.SHTML extension.2. Setup include files. 3. 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>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. </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: AddType text/x-server-parsed-html .htmlOr...
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) impactsYou regain back button navigation.You regain the ability to bookmark
individual pages.
Useful toolsLynx: shows how a search engine views
your website pages.Google webmaster tools.
Diagnostics tools identify issues with website development.
top related