Web developers find themselves sooner or later in a dire situation: their scripts become an entangled mess of code. Program logic, presentation logic and in a worst case scenario even layout and design are so interconnected with each other that the further development becomes difficult. Would one have thought ahead and had created a clear structure for the code - the so-called HTML-template-engines, the integrity of the layers would have been preserved.

A HTML-template-engine serves to separate program logic (PHP), from layout, (HTML) and design (CSS). Most existing template-Systems are not limited to HTML-models. They are generally usable for E-Mail and even XML.

Program code can be changed independently of the web site design. All this is theory though. In practice and complex projects this division can not be realized most of the time. To prevent inflating the program code unnecessarily with representation logic, another fourth level is often added. In this layer logical connections are processed, which directly affect the representation. Example: Table line paging or dynamic lists.

A further substantial advantage of HTML templates is the reusability of program code, design and layout. A template can be used in numerous places on a web site. Changes in a template affect all pages where this template is being used. This can save a considerable amount of time and money, because instead of several pages, just the template has to be changed and proofed.

Levels

Program logic
On this level typical script tasks are settled, for example retrieval and conversion of data from the data-base. If the HTML template system is initiated, variable html templates are assigned to the appropriate substitute symbols.

Layout-level
It consists of models, for example of HTML. The model of a specific site can be composed of several templates, which are joined in program logic more directly by the template system. The layout too will partly be determined on this level; for example a table. The design level is also a factor here, since style sheets can affect the layout.

Representation logic
Both levels for layout and representation-logic are often merged, so that representation logic is not completely separate from the layout. The representation logic is often found in HTML templates. It makes sense (representation logic for example also contains HTML), because it is in most cases easy and cost effective. It is not recommendable in principle and especially in complex projects though, because it diffuses the clear separation of levels. The representation logic should have therefore been paged out in separate template files.

Web developers have to make absolutely certain that they don’t write program logic into the level for representation logic. To do this is tempting, because it appears at first to be simpler then to conceptualize the clean separation of both levels. In the long run it pays off with low maintenance to put in the effort.

Design
The design is not directly interconnected with the logic or the template system. It - and partly the layout are essentially detached from all other logic layers and directed through a cascading style sheet.

Beyond that some Template systems offer extensions for form processing, because this area overlaps largely with the representation of Web contents. WYSIWYG programs such as Dreamweaver can be made compatible with template systems by simple extensions. (Author: Rene Schmidt)
Example
The following three files produce a HTML site, in which 20 words with randomly selected letters are shown. Even though this doesn’t make much sense, it demonstrates the function mode of a Template system quite good.

Program-logic (file: index.php):

The music plays within the script.

This simple example is an illustration

For the sake of simplicity, representation logic and layout are united here.

Links:

Complete List of Best SEO-Tools

September 22nd, 2006

What are the best ways to boost your position in search engines? What keywords should you use on your web-pages? And which tools should you use to improve the quality of backlinks, link popularity and Google Pagerank? We deliver answers. Here is the list of the most useful SEO-tools you might be willing to use, developing and optimizing your next web-site. Our personal choice: 156 Seo Tools - one of the most comprehesive lists with essential SEO-references and tools. For even more resources check out the SEO section of The Web-Developer’s Handbook.
Alexa

Backlink

  • Anchor Text Backlink Checker
    This tool is to check your backlinks and the anchor text used in those backlinks.
  • Backlink Analyzer
    Research and analyze websites for link quality. Checks for Indexed Pages, Links to Website, EDU & .GOV Links, Domain Age & Expiration, Google PageRank, Alexa Traffic Rank, DMOZ Listing
  • Backlink Anchor Text Analyzer
    This tools help you determine the backlinks of your website and link text used by your backlinks to Link to your website
  • Backlink Builder
    Building Quality backlinks is one of the most important factors in Search Engine Optimization…

Domain Popularity, Domain Stats Tools…

  • Domain Age Tool
    This tools displays the approximate age of a website on the Internet and allows you to view how the website looked when it first started
  • Domain Dossier
    Investigate domains and IP addresses
  • Domain Popularity
    This tool shows you all backlinks for the given domain, including up to 10 subpages per backlinking domain, host IP and Google PageRank
  • Domain Stats Tool
    This tool helps you get all kind of statistics of your competitor’s domains. The statistics include Alexa Taffic Rank, Age of the domains, Yahoo WebRank, Dmoz listings, count of backlinks and number of pages indexed in Search Engines like Google, Yahoo, Msn etc.
  • HTTP / HTTPS Header Check
    This tools allow you to inspect the HTTP headers that the web server returns when requesting a URL. Works with HTTP and HTTPS URLs
  • View HTTP Headers
    This little tool lets you view the HTTP headers for a HTTP request
  • View HTTP Path
    This little tool lets you view the path/redirects a request takes to get fulfilled

