RSS, HTML, iPhone page, Web and Apple Widget

The Web Designers Tool Kit

Resources     Trackback

(24 votes, average: 4.92 out of 5)

 Loading ...

Welcome to Quackit Tutorials!

Quackit teaches beginners how to create websites. We start off slowly, teaching you how to create your first website. We then introduce you to more advanced topics so that, once you've mastered the basics, you can become an expert! Key areas are:

Tutorials

• Create a Website - Need to create and host a website fast? Start here.
• HTML Tutorial - Learn how to build tables, forms, fonts, color, images, hyperlinks and more
• CSS Tutorial - Learn about Cascading Style Sheets and how they compliment HTML to make your life much easier.
• SQL Tutorial - Covers the SQL (Structure Query Language) syntax and its various SQL commands - everything you need to know to get started in database programming.
• JavaScript Tutorial - Learn how to add functionality and interactivity to your web pages.
• PHP Tutorial - PHP is a server-side scripting language that enables you develop dynamic websites quickly. This PHP Tutorial demonstrates just how easy it is to create dynamic websites using PHP.
• VBScript Tutorial - VBScript is commonly used on the server-side with ASP pages, but can also used client-side. This tutorial teaches you VBScript from the ground up - starting with the basics.
• ColdFusion Tutorial - ColdFusion is a popular server-side environment used to build more advanced, dynamic, database driven websites.
• AJAX Tutorial - See how AJAX and ColdFusion can work together to improve usability on web forms. AJAX is also referred to as Remote Scripting.
• Web Hosting Tutorial - Learn how to select a web site hosting provider and what to expect after you sign up with a hosting provider.

References

• HTML Tags - Complete list of HTML tags (or "elements")
• CSS Properties - Complete list of CSS properties
• JavaScript - Client side scripting language that helps make your web pages more functional.

Featured:

Quackit Forums

NEW! Quackit now has its own forums. Check it out, sign up, and help build the Quackit community!

Web Hosting

Learn about web site hosting and how to select a hosting provider for your website. Also includes introduction to domain names.

PHP Tutorial

Learn how to program a website using PHP.

SQL Tutorial

Learn how to program a database using SQL - the standard language for querying databases.

HTML Cheat Sheet

Use this HTML cheat sheet to quickly create HTML tables, forms, fonts, color, image maps, hyperlinks and more.

MySpace Music Generator

Add MySpace music to your web page using this MySpace code generator.

HTML Table Generator

Create HTML tables with this free HTML table generator.

HTML Help

HTML help with tables, forms, fonts, color, image maps, hyperlinks and more.

A complete guide to designing web sites that work

Ben Hunt has been a successful web designer and developer for over 10 years. He publishes this site to share his experience in making web sites that are appealing, easy to use, and successful.

 

Web Design from Scratch is for everyone involved or interested in creating web sites - whether novice or expert. It will help you understand what makes web sites succeed or fail, and what can be done to increase the chance of success.

You don't have to be a web designer to benefit from this site. You may have a current web site design project, you may be updating an existing site, or just interested in learning new skills.

Web design and development is a huge area that grows and changes every day. While it's impossible to document everything there is to know, this site aims to help you understand the principles of creating great sites and to teach you some of the most important skills needed to do it successfully and repeatedly.

Web Design from Scratch is provided totally free-of-charge. If you would like to show your support by making a donation, you're most welcome.

Introduction

