Author Archives: Marco Barnig

WordPress themes and templates

Posted on by

last update : April 3, 2012
A WordPress Theme is a collection of files that work together to produce a graphical interface with an underlying unifying design for a weblog. These files are called template files. Some templates (the header.php and footer.php template files for example) are used on all the web pages, while others are used only under specific conditions.

A simple WordPress web page structure is made up of three basic building blocks: a header, the content, and a footer. The main template file is index.php, it’s function is to call other template files and to gather information from the database (posts, pages, categories, etc.) with the WordPress Loop. Most WordPress pages contain one or more sidebars (sidebar.php) that contains navigation features and more information about the website.

The Theme’s style sheet determines the look and placement of the header, footer, sidebar, and content in the user’s browser screen.

WordPress features two core page views: the single post view is used when the web pages displays a single post. The multi-post view lists multiple posts or post summaries, and applies to category archives, date archives, author archives, and (usually) the “normal” view of the blog’s home page. WordPress uses a template hierarchy to select the right template file to display a certain type of page. Template files include the use of XHTML tags and CSS references. HTML elements and CSS references can cross template files, beginning in one and ending in another. Tracking down where an HTML element begins and ends can get complicated if a Theme is designed or modified.

A very simple, but fully functional loop page (index.php) is shown below:

<?php
get_header();
if (have_posts()) :
   while (have_posts()) :
      the_post();
      the_content();
   endwhile;
endif;
get_sidebar();
get_footer();
?>

Template tags are used within the blog to display information dynamically or to customize the blog. It provides the tools to make the blog individual and interesting. The template tags are segmented as follows :

  • include tags
  • blog info tags
  • lists & dropdown tags
  • login/logout tags
  • post tags
  • comment tags
  • date and time tags
  • category tags
  • author tags
  • tag tags
  • edit link tags
  • permalink tags (a URL at which a resource or article will be permanently stored)
  • links manager tags
  • trackback tags
  • general tags
  • geo tags

The the_content() template tag displays the content of the post. The post meta data is the “administrative” information provided to viewers about each post. An archive is a collection of historical posts. In the default usage, the posts displayed on the main index are recent chronological postings. By default, the archive will use index.php, and thus look the same as the front page. A special archive.php file can be used to visually disambiguate archives from the front page. The same is true for category views. It is even possible to create separate category template files for each category.

To cut down the size of a page,  excerpts (a condensed description of a blog post) rather than the entire content of a post or the <!–more–> tag can be used. With the static front page it’s possible to display something special only on the front page of the blog. The list of the typical WordPress pages are listed herafter :

  • home page
  • single post
  • page
  • category
  • tage
  • author
  • date
  • search result
  • 404 (not found)
  • attachment

To style a blog for print, it’s best to use a print.css sytle sheet file. To integrate code in a wordpress page, refer to the following guidelines. Here is a checklist to verify the proper setup of a new theme. Informations about WordPress widgets are available at the widgets website.

The WordPress default theme based on Kubrick contains two stylesheets. The file rtl.css is called when you are using a language localization that reads from right to left (e.g., Arabic or Hebrew). The file style.css is separated in segments:

  • Typography & Colors
  • Structure
  • Headers
  • Images
  • Lists
  • Form Elements
  • Comments
  • Sidebar
  • Calendar
  • Various Tags & Classes
  • Captions

The most recent default Worpdpress theme is Twenty Eleven, version 1.3.

HTML Character Entity References

Posted on by