Google Page Rank Checker, Adwords Keyword Tools,Google Banned Tools…

  • Advanced Google searches
    Use this tool to search google in many special ways. A useful resource for search engine optimization (especially keyword research) among other things
  • Check Google Pagerank
    Now you can check the Google PageRank of any web page without installing the Google toolbar
  • Check PageRank by Google data center
    With this tool you can check the PageRank from different data centers
  • Free Google Adsense Keywords & YPN Keywords Search Tool
    With the ability to search a growing database of tens of thousands of high-dollar Adsense keywords, Iotaweb allows publishers to find the keywords and key phrases that will allow them to focus their content to monetize their site most effectively.
  • Google Adwords Keyword Tool
    Keyword tool from Google that provides Specific and Similar keywords.
  • Google Banned Tool
    This tool uses two methods to check to see if a URL you enter is in the Google database. Its a great way to check to see if you have been banned by Google for various reasons….
  • Google Keyword Ranking Tool
    Search with list of keywords from differnet Google search sites
  • Google Page Rank Checker
    Instantly check the PageRank of any website or web page
  • Google Page Rank Checker
    A simple tool that checks and your PageRank so you can display it on your website
  • Google Sets
    Automatically create sets of items from a few examples.
  • Google Synonyms
    Type in a keyword to get Google’s synonyms using the “~keyword -keyword” method.
  • PageRank Authenticity Check
    This tool shows you the PageRank of a given domain. Also the PageRank will be checked of authenticity
  • Page Rank Tool
    Our PageRank Tool will query and return the Google PageRank values for submitted URL from various Google datacenters…
  • Poodle Predictor
    See your site like Google does. Simulate search engines and predict your Google listings
  • Visual PageRank
    The Visual PageRank - Tool shows all links and there corresponding PageRanks

Keyword Analysis Tool, Keyword Density, Keyword Suggestion Tools…

  • McDar Keyword Analysis Tool
    Enter URL and keyword, it will display Pagerank and Back links pages for the Top 10 websites.
  • Keyword Density
    This tool shows you how often appears which word in content of given domain
  • Keyword Density
    The keyword density tool is useful for helping webmasters and SEOs achieve their optimum keyword density for a set of key terms.
  • Keyword Density Checker
    Keyword Density is the percentage of occurrence of your keywords to the text in the rest of your webpage. This tool will crawl the specified URL, extract text as a search engine would, remove common stop words and Analyze the density of the keywords.
  • Keyword Difficulty Tool
    The keyword difficulty tool is used to analyze the competitive landscape of a particular search term or phrase, this tool issues a percentage score and provides a detailed analysis of the top ranking sites at Google and Yahoo…
  • Keyword research service
    Type a keyword or phrase and get the top 10 Keyword Discovery listings
  • KwMap.net
    A Keyword Map For the Whole Internet
  • Keyword Suggestion Tool
    This keyword suggestion tool will help you with the choosing of the right keywords for your website. You can see which keyword combinations are more popular and also get ideas for more keyword combinations..
  • SEO Book Keyword Suggestion Tool
    Free Overture and Google Keyword suggestion tool
  • Website Keyword Suggestions
    This tools tries to determine the theme of your website and provides keyword suggestions along with keyword traffic estimates.
  • Ontology Finder
    Related Keywords Lookup Tool
  • Overture Keyword Tool
    This tool, based on the excellent Overture and Wordtracker keyword search tools, gives similar data, including search figures from the previous month. It also adds statistics for average searches per hour, day, week, projected figures for the next 12 months and then also a figure to see how searches may look in 3 years from now.