Various people have, over the last few years, done studies into the popularity of authoring techniques. For example, looking at what HTML ids and classes are most common, and at how many sites validate (and yes, we know that we're not leading the way in terms of validation).

John Allsopp's study is the most recent one we're aware of, where he looked at class and id attribute values on 1315 sites. Before that, Marko Karppinen did a study in 2002, looking at which of the then 141 W3C members had sites that validated; in 2003 Evan Goer did a study into 119 Alpha Geeks' use of XHTML; and of course in 2004 François Briatte did a study covering trends of Web site design on 10 high-profile blogs. In addition, in the last year, microformats.org contributors have done a lot of research into the use of class and rel attributes, amongst other things, in their pursuit of bite-sized reusable semantics. We are also aware of some studies being done by for the Mozilla project, covering thousands of pages.

We can now add to this data. In December 2005 we did an analysis of a sample of slightly over a billion documents, extracting information about popular class names, elements, attributes, and related metadata. The results we found are available below. We hope this is of use!

Methodology

The parser looked only at documents whose HTTP headers including a Content-Type header with a value that started with the nine characters text/html.

The parser we used was really just a tokeniser. It just extracted tags, ignoring comments; it didn't look at character data between tags, nor at DOCTYPEs, PIs, or character entities, but it did support skipping the contents of script and style CDATA blocks (though it did not attempt to execute the script blocks). The tokeniser was actually a prototype we made to test the HTML parsing rules described in the WHATWG's HTML5 spec.

Results

Note: You will need a browser with SVG and CSS support to view the result graphs correctly. We recommend Firefox 1.5.

Our analysis in December 2005 covered various topics:

• Pages and elements
• Elements and attributes
• Classes (class="")
• HTTP headers
• Page headers: The <html>, <head>, and <title> elements
• Metadata: The <meta> element
• The body element
• Text elements
• Table elements
• Link relationships (<link rel/rev>, <a rel/rev>)
• The a element
• The img element
• Scripting: The <script> element
• Editors and their custom markup

Future study

We will probably perform other surveys in the future, to look for data that we didn't capture this time. For example, while we collected data to compare to John Allsopp's class frequencies, we did not collect data on popular ID attribute values. If you can think of anything worth examining in particular, please let us know.

Does My Web Site Suck? Introduction

148 Mortal Sins, 82 Possible Mortal Sins and 2 Ultimate Web Design Checklists

Intro | Checklist 1 | Checklist 2 | What do I do now?

For the politically correct version of this article, please read "Is My Web Site Ineffective" (external site)

"Does my web site suck?"

Of all the e-mail questions I receive, this one amazes me the most. Perhaps my amazement is because I'm a left-brain kind of guy. When I look in the mirror I see a balding, overweight, post-middle-age, white guy. I don't look in the mirror and see Tom Cruise — I'm a lot taller.

I answered these e-mails by pointing people to the FAQ where it states, "Due to the number of requests I receive and the limited amount of time I have, it's impossible to critique people's sites."

I didn't like my answer so I came up with a solution: I'll give you the tools to do the job yourself. Just compare your site against two easy-to-use checklists and find out if your site sucks.

Confession is good for the soul

Father Flanders can't forgive your web design mortal sins, unless you confess—and confession has never been easier. All you had to do was click a box if your site committed that particular sin. I've tallied up the clicks and here are the results of what has been clicked so far.

What was left out

I'm sure there are some gaps I need to fill in and there may be some elements I've missed. E-mail me with the fatal and not-so-fatal design flaws you think I've missed.

Disclaimer

Some links on this website lead to information provided by external services not under my control, therefore I am not responsible for the content or accuracy of the linked information.

All code examples are not guaranteed 100% free from bugs and/or mistakes. Use them at your own risk. I do not take any blame should a problem occur relating to use of code on this site given as an example for your own use. Such code has been tested and found to work for me, but I cannot vouch for other computer systems (existing now, or in the future) which it may be used on, or changes you introduce yourself based on my code.

This website is © 2006 Christopher Hester, except where separate authors are named. No part of this website may be reproduced or re-used in any way without my prior permission, except content added from separate authors (who retain the copyright on their material), examples of code, and any other content I explicity state is free to copy and make use of.

This page was last updated on 11 January 2007.

Xhtml Friends Network

XFN™ (XHTML Friends Network) is a simple way to represent human relationships using hyperlinks. In recent years, blogs and blogrolls have become the fastest growing area of the Web. XFN enables web authors to indicate their relationship(s) to the people in their blogrolls simply by adding a 'rel' attribute to their <a href> tags, e.g.:

Welcome to www.robotstxt.org, the new home of The Web Robots Pages.

This is the main source for information on the robots.txt Robots Exclusion Standard and other articles about writing well-behaved Web robots.

Yahoo! User Interface Library

The Yahoo! User Interface (YUI) Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX. The YUI Library also includes several core CSS resources. All components in the YUI Library have been released as open source under a BSD license and are free for all uses.

Download the entire library, API documentation, and functional examples from Sourceforge.

The library's developers blog at the YUI Blog and the YUI Library community exchanges ideas at YDN-JavaScript on Yahoo! Groups.

ZK is an open-source
Ajax Web framework that enables rich user interface for Web applications with no JavaScript and little programming.

With a markup language
and scripting in Java,
designing becomes as simple as
authoring HTML.

With event-driven, server centric
and feature-rich components,
developing becomes as simple as
programming desktops.

Welcome to the Propel Website! ¶

This is the website of the Propel PHP project. Propel is an Object Relational Mapping (ORM) framework for PHP5. It allows you to access your database using a set of objects, providing a simple API for storing and retrieving data.

Propel allows you, the web application developer, to work with databases in the same way you work with other classes and objects in PHP.

• You don't have to worry about database connections or writing SQL -- unless you want to.
• You never have to worry about escaping data or type-casting results (and here we just assume you don't want to).
• You define your database in a simple XML format -- whether you're using MySQL, PostgreSQL, MS SQL Server, etc. -- and Propel will create database initialization files for your database and will generate static classes and objects that provide an OO interface to your database.
• You can also point Propel at an existing database and it will create the XML datamodel for you.
• Propel can also generate other useful data based on the XML datamodel -- for example, GraphViz dot files for generating ERD diagrams.
• Because Propel uses code generation, you don't need to define your database structure to your PHP script at runtime. All the generated classes know about the structure of your database and so there's no performance lost to initialization or to on-the-fly database metadata queries.

Here's an example code snippet that gets a book from the database, changes the book's title, and then saves it again:

<?php
$book = BookPeer::retrieveByPK(5);
$book->setTitle('The Propel Story');
$book->save();

Most web application database tasks are really simple -- and with Propel they'll actually feel as simple as they are. Finally, extensibility is at the heart of Propel's design; we expect you to want to change and customize things.

Read Why Propel? to learn more about how Propel can make life easier -- or see the Documentation if you're ready to get started using Propel.

What is Atom?

Atom is the name of an XML-based Web content and metadata syndication format, and an application-level protocol for publishing and editing Web resources belonging to periodically updated websites.

All Atom feeds must be well-formed XML documents, and are identified with the application/atom+xml media type.

Regular Expressions Tutorial

Creating a dynamic Google sitemap using the PHP5 SimpleXML extension

Author: Gregory Boshoff

Topic: PHP

Posted on: 20th May 2006

Audience level: Intermediate

This tutorial demonstates the PHP5 SimpleXML extension by using it to update a Google sitemap dynamically. It assumes that you have a basic understanding of PHP and are familiar with XML.

PHP5's SimpleXML extension

Previous versions of PHP lacked easy to use native XML parsing functions. The SimpleXML extension which is enabled by default as of PHP5 goes some way toward addressing this short coming.

SimpleXML is designed to easy the use of working with simple XML structures. SimpleXML represents a XML file as a native PHP object and this makes it a good deal easier to work with than either DOM or SAX. SimpleXML works by parsing XML into a tree like structure in which each XML tag is an object property whose contents are accessible. Using SimpleXML you can read, write or iterate over a XML file and access it's elements and attributes.

However, with the PHP SimpleXML extension you can do more than carry out basic manipulations of a XML files elements or attributes. PHP5 also has a mechanism to convert XML nodes between SimpleXML and the more powerful PHP5 DOM extension via the simplexml_import_dom function, which extracts a SimpleXMLElement object from a node of a DOM document.

Google sitemaps

Whilst there are free online sitemap generator tools available on the Internet that allow you to create an XML sitemap which can be submitted to Google sitemaps. The majority of these tools work by attempting to spider a entire website and this tends not to be very accurate.

In order to better demonstrate the SimpleXML extension to you, we will do something useful and create a PHP function that will parse and prepend new entries dynamicly to a web sites Google sitemap.

Site maps as I'm sure the majority of you will already know help to avoid search engine indexing problems by letting search engine spiders know what URLs are available on your site and how often they change.

A Google XML site map is made up of URL elements which acts as a container for the following four child elements.

1. [loc] - The site map entries URL location.
2. [priority] - Priority - The web pages priority in a scale of 0.0 to 1.0 the highest value being 1.0
3. [lastmod] - The date the web page was last modified in ISO 8601 format.
4. [changefreq] - The frequence that the web page is updated (always, daily, weekly, monthly, yearly, never).

Hence a single sitemap entry for this web sites home page would look something like this.

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.google.com/schemas/sitemap/0.84" 
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
xsi:schemaLocation="http://www.google.com/schemas/sitemap/0.84
http://www.google.com/schemas/sitemap/0.84/sitemap.xsd">
 <url>
  <loc>http://www.phpfive.net/</loc>
  <priority>1.0</priority>
  <lastmod>2006-05-14</lastmod>
  <changefreq>daily</changefreq>
 </url>
</urlset>

Each time you wish to add a new web page for indexing with Google this file must first be amended. Naturally on a large dynamic web site this is not a task that one would wish to undertake manually. The function below automates this task and should be called when ever you insert a item that you wish to be indexed into your web sites database.

<?php

 /**
 * Add elements to Google sitemaps.
*
* SimpleXMLElement addChild method requires PHP > 5.1.3
 * If you are using a version of PHP earlier than this use you will need to the DOM extention instead.
 * File permissions: Your sitemaps xml file must be writable.
 */
 
 function prepend_sitemap($url='', $sitemap_file='sitemap.xml', $priority='0.5', $changefreq='weekly')
{

    // Loads an XML file into an object
    $go = simplexml_load_file($sitemap_file);
    
        // We are now able to manipulate the object ($go) and add a new url child element to it.
        $sitemap = $go->addChild('url');

        // Now we create are four child elements.
        $sitemap->addChild('loc', $url);
        $sitemap->addChild('priority', $priority);

        $sitemap->addChild('lastmod', date("Y-m-d"));
        $sitemap->addChild('changefreq', $changefreq);

    /*
        You may also add attributes to XML files.  

        For example:
        $sitemap->addAttribute('total', '1.40');
        
        Would add a total attribute with a value of 1.40  to the url element.
        <url total="1.40">
    */
        
    // Return a well-formed XML string
    $xml = $go->asXML();

    
    // Write our string variable $xml back to the sitemap.xml file.
    file_put_contents($sitemap_file, $xml);
    
    // Destroy variable $xml
    unset($xml);

 return true;

} // end fun


// Example function call
prepend_sitemap('http://www.phpfive.com/article_5.php', 'sitemap.xml', '0.5', 'monthly');

?>

If we where to run the script above the resulting modified sitemap.xml file would look something like this:

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.google.com/schemas/sitemap/0.84" 
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
xsi:schemaLocation="http://www.google.com/schemas/sitemap/0.84
http://www.google.com/schemas/sitemap/0.84/sitemap.xsd">
 <url>
  <loc>http://www.phpfive.com/article_5.php</loc>
  <changefreq>daily</changefreq>
  <priority>0.5</priority>
  <lastmod>2006-05-14</lastmod>
  <changefreq>monthly</changefreq>
 </url>
</urlset>

Rewriting Subdomains

For this case, we want to rewrite foo.domain.com to www.domain.com/app.php?subdomain=foo.

First of all you need to setup a wildcard for DNS, so that anything.domain.com will be sent to your web server's IP address. If you're using Bind 9 or later, you can do it by changing the zone file (such as /etc/named/pri/domain.com.zone):

$TTL 48h
@       IN      SOA     dns1.domain.com. username.domain.com.  (
                                      2002081601 ; Serial
                                      7200       ; Refresh
                                      7200       ; Retry
                                      604800     ; Expire - 1 week
                                      3600 )    ; Minimum

@               IN      NS      dns1.domain.com.
@               IN      NS      dns2.domain.com.
www.domain.com.  IN      A       x.x.x.x
green.domain.com.        IN      A       x.x.x.x
*.domain.com.     IN      CNAME   domain.com.

where x.x.x.x refers to your server's IP address. Make sure you have all valid subdomains (green.domain.com.) declared above the wildcard declaration (*.domain.com.).

The next thing you need to do is configure Apache to answer for all subdomains requested, ie - anything.domain.com

<VirtualHost *:80>
ServerName green.domain.com
DocumentRoot /var/www/green.domain.com/htdocs
IndexOptions FancyIndexing
</VirtualHost>

### Since this is the catchall wildcard domain, we have to put it at the very end of all
### the other valid sub domains, like green.domain.com above
<VirtualHost *:80>
ServerName domain.com
ServerAlias www.domain.com
DocumentRoot /var/www/domain.com/htdocs
IndexOptions FancyIndexing
ServerAlias *.domain.com #wildcard catchall
RewriteLog "/var/log/apache2/rewrite_log"
RewriteLogLevel 9
</VirtualHost>

To be sure everything works, try accessing foo.domain.com in your browser, and you should get your regular site that comes up for www.domain.com. If you are having problems, it's always good to check the apache error logs.

Now comes the fun part, using mod_rewrite rules to change foo.domain.com to www.domain.com/app.php?subdomain=foo!

Make sure you have enabled mod_rewrite (http://httpd.apache.org/docs-2.0/mod/mod_rewrite.html) in Apache 2.0.

For purposes of illustration, we will use a .htaccess file to hold the rules, however, this will slow your server down, and it is recommended if you have root access on the server, to put them directly into the apache configuration file, typically httpd.conf to speed things up.

Here's what you need in your .htaccess file, typically inside your htdocs directory on the web server:

Options +FollowSymlinks

RewriteEngine On

RewriteCond %{HTTP_HOST} ^[^\.w{3}]+\.domain.com$
RewriteRule ^(.*) %{HTTP_HOST}$1 [C]
RewriteRule ^([^\.w{3}]+)\.domain\.com(.*) http://www.domain.com/app.php?sub=$1 [R=301,L]

Another example of rewriting subdomains would be if you want to keep the user at the foo.domain.com subdomain, instead of redirecting them to www.domain.com.

RewriteEngine On

RewriteCond %{HTTP_HOST} ^[^\.w{3}]+\.domain.com$
RewriteRule ^$ %{HTTP_HOST} [C]
RewriteRule ^([^\.w{3}]+)\.domain\.com$ http://$1.domain.com/app.php?subdomain=$1 [R=301,L]

This way, if someone accesses foo.domain.com they get redirected to foo.domain.com/app.php?subdomain=foo. It is technically redirecting them to www.domain.com/app.php?subdomain=foo, but because of the wildcards in DNS and Apache, they will stay at the foo subdomain.

Remember, if you're having problems check the log files, enable mod_rewrite log writing for your domain in the VirtualHost declaration as is above (or in the .htaccess file):

RewriteLog "/var/log/apache2/rewrite_log"
RewriteLogLevel 9

Note: do NOT leave this log file inplace when you go live, it again will slow down your server when bombarded with traffic. Only use for debugging purposes. More info about RewriteLog (http://httpd.apache.org/docs-2.0/mod/mod_rewrite.html).

See the mod_rewrite guide (http://httpd.apache.org/docs-2.0/misc/rewriteguide.html) for more info on rules.

24 ways

Edit-in-Place with Ajax by Drew McLellan

Back on day one we looked at using the Prototype library to take all the hard work out of making a simple Ajax call. While that was fun and all, it didn’t go that far towards implementing something really practical. We dipped our toes in, but haven’t learned to swim yet.

So here is swimming lesson number one. Anyone who’s used Flickr to publish their photos will be familiar with the edit-in-place system used for quickly amending titles and descriptions on photographs. Hovering over an item turns its background yellow to indicate it is editable. A simple click loads the text into an edit box, right there on the page.

PHP Script Tips - Understanding and Using Sessions

By: FYICenter.com

Part:   1   2  3  4  5 

A collection of 19 tips on understanding and using sessions in PHP. Clear explanations and tutorial exercises are provided on starting and closing sessions, saving and retrieving values in sessions, deciding how session IDs to be transferred, deciding where to store session files, deciding when to expire session values, etc. Topics included in this collections:

1. What Is a Session?
2. How To Turn On the Session Support?
3. How To Save Values to the Current Session?
4. How To Retrieve Values from the Current Session?
5. What Is a Session ID?
6. How To Retrieve the Session ID of the Current Session?
7. What Are the Options to Transfer Session IDs?
8. How Session IDs Are Transferred on Your Web Server?
9. How To Force the PHP Engine to Use Cookies to Transfer Session IDs?
10. Is It More Secure to Use Cookies to Transfer Session IDs?
11. Where Are the Session Values Stored?
12. What Is the Timeout Period on Session Values?
13. How To Test the Session Garbage Collection Process?
14. How To Set session.gc_maxlifetime Properly?
15. How To Set session.gc_divisor Properly?
16. How To Remove Values Saved in the Current Session?
17. How To Tell If a Session Is New?
18. How To Close a Session Properly?
19. What Is session_register()?

PHP and XML Sitting in a Tree

Got something to say?

Share your comments on this topic with other web professionals

In: Articles

By Kerri Hicks

Published on February 4, 2007

There are scores of ways to store, work with, and retrieve data on the web. Simple databases, relational databases, XML, even custom flat files can hold our product catalogs, user information, and other repositories of important stuff that we want to share with the world. There are some logical ways to work with different kinds of data—for example, many people who use MySQL databases for storage will write PHP scripts to hook into their data, because of PHP’s native support for MySQL. On the other hand, XML purists often use XSLT (which is itself also XML) to work with their marked-up files. As web developers, it often comes down to us to make the decisions about how to store new data, and even more importantly, how to work with data that our clients give to us.

Now that PHP is showing XML some real love, it makes perfect sense to use the two together when the time is right.

XML continues to gain popularity as a data format on the web, while databases such as MySQL are consistently improving and have an ever-growing user base. Both XML and MySQL allow you to represent your data with key/value pairs—for example, say you want to express the fact that the title of your favorite album is I Like Cows. The XML expression <title>I Like Cows</title> can be used the same way as the MySQL command INSERT into tablename (title) VALUES ('I Like Cows') ; . Both constructs allow you to store as data the fact that I Like Cows is a title.

XML offers you a document tree to help lend structure to your data, XSLT to munge the data into submission, and parsers for output. Most MySQL users, on the other hand, will use the power of functions in PHP or other scripting languages to articulate relationships between tables, fields, and values.

There is often no right way to store and serve your data, and practically speaking, the best route to choose is often the one you know best. However, PHP5 has brought with it a new function, SimpleXML, which can help offer you even more options, and is a powerful addition to your scripting toolbox.

Why Choose?

A few years ago, I needed to re-use some existing XML documents and some MySQL data in the same PHP script. After several late nights of poking at XML extensions and writing really ugly regular expressions, I was able to get it working, but it was an inelegant solution and, frankly, a huge pain.

Had SimpleXML been available back then, it would have made that project a lot easier. Using SimpleXML in PHP allows you to grab a chunk of XML and convert it into a PHP object, which is then broken down further, turning the XML elements into object properties which PHP can then act on. Multiple XML elements of the same type are represented as an array, which you can loop over with foreach or while until the sun goes down.

Now that PHP is showing XML some real love, it makes perfect sense to use the two together when the time is right.

The Basics

I’ll illustrate the basic concept using a simple grocery-shopping list containing XML that you can create yourself. (What, you don’t write your shopping lists in XML?) Remember, with XML, you can make up your own element names, and they’ll work just fine, as long as you use them consistently and nest them properly.

(N.B. This example is meant to be illustrative, and is likely not the way you’d actually want to write your XML grocery list for production purposes.)

<?xml version="1.0"?> 
  <groceryList> 
      <listName>My Shopping List</listName>
      <foodGroup>
          <groupName>Fruits and Vegetables</groupName>
          <item>
              <name>Pomegranate</name>
              <howMuch>2</howMuch>
          </item>
          <item>
              <name>Carrots</name>
              <howMuch>1 pound</howMuch>
          </item>
      </foodGroup>
      <foodGroup>
          <groupName>Grains</groupName>
          <item>
              <name>Couscous</name>
              <howMuch>6 ounces</howMuch>
          </item>
      </foodGroup> 
      <foodGroup>
          <groupName>Candy</groupName>
          <item>
              <name>Crunchie Bar</name>
              <howMuch>1 gross</howMuch>
          </item>
      </foodGroup> 
  </groceryList>

In plain English, we’ve got three food groups, Fruits and Vegetables, Grains, and Candy. In addition to a name, each of the groups also contains one or more items, and each item contains a name and a quantity. Pretty simple. (If you’d like to follow along hands-on, copy that XML into your favorite text editor and save it to your web server as groceries.xml¹).

Now we’ll write the PHP that will allow us to grab that XML data and use it in a script.

(N.B. As with the XML above, this PHP is for illustrative purposes. Real-world use would beg for a great deal of optimization, and an XHTML wrapper.)

<?php 
  // set the XML file name as a PHP string
  $myGroceryList = "groceries.xml" ; 
  // load the XML file 
  $xml = @simplexml_load_file($myGroceryList) or die ("no file loaded") ; 
  // assign the listName element to a string
  $nameOfMyShoppingList = $xml->listName ;
  echo "<h1>List: " . $nameOfMyShoppingList . "</h1>";
?>

returns List: My Shopping List

(Try it yourself. Copy the code above and save it to a text file named list.php. Make sure it’s in the same directory as groceries.xml. Then load list.php in your browser, and see what you get.)

It doesn’t get much more basic than that. The script will read the XML file, load the whole thing into an object called $xml, and then walk through the XML to find an element called listName. It’ll assign the value of the XML element listName (in our case, “My Shopping List”) to the variable $nameOfMyShoppingList, and then I can use that variable anywhere PHP will allow it.

Using your data

Now that your XML file is loaded into an object, and you’ve learned how to display simple values, you can really have your way with it. Let’s create a loop that will take each foodGroup element, display its name, and then list each of the items’ names and quantities. (If you’re still following along, add the following code to the end of list.php, just before the ?>.)

foreach ($xml->foodGroup as $foodGroup) {
  echo "<h2>Food group name is " . $foodGroup->groupName . "</h2>" ;
  foreach ($foodGroup->item as $foodItem) {
      echo "<br /> Item: " . $foodItem->name ;
      echo "<br /> Quantity: " . $foodItem->howMuch ;
      echo "<br />" ;
  }
  echo "<br />" ;
}

will give you:

List: My Shopping List
Food group name is Fruits and Vegetables
Item: Pomegranate
Quantity: 2
Item: Carrots
Quantity: 1 pound
Food group name is Grains
Item: Couscous
Quantity: 6 ounces
Food group name is Candy
Item: Crunchie Bar
Quantity: 1 gross  

(See the results in action.)

If you’re already an expert with XML queries, you’ll be happy to know that SimpleXML also supports XPath.

Other Applications

Since XHTML is a flavor of XML, you can use SimpleXML to parse data from any web page that is well-formed XHTML. I can’t stress enough how cool it is to be able to maintain a master file of simple data in XHTML, but then be able to move, change, and redisplay that data with some simple PHP, while you also make it available to other people to use for their own projects. To accomplish this with a well-formed XHTML file anywhere on the web, simply use a URI instead of a file name as the value in simplexml_load_file, like this:

// set the XML file's URI as a PHP string
      $bobsGroceryList = "http://www.bobgroceries.com/list.xml" ; 
  // load the XML file 
      $xml = @simplexml_load_file($bobsGroceryList) or die ("no file loaded") ; 

This comes in very handy when you want to use data from services on the web that serve up XML in response to queries. One fun example is ISBNdb, a book data service. Their really simple API allows you to get basic data about books, and will deliver it to you (or your PHP script) in XML format. Take a look at this example—but remember to come back here and finish reading! (If you are interested in seeing or using the CC-licensed code for this ISBN example, just drop me an email and I’ll send it along to you.)

Go Forth, Be Fruitful, and Iterate

Now that you’ve got an understanding of the power of SimpleXML, you may want to consider the new ways you can store and work with data for your projects. Productive work often requires the power and versatility of a database, but for some applications, SimpleXML is a terrific solution.

Footnote

¹ Make sure your web server is running PHP5—SimpleXML is active by default in PHP5, so this should work unless your sysadmin intentionally turned it off (additional details).

Got something to say?

Share your comments with other web professionals (6 comments)

• Add to Magnolia
• Add to My Yahoo!
• Add to Newsvine
• Digg this story
• Add to Del.icio.us

Related Topics: PHP, Programming, XML

Kerri Hicks is a programmer in Brown University’s Scholarly Technology Group, and is the copy chief at Digital Web. She’s been a salaried web developer since 1994, but has yet to ask anyone to actually get off of her lawn. She has been known to decorate her clothing with likenesses of robots.

How do I create a robots.txt file?

You can create this file in any text editor. It should be an ASCII-encoded text file, not an HTML file. The filename should be lowercase.

How to Add an API to your Web Service By Ryan Campbell · August 31st, 2006

Introduction

APIs are a great way to extend your application, build a community, excite your users and get in on the Mashup Mania spreading across the web. While there’s plenty out there wanting in on the action, there’s a lot of questions about how to actually go about creating an API for a web application. Like everything else technical on the web these days, there are tons of complicated and scary documents out there ready to intimidate the unprepared. In an attempt to get everyone on the bus in one piece, we’ve tried to filter through the hard stuff and give an easy to understand starting point for anyone on a quest to API’ify their web service.

An API, or Application Programming Interface, is a set of functions that one computer program makes available to other programs (or developers) so they can talk to it directly without having to give it access to the source code. The most popular APIs are from operating systems like Windows XP or Mac OS X. They allow third-party developers to write programs on top of Microsoft’s and Apple’s software. Thanks to pioneers like Amazon and eBay, the concept of APIs have to come to the web in full force and are being released by more and more web services and applications to turn their one-trick pony into platforms.

Add Google Maps to Your web site in 4 easy steps

03/28/2006 By Ajax Impact News

Google Maps is one of the web application that is implemented using Ajax. You can add the attractive Google Maps functionality onto your website by doing following 4 easy steps. Steps for Adding Google Maps to your web-site: 1. Go to Google Maps API site and get the Google API Pin for the site where you want to display the maps. Replace the GOOGLE_API_PIN with the value you got from Google API site in the attached code. 2. Go to Info Sports site and get the Geocoder - Coordinates i.e. the Longitude & Latitude values for the city/country which you want to display in maps by default. For example if you want to display the Los Angeles as default map in your site then the Longitude & Latitude values are (-118.388671875, 34.161818161230386). Info Sports provides this service for free. You need to put these values in place of Longitude and Latitude words in the attached code. 3. Now copy and paste the attached code into a webpage after changing the values as mentioned above. 4. You are ready to use the Google Maps on to your site... Click here for Demo.

53 CSS-Techniques You Couldn’t Live Without

January 19th, 2007

CSS is important. And it is being used more and more often. Cascading Style Sheets offer many advantages you don’t have in table-layouts - and first of all a strict separation between layout, or design of the page, and the information, presented on the page. Thus the design of pages can be easily changed, just replacing a css-file with another one. Isn’t it great? Well, actualy, it is.

Over the last few years web-developers have written many articles about CSS and developed many useful techniques, which can save you a lot of time - of course, if you are able to find them in time. Below you’ll find a list of techniques we , as web-architects, really couldn’t live without. They are essential and they indeed make our life easier. Let’s take a look at 53 CSS-based techniques you should always have ready to hand if you develop web-sites.

Thanks to all developers who contributed to accessible and usable css-based design over the last few years. We really appreciate it. Thanks!

1. CSS Based Navigation

2. Navigation Matrix Reloaded

3. CSS Tabs

4. CSS Bar Graphs (CSS For Bar Graphs)

5. Collapsing Tables: An Example

6. Adam’s Radio & Checkbox Customisation Method

7. CSS Image Replacement

8. CSS Shadows (CSS Shadows Roundup)

9. CSS Rounded Corners Roundup (Nifty Corners)

10. Drop Cap - Capital Letters with CSS

11. Define Image Opacity with CSS

12. How to Create a Block Hover Effect for a List of Links

13. Pullquotes with CSS (Automatic Pullquotes with JavaScript and CSS

14. CSS Diagrams

15. CSS Curves

16. Footer Stick allows for the footer of a Web page to appear either at the bottom of the browser window or the bottom of the Web page content – whichever is visually lowest.

17. CSS Image Map

18. CSS Image Pop-Up

19. CSS Image Preloader

20. CSS Image Replacement for Buttons

21. Link Thumbnail

22. CSS Map Pop

23. PHP-based CSS Style Switcher

24. CSS Unordered List Calender (CSS Styled Calender)

25. CSS-Based Forms: Techniques

26. CSS-Based Tables: Techniques

27. Printing Web-Documents and CSS

28. Improved Links-Display for Print-Layouts with CSS

29. CSS-Submit Buttons

30. CSS Teaser Box

31. CSS Tricks for Custom Bullets

32. Ticked Off Links Reloaded

33. CSS Zooming

34. Creating a Star Rater using CSS

35. The ways to style visited Links

36. PDF, ZIP, DOC Links Labeling

37. Displaying Percentages with CSS

38. Image Floats without the Text Wrap

39. Let visitors decide, whether or not will they open link in a new window

40. Simple accessible external links

41. Zebra Table with JavaScript and CSS

42. Vertical Centering with CSS (Horizontal and Vertical Centering with CSS

43. Unobtrusive Sidenotes

44. Image Caption with CSS (Styled Images with Caption)

45. Dynamic Piechart with CSS

46. Format Footnotes with CSS

47. Hierarchical Sitemap with CSS

48. Snook’s Resizable Underlines

49. Switchy McLayout: An Adaptive Layout Technique

50. StyleMap: CSS+HTML Visual Sitemap

51. Custom Reading Width

52. CSS Alert Message

53. CSS Production Notes

Posted by Smashing Magazine Filed in CSS

319 Comments » Tags: css, design, techniques, web-development

Free CSS Layouts And Templates

January 12th, 2007

As a web-developer you don’t have to re-invent the wheel all the time. If it just has to work, and has to be valid, and has to have a nice, visually appealing design hierarchy, you just can use css-techniques developed in the web-dev-community over the last few years. If you take a look around, you’ll find many templates, which include basic (X)HTML/CSS-markup.

You can start from there, learning and exploring the possibilities of CSS and modifying templates for your exquisite taste. Below you’ll find a list of resources which offer free, gorgeous and valid CSS-based templates - usually with images and full layout structure, such as headers, navigation bars, content containers, sidebars and footers.

Usually developers require a link to the site where the template was downloaded from. So before using these templates it might be useful to take a look at the license agreement the developer provides.

Spread the word - digg it and save it!

(X)HTML- and CSS-Templates

• Open Source Templates
  15 impressive templates
• OSWD
  Hundreds of templates and layouts of all possible kinds.
• OSWT
  A huge collections with search- and sort-functions. With annoying advertisement.
• Maxdesign
  23 layouts and design solutions
• CSSplay
  Stu Nicolls presents dozens of free professional layouts. Sometimes a permission to use layouts is required.
• Tinderbox
  One layout in many variations
  
• Changingman
  Beautiful liquid 3-col-layout.
• Mollio
  Seven variations of one template, incl. style guides as .pdf-files.
• Six Shooter Media
  15 Templates
• Yahoo! UI Library: Grids CSS
  A complex solution for many problems you might ever have: grid design is a principle well-known from image editors and layout tools.
• CSS Design Templates
  12 Templates
• ThreeColumnLayouts, by CSS Discuss
  Collection of 3-column-templates, gathered from a dozen of sources on the Web.
• CSS Intensivstation
  15 Layouts
  
• CSSFILL
  Small collection for personal web-sites
• CSS Frames Layouts
  Frames are also possible with CSS
• CSS Template Gallery
  The site includes a search function, however it includes only 32 templates.
  
• Ex-Designz
  98 (X)HTML-based CSS-templates
• Code-Sucks
  6 templates and various layouts with 2-4 columns.
• Jimmy Lin
  8 simple templates
• Layout Gala
  40 professional Layouts for fresh and serious online-presentations.
• Little Boxes
  16 Layouts, classic.
• Solucija
  19 Templates

Even more freebies!

• 25 CSS Template Resources
  A comprehensive list in the Web Developer’s Handbook.
• An extensive collection of css-templates
  List of resources with free css-layouts, by Manuela Hoffmann (in German!).

Posted by Smashing Magazine Filed in CSS

36 Comments » Tags: CSS, Download, free, Layouts, Templates, XHTML

CSS-Based Footers: Modern Solutions

January 9th, 2007

Every design element deserves particular attention in Web 2.0. Navigation menus, forms, comment forms, comment designs, tables, typography, fonts, even more fonts and even download buttons are designed in more detail to make a good first impression. The smallest things can make a big difference - one of those smallest things are footers, used to visually close the content of a page; however, as you’ll see below, sometimes they also have some more functions.

Spread the word - digg it and save it!

Posted by Smashing Magazine Filed in CSS

23 Comments » Tags: footer, gallery, techniques, web 2.0

CSS-Based Tables: Modern Solutions

December 29th, 2006

We coninue to present some of the best CSS-techniques which web-developers can always use working on their current web-project. Recently we’ve taken a look at the best css-based forms, today we present some useful techniques for displaying information in a tabular mode. In fact, tables can present data quite efficiently, particularly if you can use some sorting or filtering functions in order to improve the legibility of the text stored in the table. Furthermore, Zebra tables are becoming more and more popular, and the techniqies supposed to enhance their functionality appear on a weekly basis.

So what do we have? Let’s take a look around: over 30 modern css-based techniques in a brief overview.

Zebra Tables

Redesigning a simple table

Zebra Tables

Better Zebra Tables

Splintered striper: Enhanced Zebra Stripes

Standardista Table Sorting (A client-side JavaScript Table Sort module)

Designing Tables with Stylesheets

SortedTable instructions and examples v0.8f

A CSS Styled Table by Veerle Pieters.

24ways: Tables with style

Sinnhafte Websites

Data Tables and Cascading Style Sheets Gallery - 78 CSS Table Designs.

Zebra Table Showdown featuring Plain DOM Scripting, Yahoo UI, Dojo, Prototype, Mochikit, mootlos, jQuery, AJS. - design67

Filtering Table

Stripe your tables the OO way

Unobtrusive Table Sort Script (Revisited)

Brainjar.com: DHTML Table Sort

Table sorting JavaScript: Unobtrusive and with alternating row colors

Tables with further functionalities (i.e. sorting, filtering)

Replicating a tree table

Table with sorting and autofilter

Reformat the Table and Reformat the Table 2

Table not a table

CSS Style Tables Tutorial

How to create and style accessible tables - design56

Sort Table Rows with Javascript

The Table Ruler

sorttable: Make all your tables sortable

Sortable Tables (WebFX)

Sort’n’scroll Table

<a

Explorer Exposed!   

The weird and wonderful world of Internet Explorer

These CSS bugs are all found only in Internet Explorer, versions 5 and higher. To see the demos properly, they must be viewed in IE, of course.

I am always looking to improve these demos, so if you know of anything useful, lay it on me. Please don't hold back; I have yet to write a demo that did not need corrections, updates and whatever. This site is really a group effort. Be part of that group.  :-)

CSS Hacks

Will the browser apply the rule(s)?

turn on interactive highlight

	Windows	Mac OS X	Macintosh	Other
	IE	Mz	Ns	Op	iC	IE	Mz	Ns	Om	Op	Sf	IE	Mz	Ns	Op	Ko
	7b3	6	5.5	5	4	1	7	6	4	8	7	6	5	2	5	1	7	6	4	8	7	6	5	2	5	4	1	7	6	4	6	5	3
	7b3	6	5.5	5	4	1	7	6	4	8	7	6	5	2	5	1	7	6	4	8	7	6	5	2	5	4	1	7	6	4	6	5	3
	IE	Mz	Ns	Op	iC	IE	Mz	Ns	Om	Op	Sf	IE	Mz	Ns	Op	Ko
	Windows	Mac OS X	Macintosh	Other

Why tables for layout is stupid:

problems defined, solutions offered

Tables existed in HTML for one reason: To display tabular data. But then border="0" made it possible for designers to have a grid upon which to lay out images and text. Still the most dominant means of designing visually rich Web sites, the use of tables is now actually interfering with building a better, more accessible, flexible, and functional Web. Find out where the problems stem from, and learn solutions to create transitional or completely table-less layout.

The problem:

You want all the columns to appear to be the same height but you can't guarantee which column of your layout will be the longest.

YUI Reset CSS

The foundational YUI Reset CSS file creates a level playing field across A-grade browsers and provides a sound foundation upon which you can explicitly declare your intentions. It normalizes the default rendering of all HTML elements, for example it sets margin, padding, and border to 0, font sizes to YUI Font's default, italic and bold styles to normal, and list-style to none.

Multi-Column Layouts Climb Out of the Box

by Alan Pearce

• Published in: CSS, HTML and XHTML, Layout |

• Discuss this article »

We all know the problems that arise when we try to build multi-column layouts in which the columns are of equal height. It has been well documented elsewhere, so I won't go into the details here.

A project I recently worked on required an elastic layout with two columns of equal height, each with a different background color. As usual, there was no way to tell which column would be taller. I immediately thought of Dan Cederholm's Faux Columns, but I needed an elastic layout. I also looked at the One True Layout, but this seemed buggy and required too much extra markup and too many hacks for my taste. I even thought about using JavaScript to make sure the columns were of equal height, but that just felt wrong. Out of desperation, I almost (gasp!) used a table.

But no, there had to be a better way. I just needed to think “outside the box.” And what is outside the box? Borders. If I could float my “sidebar” (or “rail”) div over the border of my “content” div, I could simulate equal-height columns no matter which one was the tallest.

If this sounds familiar, that’s probably because a version of this method was introduced by Douglas Livingstone and extended by Holly and John Bergevin at Position Is Everything. While relying on the same core theory, the method presented here uses cleaner, less deeply nested markup, includes elastic and two-column layout variations, and generally benefits from having been developed in the post–One-True-Layout world. Here is how it’s done. (Line wraps marked » —Ed.)

Static and dynamic CSS combined

Some of you have probably heard “dynamic CSS”. It originates from a need to serve different CSS at different times, to different people, or on different pages. You do this by first generating the CSS on the server and then sending it off to the users requesting it. There are problems though, since the CSS gets regenerated each time you lose the advantage of caching. You could send HTTP headers so that the file gets cached anyway, but then it’s no longer dynamic right? This article presents a way to both have dynamic CSS that changes on each request, and make sure the user loads it from cache when it can.

Generating Dynamic CSS with PHP

CSS constants

A lot of web designers complain about CSS lacking constants you could define once and reuse throughout the CSS document. CSS was not meant for that and does not support it.
What you can do though is use a server side language to simulate a CSS file by setting the appropriate header. However, this means you need to stick to the language syntax.

Playing with that idea, I came up with a small PHP script that parses any CSS given to it via a variable and reads and replaces the defined constants in the CSS.

CSS Server-side Constants

Apache htaccess Ultimate Guide

Table of Contents

• General
  1. htaccess definition
  2. htaccess comments
  3. important information
  4. performance issues
  5. regex character definitions
  6. redirection header codes
• Essentials
  1. htaccess comments
  2. enable basic rewriting
  3. enable symbolic links
  4. enable AllowOverride
  5. rename the htaccess file
  6. retain httpd.conf rules
• Performance
  1. disable AllowOverride
  2. pass the character set
  3. preserve bandwidth
  4. disable the server signature
  5. set the server timezone
  6. set admin email address
  7. enable file caching
  8. set default language & character set
  9. declare specific/additional MIME types
  10. send headers without meta tags
  11. limit request methods to GET/PUT
  12. process files according to request method
  13. execute various file types via CGI script
• Security
  1. prevent access to htaccess
  2. prevent access to any file
  3. prevent acess to multiple file types
  4. prevent unauthorized directory browsing
  5. change the default index page
  6. disguise script extensions
  7. limit access to the LAN
  8. secure directories by IP or domain
  9. deny/allow domain access for IP range
  10. deny/allow multiple IP addresses on one line
  11. miscellaneous rules for blocking/allowing
  12. stop hotlinking, serve alternate content
  13. block robots, rippers, and offline browsers
  14. more stupid blocking tricks
  15. even more scum-blocking tricks
  16. password-protect directories
  17. password-protect files, directories, and more
  18. require SSL (secure sockets layer)
  19. automatically CHMOD various file types
  20. disguise all file extensions
  21. limit file upload size
  22. disable script execution
• Usability
  1. minimize CSS image flicker in IE6
  2. deploy custom error pages
  3. provide a universal error document
  4. employ basic URL spelling check
  5. force media downloads
  6. display file source code
  7. redirect visitors during site development
  8. provide password-prompt during site development
  9. prevent access during specified time periods
• Redirects
  1. important note about redirecting via mod_rewrite
  2. redirect from www-domain to non-www-domain
  3. redirect from an old domain to a new domain
  4. redirect string variations to a specific address
  5. other fantastic redirect tricks
  6. send visitors to a subdomain
  7. more fun with RewriteCond & RewriteRule
  8. more fun with Redirect 301 & RedirectMatch 301
• WordPress
  1. secure wordPress contact forms
  2. wordpress permalinks
• Random
  1. activate SSI for HTML/SHTML file types
  2. grant CGI access in a specific directory
  3. disable magic_quotes_gpc for PHP enabled servers
  4. enable MD5 digests
  5. expression engine tricks
• References

mod_rewrite RewriteRule Generator

Sitemaps Third Party Programs & Websites

The following are links to programs that support Google Sitemaps, a component of webmaster tools.

Please Note: Google has not tested or verified the features or security of the third party software listed on this site. Please direct any questions regarding the software to the software's author. We hope you enjoy these plug-ins!

FormTextResizer

FormTextResizer is a bookmarklet that allows you to resize any textarea or text input on any webpage. This way, you won't be confined to a teensy little comment box or e-mail field. Just activate the bookmarklet, then click-drag on the textarea or text field that you want to resize. Simple!

Right-click here and "Bookmark" FormTextResizer to access it anywhere, or click the link to try it out.

Note: Internet Explorer places a restriction upon bookmark URL lengths, so use this Internet Explorer bookmarklet, which links to a script on my server.

You can view the uncompressed, nicely formatted JavaScript code here.

DataURLMaker

This page contains a CGI program called the "Data URL Image Generator". If you select an image file and submit the form below, you get a Data URL for the image, as per the RFC specification for Data URLs. For more info, see this page.

docs.markhuot.com

Why not

• Modules

  • Pages (3.5.8) → Why let WordPress have all the fun, emulate WP's static pages with just a custom weblog and categories

• Extensions

  • Checkbox (1.0.2) → Use checkboxes instead of a drop down list if you want to select multiple options
  • Custom Fields in EE Tags (2.1.2) → No more SQL queries just because you want to limit by a custom field, now do it right from the {exp:weblog:entries} tag
  • Duplicate Entry (1.0.0) → Duplicate an entry right from the edit tab with just a simple press of a button
  • Edit Remember (1.0.8) → Forget remembering your Edit tab search criteria, this allows you to leave, come back and have your edit tab just as it was before
  • Empty Options (1.0.0) → Use an empty (NULL) option in your Drop-down Lists
  • File (1.0.7) → A simple file upload field right in the publish tab.
  • Gallery Entries Children (1.0.0) → Displaying a parent gallery can now show children categories too.
  • Geo (1.0.1) → Effortless Google maps in the CP and on your site
  • Live-search (1.0.3) → Don't bother loading that monster "Edit" tab when you can just type a search and be whisked away to your entry in a flash
  • Logout Redirect (1.0.0) → Don't like that login screen? Take your users somewhere else when the log out
  • Markdown (1.0.0) → Think XHTML formatting is silly? Try Markdown and take your posts to a whole new level
  • Multi Drop-down List (1.1.1) → Take the existing Drop-down list to a new level and allow authors to select more than one option
  • Multi Relationship (1.0.1) → Like Multi Drop-down List's for Relationship fields
  • Multi Text (1.0.5) → Create a matrix of data in 3x3, 4x4, 5x4, 10x2, etc. grids
  • Nested Weblog (1.0.5) → Nest your weblogs under the publish tab (also switches it to a CSS menu instead of the clunky JS one.)
  • Radio (1.0.0) → Just like the checkboxes, except with radio buttons!
  • Smarty (1.0.0) → Smart ”typography!“
  • Text: Improved (1.0.2) → Validate your user's entries against any number of predefined or custom regular expressions

• Plugins

  • MarkyPants (1.0.0) → Format entries with Markdown and SmartyPants at the same time
  • Strip P (1.0.3) → Got formatted text you don't want wrapped in a <p>, try this

• Betas

  • [M] Files Use it with the "Files" module to browse uploaded files in a quick and intuitive fashion
  • [E] Ajax Tags Tag your entries quickly and easily