Character Entities References are the way you put special letters, numbers and symbols on the web page. A character entity reference consists of an ampersand (&), followed by a pound sign (#), the number of the character entity, and finishing with a semi-colon (;). Alternately, for some characters you can put ampersand, the name of the character (but no # sign), followed by a semi-colon.

The following table shows some popular symbols :

34 quot “ quotation mark = APL quote
38 amp & ampersand
60 lt < less-than sign
62 gt > greater-than sign
160 nbsp no-break space = non-breaking space
169 copy © copyright sign
174 reg ® registered sign = registered trade mark sign
8226 bull • bullet = black small circle
bullet is NOT the same as bullet operator

Character entities or extended characters for WordPress are explained on the codex.wordpress.org website.

Personal Health Management

Posted on by

Today’s healthcare system is complicated and cumbersome. Health information stored mainly on paper is scattered and disconnected. A patient may have health records with several doctors and hospitals. Medication and prescription history may be spread across several different pharmacies. Self-care information, such as diet and exercise routines, may be unavailable. And any changes or updates to these records may never reach the treating provider.

Both Google and Microsoft provide a security-enhanced and flexible solution to this challenge : Put consumers in control of their health information, store it in a central location, and make it easy to share and update.

Google Health allows you to store and manage all of your health information on the Google servers. And it’s completely free. All you need to get started is a Google username and password. Google believes that you own your medical records and should have easy access to them. With Google Health, you manage your health information, and you can access it anywhere, at any time.

The features of Google Health are :

  • Build online health profiles : (health conditions, medications, allergies, and lab results)
  • Import medical records from hospitals and pharmacies : (accurate history of your medical conditions, medications, and test results)
  • Share your health records : (with family members, friends and doctors)
  • Explore online health services : (manage your health needs)

Google stores your information securely and privately, but you always control how it’s used.

Microsoft’s HealthVault offers you a way to store health information from many sources in one location, so that it’s always organized and available to you online. HealthVault is working with doctors, hospitals, employers, pharmacies, insurance providers and manufacturers of health devices – blood pressure monitors, heart rate monitors and more – to make it easy for you to add information electronically to your HealthVault record. With a more complete picture of your family’s health, you can work with your healthcare professionals, and with all the Web sites that connect with HealthVault, to make more informed decisions.

Microsoft HealthVault provides not only a personal solution, but also an ecosystem for industries ( hospitals, laboratories, employrs, healthcare associations, doctors, pharmacies, medical device manufacturers, …).

OpenID

Posted on by

OpenID eliminates the need for multiple usernames across different websites, simplifying your online experience. A user can choose the OpenID Provider that best meets his needs and that he trust. The user can keep his OpenID no matter which Provider he moves to. The OpenID technology is not proprietary and is completely free.
OpenID is growing quickly and becoming more popular as large organizations like AOL, Facebook, France Telecom, Google, LiveDoor, Microsoft, Mixi, MySpace, Novell, Sun, Telecom Italia, Yahoo!, etc. begin to accept and/or provide OpenIDs. Today, it is estimated that there are over one billion OpenID enabled user accounts with over 40,000 websites supporting OpenID for sign in.
OpenID was created in the summer of 2005 by an open source community (the father of OpenID is Brad Fitzpatrick) trying to solve a problem that was not easily solved by other existing identity technologies. As such, OpenID is not owned by anyone, nor should it be. Today, anyone can choose to be an OpenID user or an OpenID Provider for free without having to register or be approved by any organization.
The OpenID Foundation was formed to assist the open source model by providing a legal entity to be the steward for the community by providing needed infrastructure and generally helping to promote and support expanded adoption of OpenID.

Two directories are available to see where OpenID can be used to login :

Firebug

Posted on by

Firebug

Firebug (version 1.3.3), developped by Joe Hewitt and Rob Campbell, is a free and open source (BSD) debug tool. It integrates with Firefox to put a wealth of tools at the fingertips of web designers. The tool allows to edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

Firebug makes it simple to find HTML elements buried deep in the page. Firebug’s CSS tabs tell you everything you need to know about the styles in your web pages, and if you don’t like what it’s telling you, you can make changes and see them take effect instantly. When your CSS boxes aren’t lining up correctly it can be difficult to understand why. Let Firebug be your eyes and it will measure and illustrate all the offsets, margins, borders, padding, and sizes for you. Your pages are taking a long time to load, but why? (JavaScript, image compression, partner’s servers). Firebug breaks it all down for you file-by-file. When things go wrong, Firebug lets you know immediately and gives you detailed and useful information about errors in JavaScript, CSS, and XML. The Document Object Model is a great big hierarchy of objects and functions just waiting to be tickled by JavaScript. Firebug helps you find DOM objects quickly and then edit them on the fly. The command line is one of the oldest tools in the programming toolbox. Firebug gives you a good ol’ fashioned command line for JavaScript complete with very modern amenities. Having a fancy JavaScript debugger is great, but sometimes the fastest way to find bugs is just to dump as much information to the console as you can. Firebug gives you a set of powerful logging functions that help you get answers fast.

Facebook FB.Connect.showFeedDialog

Posted on by

FB.Connect.showFeedDialog is a very powerful method which pops up a Feed form, without the need of a session, and an iframe pops up letting the user confirm publication of a story.

The required parameters are:

  • template_bundle_id  string
    The id of the feed template you want to use
  • template_data  object
    Data associated with the template (for short and full stories)
  • target_id array
    If you are publishing to other people’s Feeds, this array contains that friend’s user ID. The Feed story template must include the {*target*} token
  • body_general string
    Associated text for short and full stories
  • story_size FeedStorySize
    This parameter has been deprecated. Pass null in its place
  • require_connect RequireConnect
    Either FB.RequireConnect.doNotRequire, FB.RequireConnect.require, or FB.RequireConnect.promptConnect – The action to occur if the user has not authorized this application
  • callback Callback
    Callback to be executed after function is completed

The optional parameters are :

  • user_message_prompt string
    The label (which could be in the form of a question) that appears above the text box on the Feed form
  • user_message object
    A simple JavaScript object containing single property, value, which is set to the content that the user enters into the Feed form. When the Feed form is created, you can pass along this object to populate suggested text in the text box. The user can then edit this text. When the user publishes the Feed form, Facebook sets the value property to whatever text the user typed

Some tutorials about the FB.Connect.showFeedDialog method are shown hereafter :

Development of facebook applications

Posted on by

The Facebook guide Creating a Platform Application shows how to configure the settings and integration points for a Facebook Platform application and how to configure a host server. Demo applications are also available on the Facebook development website. The Anatomy of a Facebook Application is useful to get an idea how to integrate an application into the Facebook experience. If you plan on internationalizing your application, you should use English as the native language, as the Translations tool can translate from English only. Platform guidelines,  terms of service (Statement of Rights and Responsibilities) and Facebook Platform Policy and Escalation Procedures are accessible on the same website. The following guide explains how applications are authorized, the Developers blog runs all major Facebook announcements.

The following url gives access to the personal facebook developer webpage :

The developer API key is linked to the domain name.

Integration of an application in Facebook can take many forms :

  • The Application Directory allows users to find an application
  • The About page tells users about an application
  • The Canvas page is the main page of the application (FBML or an iframe
  • The Facebook profile is the online representation of a user’s real world identity
  • The profile box is usually the place to show the most recently updated information or the most recent actions of the user
  • The Applications menu is where users go to access your applications
  • Bookmarks appear on every user’s home page as well as on the Applications menu
  • Application tabs let users feature full canvas-like pages for applications they enjoy the most
  • The Boxes tab contains application profile boxes
  • The Info tab on the profile allows users to express their interests in a more structured way than before
  • Applications can integrate into the Publisher so users can create or find rich content and post it directly into their own or their friends’ Walls
  • Feed forms are special FBML components that allow applications to publish Feed stories on the behalf of users. Your application can publish directly into the user’s and the user’s friends’ Mini-Feeds
  • Users can set their privacy options from your application’s privacy/settings page
  • Applications can access News Feed and post stories to it
  • Applications can send notifications to a user through email
  • Requests are also sent in the form of notifications and displayed on the right top corner of the homepage
  • Dashboards allow users to manage their own content in an application

Ten succesfully integrations of Facebook Connect into websites are presented by Aziz Haddad (in french).

Redirection of a webpage

Posted on by

To avoid “404 File Not Found” Error!’s after deleting webpages in the context of a website update, it’s often useful to redirect these webpages to a new url. There are at least 2 major different forms of web page redirection : Client-side Redirection & Server-side Redirection.

Stay away from Client-side Redirection. These methods of redirecting a webpage range from using html meta tags, to javascript, and even using flash embedded on a page to redirect. All of these methods are notorious for getting you de-indexed from search engines, or at the very least, you’re page getting automatically penalized from search engines.

The best and safest way to this is the “301 Redirect“. The following tutorials describe the “301 Redirect” method :

There are different ways to set up an “301 Redirect“. Using .htaccess to accomplish the 301 redirect is highly suggested due to it being fairly convenient to manage, rather than setting redirects on each individual page, you can simply add the redirect code to the .htaccess file. An Online .htaccess editor to configure the redirection is offered by Hideyo Ryoken & Masato Mannen.

A php sample code to redirect an individual page permanently to a new location is shown hereafter :

  1. <?
  2. header( “HTTP/1.1 301 Moved Permanently” );
  3. header( “Status: 301 Moved Permanently” );
  4. header( “Location: http://www.new-url.com/” );
  5. exit(0); // This is Optional but suggested, to avoid any accidental output
  6. ?>

If the redirection is only temporary, you should use the “302 redirect” method. A php sample code to redirect an individual page temporary to a new location is shown below :

  1. <?php
  2. header(”Location: http://www.NewTemporaryWebAddress.com”);
  3. exit();
  4. ?>

Web cache

Posted on by

last update : August 16th, 2011
A Web cache sits between one or more Web servers (also known as origin servers) and a client or many clients, and watches requests come by, saving copies of the responses — like HTML pages, images and files (collectively known as representations) — for itself. Then, if there is another request for the same URL, it can use the response that it has, instead of asking the origin server for it again.

Web caches are used to reduce latency and to reduce network traffic. A very useful tutorial about web caches has been published by Mark Nottingham under a creative common licence.

An appreciated tutorial about wordpress caching has been posted by Kyle Robinson Young in Web Development Tutorials.

A cached representation is considered fresh  if it has an expiry time or other age-controlling header set and is still within the fresh period, or if the cache has seen the representation recently, and it was modified relatively long ago. Fresh representations are served directly from the cache, without checking with the origin server.

HTTP headers are sent by the server before the HTML, and are only seen by the browser and by any intermediate caches. Typical HTTP 1.1 response headers might look like this:

HTTP/1.1 200 OK
Date: Fri, 30 Oct 1998 13:19:41 GMT
Server: Apache/1.3.3 (Unix)
Cache-Control: max-age=3600, must-revalidate
Expires: Fri, 30 Oct 1998 14:19:41 GMT
Last-Modified: Mon, 29 Jun 1998 02:28:12 GMT
ETag: "3e86-410-3596fbbc"
Content-Length: 1040
Content-Type: text/html

The Expires HTTP header is a basic means of controlling caches; it tells all caches how long the associated representation is fresh for. After that time, caches will always check back with the origin server to see if a document is changed. Expires headers are supported by practically every cache. One problem with Expires is that it’s easy to forget that you’ve set some content to expire at a particular time. If you don’t update an Expires time before it passes, each and every request will go back to your Web server, increasing load and latency.

HTTP 1.1 introduced a new class of headers, Cache-Control response headers, to give Web publishers more control over their content, and to address the limitations of Expires. The most important response is max-age=[seconds]. It specifies the maximum amount of time that an representation will be considered fresh. This directive is relative to the time of the request, rather than absolute. [seconds] is the number of seconds from the time of the request you wish the representation to be fresh for.

A tool (REDbot) to check Cache Control and HTTP headers has been made available by Mark Nottingham; a public instance is available at rebdbot.org.