Link Popularity Check, Site Link Analyzer, Link Value…

  • Deep Link Ratio Tool
    This tool was created to analyze how the deep link ratio of a site affects its rank in search engines. We can use this tool to compare the DLRs for the best ranking sites for a search phrase.
  • Link Popularity Check
    Link popularity check is one of the best ways to quantifiably and independently measure your website’s online awareness and overall visibility…
  • Link Popularity Checker
    The Link Popularity Checker tells you how many websites are linking to yours…
  • LINK VALIDATION SPIDER
    Free Online Broken Link Checker
  • Link Price Calculator
    This tools will help you determine the approximate amount you should be paying (or charging) per month for a text link (ad) from each and every page of the specified website
  • Link Value
    This tool calculates the link value per month of a given website.
  • Reciprocal Link Check
    This tool helps you ensure that your link partners are linking back to your website. It also determines the anchor text used by your link partners to link to your website.
  • Site Link Analyzer
    This tool will analyze a given web page and return a table of data containing columns of outbound links and their associated anchor text…
  • The Link Reputation Measurement Tool
    Reveals backlinks pointing to your target url along with the following: Link Survey - Link Reputation Score - Text used in links pointing to you - Alexa traffic analysis for the site corresponding to each backlink
  • Outbound Links
    This tool shows every outgoing link from the given domain. Separated in external and internal links

Meta Tag Generators

  • Meta Tag Generator
    Our Meta Tag Generator will read the page you specify, remove common words from it, and pick the most used words on the page. It will then generate a Meta Keywords tag using the words it has found…
  • Meta Tag Generator
    Use this tool to generate a search engine friendly Head Tag for your web site
  • Title & Meta Tags Generator
    his code generator will build the title and meta tags for your site to help improve your website’s search engine ranking using our Meta Tag Generator

Miscellaneous Tools

  • 156 Seo Tools
    One of the most comprehensive lists with useful, essential SEO tools.
  • Directory Submission Manager
    Use this free tool to track your submissions to various web directories….
  • Copyscape
    Search for copies of your page on the Web
  • Crazy Egg
    Get a clear picture of where your visitors are clicking and enhance your site’s results
  • Site Analysis including Link Popularity
    This tool generates a complete site analysis e.g. amount of backlinks, indexed sites, Google PageRank and also if your domain is listed in DMOZ and Yahoo directory
  • Sitemap Generator
    Create your Google Sitemap Online
  • Browser Screen Resolution Checker
    The browser screen resolution checker shows what your web page looks like with the viewer’s monitor set to different screen resolutions
  • Similar Page Checker
    Search Engines are known to penalize websites that contain Duplicate / Similar content. Your content could be similar to other websites on the Internet, or pages from within your own website could be similar to each other. This tool allows you to determine the percentage of similarity between two pages
  • Speedtester
    This tool shows the duration of a given website. This value can be used for showing how long a website take to load and if it is better to optimize the website or change a (slow) ISP.
  • mod_rewrite RewriteRule Generator
    Our mod_rewrite RewriteRule generator will take a dynamic url given to it, and generate the correct syntax to place in a .htaccess file to allow the url to be rewritten in a spiderable format
  • URL Rewrite (mod_rewrite)
    With this tool you can generate dynamic urls to search engine friendly urls..
  • URL Rewriting Tool
    Create Search Engine Friendly URLs
  • User Agent Cloaking Detector
    This tool simulates the Googlebot (based on User-Agent) to detect cloaked content
  • What is Hosted on that IP
    This little tool lets you view the virtual hosts on a particular IP

Search Engine Position Checker, Spider Simulator, Ranking Report, SERP Tracker

  • Dogpile
    Search Comparison Tool
  • Google vs Yahoo Graph
    This tool looks at the results from Yahoo and Google, finds the similarities and then gives you a graphical display of what results are in both search engines
  • Search Engine Position Checker
    The Search Engine Position Checker tool will automatically query the search engines you specify and check if your URL appears in the first 50 results for your chosen keywords….
  • Search Engine Simulator
    This service allows web authors to see what their pages will look like (sort of) to a search engine. This service ignores the META tags that some search engines honor.
  • Search Engine Spider Simulator
    With this tool you see all informations a search engine spider receive from a website.
  • Marketleap Search Engine Verification Tool
    Our verification tool checks to see if your site is in the top three pages of a search engine result for a specific keyword
  • Number of pages indexed
    This tool will generate a report showing how many pages of your website has been indexed by the search engines so far. It supports all major search engines: Google, Yahoo, MSN, Alltheweb, Hotbot and AltaVista.
  • Search Engine Ranking Report
    Input key phrase list get Google rankings
  • Serps Position
    Use this tool to find out, on which position your domain is ranked for the given keyword and compare the first 100 results by Google, search.MSN and Yahoo.
  • SERP Tracker
    The SERP Tracker reports on search engine results and charts performance over time

SEO Analyzer, Scanner

  • Free SEO Tools
    SEOToolSet
  • Cool SEO Tool!
    This internet marketing tool checks the top 10 sites that rank in Google. After that, it checks to see how those 10 sites rank in Yahoo and in MSN….
  • SEO Analyzer
    The SEO Analyzer is a FREE tool that uses a sophisticated algorithm that detects how optimized your web design is for search engines
  • SEO Scanner
    An all-in-one advanced SEO analysis, tracking, and reporting tool

Robots.txt Tools

Color Palettes: Insurance

September 16th, 2006

Last week we’ve started a series of articles called “Color Palettes” - an overview of the dominating colors in modern web design. Observing the web-sites of traveling companies, we’ve found out that they tend to use Blue and Yellow - obviously, these colors stand for Sea and Beach.

Different profile, different companies, different colors. Today we take a closer look at the web-sites developed for insurance companies. Blue and White dominate - typical colours for reliable companies which provide legal and advisory services.

Insurance

3×3 raster More colours in 5×5 raster
Aetna
Screenshot Screenshot
Aflac
Screenshot Screenshot
AIG
Screenshot Screenshot
Allstate
Screenshot Screenshot
American Family Insurance
Screenshot Screenshot
Amica
Screenshot Screenshot
Aviva
Screenshot Screenshot
Axa
Screenshot Screenshot
Churchill
Screenshot Screenshot
CNA
Screenshot Screenshot
direct line
Screenshot Screenshot
ensurance.com
Screenshot Screenshot
Erie Insurance
Screenshot Screenshot
Esurance
Screenshot Screenshot
GEICO
Screenshot Screenshot
Guardian
Screenshot Screenshot
Legal & General Group
Screenshot Screenshot
Nationwide
Screenshot Screenshot
New York Life
Screenshot Screenshot
Norwich Union
Screenshot Screenshot
Pacific Life
Screenshot Screenshot
Progressive
Screenshot Screenshot
ROYAL & SUNALLIANCE
Screenshot Screenshot
Safeco
Screenshot Screenshot
State Farm Insurance
Screenshot Screenshot

Wordpress plugin programmer wanted

September 15th, 2006

103bees.com is seeking skilled programmers to write a Wordpress plugin for their new search engine traffic analytics service. The site’s concept and it’s fresh design get a lot of worldwide attention and enthusiastic Feedbacks from webmasters.

Here’s the opportunity for plugin authors: 103bees.com will promote new plugins to the fast growing number of users, offering instant success including a promotional kick-start. Developers who wish to promote their services or websites to an international audience by writing a Wordpress plugin are given the chance to start a symbiotic partnership with an already successful webservice. If interested, contact them. Features are subject to discussion with the makers of 103bees.com - creative approaches and innovative ideas are welcome.
Screenshot

A list of the most useful web-development-related lists you will ever find out there. Ajax, Social Bookmarking, Cheat Shees, CSS, Google, RSS, Web-Tools, Web 2.0, Wiki, Wordpress. On one single page. A tasty snack for web-developers.

In the era of Web 2.0 everyone is collecting, tagging and presenting bookmarks, images, videos, mp3s and, of course, links. Being focused on the most useful tools for web-developers, we’ve decided to collect something quite different - most useful lists, which include references to the best web-development-related resources. We’ve collected them, sorted them and listed in one single article. A quick overview of the most popular and useful lists for your web-projects. For web-developers and designers.

AJAX

Bookmarklets

Social Bookmarking

Calenders

  • Best Online Calendars
    Systems that allow you to keep track of your calendar online, and/or share your calendar w/ others.

Cheat Sheets

  • Cheat Sheet List
    compilation of cheatsheets for popular apps….over 90 Cheatsheets for web developers.
  • Cheat Sheet Roundup
    Over 30 Cheatsheets for developers, Web Development Cheat Sheets, Databases / SQL Cheat Sheets, Language Cheat Sheets

CMS

CSS

del.icio.us

Digg

Editors

  • List of HTML editors
    Huge List From Wikipedia, the free encyclopedia
  • WYSIWYG Web Editors - The List
    This list of WYSIWYG rich text web editors is being maintained as a general resource for developers who want to add a richer editing experience to web based applications….

Flickr

Google

Photoshop

PHP

  • PHP Related Links
    On these sites you will find tutorials, articles, example scripts, PHP related tools, jobs, web hosting services, etc.

RSS

Software & Tools

Web 2.0

Wiki

  • Wiki software
    Wiki software is a type of collaborative software that runs a Wiki system. This typically allows web pages to be created and edited using a common web browser.
  • List of Wiki-Software
    This is a list of wiki software applications.

WordPress

RSS Feed
News-Feed

Previous Posts