Website Makeover, revisited

 Course Work  Comments Off on Website Makeover, revisited
Dec 312011
 

Following on from the crit session at the end of term, and the example site www.visitlondon.com that was recommended by David (along with various other tutorials etc), I have done another couple of redesigns.

I started by amending the drop downs to become some form of menu line (I used JavaScript as I havent yet had time to really experiment with JQuery) with the html versions of the site – I quickly stopped this and reverted the code back to what it was.

I decided instead to dip my toe in the “PHP water” – I did this to become used to PHP and also to make use of the include functionality so simplifying the page content. The end result is a PHP implementation of the aformentioned site (with revised PHP error page now local to site) and includes onmouseover/out menu implementation (not drop down) which includes a timed delay on the menu disappearing thereby solving accessibility issues (I was loathe to do it having invested a lot of time in getting the drop downs to work, but they are a bit of an accessibility nightmare particularly for people with poor hand co-ordination – which includes me after a few beers).

This also meant getting PHP to work locally under IIS which, once I decided not to use the MS Web Installer (PHP install kept failing), was fairly straightforward. I also set up the PHP error page, so this works locally as well.

Apart from the PHP conversion and replacing the drop down menus the only other changes were a couple of minor tweaks to the text, moving the search box slightly to line up with the adddress, and the inclusion of a twitter icon/link.

Anyway see what you think both the PHP and HTML versions can be viewed below.

PHP Version (timed onmouseover menus, not drop downs) – click here

HTML Version (drop down) – click here

I have also included a link to download the PHP (and HTML) site source – click here to download/view a ZIP version of the site.

 Posted by at 4:11 pm

SEO Analysis and improvement suggestions for JRS stamp fair site

 Uncategorized  Comments Off on SEO Analysis and improvement suggestions for JRS stamp fair site
Dec 302011
 

This is the site that I choose to redesign it for better look and better for the search engines

Analyse of JRS fair site in www.Alexa.com site.

 

Different fonts which I found to use for the JRS stamp fair site:

There are some rowels that you have to fallow them if you want to make your website good for the SEO. Here I will write the points that I applied to this website in order to make changes.

In title of the page they used abbreviation of the companies name (JRS) which is not good for the search engine and it is better to write (John Rice Stamp). The title tag should relevant to the content of the page so I change it from “JRS fairs-Stafford stamp” to “John Rice Stamps Fair – Stafford Stamp Fair”.

 

They didn’t use any Meta tags for their site. I added Description and Keyword Meta tag to the codes of the site.

In order to find out which keywords are better for this site I used Google Adwords. It gave me 100 relevant keywords although these days search engines are not looking to the keyword Meta tag I just put 5 best keywords which was relevant to the content of the site in that Meta tag.

The Meta description tag is intended to be a brief and concise summary of page’s content.

When we write a Meta description tag, we should limit it to 170 characters or 200 characters at most.

“Stamps Fair in Stafford Stamp Show – June & November with 50 National & International Stamp & Postal History Dealers.”

I wrote the title of the page and text of the Description Meta tag in title case in order to make it easier to read for the users.

URL of the site is: www.jrs-stamp-shows.co.uk/  which is better to change to www.jrs-stamp-fair.co.uk/ this URL is more relevant to the content of the page.

 

This company has a big website, the ranking of that site is 2 and in comparison with this page they have a good traffic there but they didn’t put any links of this page on their site. In order to have a better ranking and better traffic they have to put the link of their page on different site. This will helps to improve the ranking of their site in search engines.

Use of <h1>, <h2> and <h3> for the headings of the site and use more keywords in them.

For example they have two fairs in this site and for the heading of those fairs they only use “winter fair” and “summer fair” and they change the size of the text with CSS. But I used <h2> for those heading and change them to “Winter Stamp Fair” and “Summer Stamp Fair” this way of using keywords and <h> tags its better for SEO.

 

Adding more images of the stamps in the page as the first designed pages doesn’t have any images of stamps in it. There was just one picture of a place and there was no alt attribute for it. I put 3 images in the site and I use keywords in their name and also in their alt attribute.

the title of the site was just a picture and there was no image replacement for it, so the important part for the search engines were missing here.

 

I used <h1> and complete name of their company for the header of the page to make it more friendly for search engine.

Lack of text in the page was the other weeknes of the site which I solve it with adding one paragraph of their history of their works and a future plan for their fairs.

 

After first crit in the class some changes have been done and this is the new look of the site.

——–>>>> Changes after first crit:

background logo was added to the header

Image of punch change to dashed line which is more appropriate to the content of the page.

The picture which was used for showing different stamps wasn’t enough color full so I change it to the new picture with more color full stamps in it.

First paragraph of the page should be divided in two columns or make the font size of it much bigger to make it more read able. Second solution was chosen by me.

 

And here is the look of the redesign website:

 

 Posted by at 1:41 pm

Web over the weeks

 My Blog  Comments Off on Web over the weeks
Dec 302011
 

Web Design through the weeks

 

I wanted to create an personal reflective review to the unit now we are at the end it and look at the bits and bobs that I learned along the way.

 

We were first presented with the understanding about design and how we use a tiered structure in order to separate the 3 elements in to their own sections. These 3 areas are,

 

The Structural layer= the markup (HTML)

The Presentation Layer = Styling (Cascading Style Sheet)

The Behavioural Layer = Actions (JQuery, Java)

 

Our goal was to separate the structural layer from blending in to the presentation layer.

 

We then went on to understanding the “Semantic Web”

Semantic Web=”Using Markup to add meaning to content”

 

We also then reviewed the naming conventions and why we might use these, this was very interesting as I have been using unconventional naming previously.

The way in which Google catalogs the files in which we upload to our host, Google would catalog the following  file (“green_ford_fiesta.jpg”) as only one name “green_ford_fiesta”.

 

Where as the use of hyphens (“green-ford-fiesta.jpg) instead of the underscores google would catalog the following as “green”,”ford”,”fiesta””green ford fiesta”,”green ford”,”ford fiesta”.

 

Moving on to the Presentation Layer

<ul> can as a container – think do I need a <div>?

a <ul> class.name will focus on all elements in the container and will allow a minimal css entry.

 

We then looked at the clear:both option in CSS we found that the way a ul list is layed out if a float left/right selection is not cleared would stager the lists items incorrectly.

 

By doing a clear:both the markup will look to insert the object be it text/image into a clear area.

 

We then looked at the use of an alternative style sheet, when using an alternative style sheet you if you don’t want the page to inherit the styles for the other style  sheet if switching between them it needs to be set to none.

Moving on to Images and Colour’s.

 

We reviewed the 4 most commonly used web format images.

JPEG 24 Bit True Colour

GIF 8 Bit 256 colour (Index Colour Pallet)

PNG 8 Bit 256 colour (Index Colour Pallet)

PNG 24 Bit True Colour

 

We were then shown an image of an apple that wasn’t sharp and the colour were slightly out from the original.

Dithering is when a 256 colour pallet DOESN’T have enough Colour to put another colour in so it puts another colour in from the pallet it has.

 

PNG (24) = not lossy

JPEG = lossy

JPEG compression can leave artifacts

 

Wherever possible be semantic, however at times this isn’t right, i.e. 20 images on a gallery example we need to be “pragmatic”

 

We were then shown the spite position change, this used 1 image that had 2 images in it, but with a clever bit of CSS the position of an image can allow it to be positioned so the other part of the image is viewable.

 

 

Typography

 

When choosing a font you need to think about the user that doesn’t have your font style installed, so an option could be to use a web based font. Google fonts are useful as the font is stored online and the use will pull the font down from google.

Other services available are Font Squirrel this is a free service.

A serif font is difficult to render as the screen resolution. Smaller text will struggle to show the serifs on the font. Serif fonts are used as headings as the serifs will show up.

We looked at the “x” height which looks at the height of the lower case x in any font.

We then looked at the “counter” which is the space inside the letters.

 

What units do I use?

PX or Pixels = Absolute

Em’s & Percentage = Relative

 

Page Layouts

 

12 column grid systems using 960 px

a good method is to set layout using the DIV’s and then rationalize the code and remove where possible.

 Posted by at 11:51 am

Biscuit Critical Review

 My Blog  Comments Off on Biscuit Critical Review
Dec 302011
 

Improvements Made on the Biscuit Project.

During the critical review process of all the designers in my group I found my self constantly saying “that’s a good idea, and so simple” and at times some interesting feedback was given that made me think, hum I did that.

When it came to critically reviewing my project I was give the following bits of advice and suggestions.

Typography – It was suggested that the fonts that were selected weren’t as sympathetic to the design of the overall page.

Navigation colour’s – The original colour of the navigation was mustard yellow, with a darker colour for the hover over.

I decided to remove this navigation and implement another, as the original one appeared “blocky”, so when looking for ideas for navigation I stumbled across a simple hover over tabbed that allowed the user to see that they are hovered over a button. The colour scheme that I decided to use on the navigation and footer bar was intended to be sympathetic to the colour on the tablecloth on the background of the site.

Search results below the fold

Personal Improvements

I would like to implement a recipe of the month on the home page, this would be linked in to a PHP date check that would generate a SQL query on the works Christmas, Easter, Anzac Day and Halloween amongst many others.

A small amount of shadow on the navigation bar giving each tab more definition.

Implement a stylish search bar on the banner of the site.

Create an admin page that will enable the owner of the site to add, update and remove recipes that contributors have added to the site.

Alternative stylesheet, I would like to enable the user to select a style of layout that they would want the look like, the designs would be contemporary decorative fancy elegant fonts and the alternative would be a classic table cloth kitchen recipe book style.

I would like to include a twitter tab with a live feed on the site in the right hand corner. Giving all users the ability to join the community that the site is all about.

 Posted by at 10:02 am

Whats in a Font?

 My Blog  Comments Off on Whats in a Font?
Dec 302011
 

Reviews on Fonts and the sites that use them.

Nestlé

The font used on the Nestle Website gives the impression like the chocolate of quality, the heading tags continue to use the joined calligraphy style with the main content using a heavy gold capitalized only font.

I like the main content font this is easy to read and grabs your attention

 

Harrods

 

The Harrods site continues my investigation in to sites with good typography. I have navigated through this site and feel that the fonts used are well suited to the regality of the brand name. The font used for the navigation bar is very strong and clear. The spacing between each of the capital letters and the font used gives each navigation option a presence on the page.

The use of the Serif font on the center caption again brings an element of class a quality to the site.

 

Gardeners World

The choice of fonts used in the Gardeners World site is bold and shapely. The site uses a san-serif font that is almost bubbly on the navigation area and for the titles of the individual sections the font used give the feel an authentic garden project book that is asking to be read.

Poor Design

 

UBI Soft

During my search for some Christmas presents I navigated my way on to the UBI Soft website to look at some reviews of the games that are coming out. When in go on to this site I instantly decided that id be using this site as a example of poor font selection.

The text is very much bunched together and the biggest issue I had was that it was extremely small, the advertising is the most eye catching thing and only after a lot of scanning around the site you get to the information that you want and then its hard to read because its small.

The page to the user that it they have navigated on to the Game Listings as this is big and almost imposing on the page. In my opinion this is too large.

 

 

KFC

On my search for examples of poor use of Fonts I must have been a little pekish as I started looking through fast food sites and came across the KFC site. When I started looking through the site I found that there were areas of text that had a dimond with a question mark on it, clearly the font that was intended for me the visitor wasn’t supporting certain characters. I did start off liking the font usage on this site initially but because of the unfortunate missing characters I had to move it in to my poor example.

 

Nando’s

I was upset when I thought about using Nandos in this homework, as I expected big things from their site, but I was left disappointed.  This site is very gimmicky one, but on visiting it there is no clear indication of it being the home page of the Nando’s chain as the isn’t any corporate branding, but when it comes to the text and fonts used in the site I was given a similar problem as the UBI soft site, the text is very small, but, this site is using a handwritten font which combined with the small size of the text led to me squinting just to make out what it actually says. On the design side of things the navigation also uses clickable images that are NOT obvious.

 Posted by at 9:43 am

Bicycle Doctor : Amended site after feedback

 Coursework  Comments Off on Bicycle Doctor : Amended site after feedback
Dec 202011
 

 

 

 

 

 

 

 

From the feedback in class, I made the following changes on my site:

  • I added ‘Services’ to the main navigation and under that ‘repairs’ and ‘bike builder’.
  • I added Contact Details and Location to the home page, in the side bar.
  • I added ‘Bike of the Month’ at the top of the side bar. This is to show it is an active website and changes every month, as well as promoting a product. I thought that this could also be a automatically changing box that would also have other news such as events etc.
  • ‘Note’ (about prices) I moved into the footer as I wanted to allow more space in the side bar for more important stuff.

 

 Posted by at 2:32 pm

Styling different links – My findings

 Other  Comments Off on Styling different links – My findings
Dec 202011
 

I found this as a draft post from a while ago so I thought I’d publish it.

This gave me a bit of trouble, but I have managed to do it and I want to remember how I did it by writing it down on here. Also, I looked around on tutorials and found that people were coding their CSS  slightly differently from me, however I tried their way and it hasn’t worked but it seems to work my way. Please feel free to disagree with my coding and set me straight on this.

The order of links in CSS are:

a:link {}
a:visited {}
a:hover {}
a:active {}

The above rules apply to every link. If you want an image link to act differently from a text link, you have to add another set of link rules using both the <a> tag and the <img> tag. The set of rules would look like this:

a:link img {}
a:visited img {}
a:hover: img {}
a:active: img {}

You could also be more specific and separate different links by using different classes or id selectors. So for a text link that had the class ‘important’, my set of link rules would look like this:

.important a:link {}
.important a:visited {}
.important a:hover {}
.important a:active {}

If I was being more specific with an image link, I would use the <a> tag and the <img> tag as well as the class or id. So if my image had the id ‘logo’, my set of rules would look like this:

#logo a:link img {}
#logo a:visited img {}
#logo a:hover img {}
#logo a:active img {}

 Posted by at 12:03 pm

MySQL Databases with PHP

 Classwork  Comments Off on MySQL Databases with PHP
Dec 202011
 

CLASS NOTES

  • What is MySQL?
    MySQL is used to store data.

    PHP is required to extract data from MySQL databases.
    MySQL is a relational database management system that supports the SQL language. SQL stands for “Structured Query Language”. MySQL has a close relationship to PHP. PHP has a number of functions specifically designed to work with MySQL. Like PHP it is open source and therefore free.
  • MySQL and PHP in CMS
    In a content management system, all the content of articles, the date and time of publication, the name of the author and comments written are stored in the database and are extracted and compiled “on the fly” each time the page is requested by a browser.
  • How to use MySQL?
    Like PHP, MySQL can be downloaded and installed on a desktop computer. However, also like PHP it usually runs on a web server. Most web hosts who provide Linux hosting also provide PHP and MySQL as part of the offering.
  • How do I create a database?
    Databases are created using the control panel provided by your web host. In most cases, on a Linux server, that will be cPanel. You can use either the main MySQL Databases page or the MySQL Database Wizard to create a new database.
    (If you are using Ecowebhosts, use the MySQL Databases link in the Web Tools section of the control panel)
  • Create database in cPanel
    Creating a new database is very simple, just enter a name and click “Create Database”. However, to connect to a database, you need to specify a User who is allowed to access the database. So, to create a user, enter a name and a password and click “Create User”. Finally, the user must be added to the database. Select the user name and the database name from the two drop-down lists and then click “Add”. Your database is now ready to use but before you can add any data, you need to give it some structure…
  • Creating a new database using the Ecowebhosts control panel is even easier. The key difference is that you need only enter a username and a password. The database is given the same name as the user. You will also notice that the database and user names are prefixed with a server-specific name. This ensures that each database name is unique. Your database is now ready to use but before you can add any data, you need to give it some structure…click the Now button under “Manage”.
  • What is phpMyAdmin?
    Structure (tables and fields) needs to be added to a database so that it can hold. Despite it’s name, phpMyAdmin is an administration tool for working with MySQL databases. phpMyAdmin is used to structure your database – to add tables and fields. It can also be used to add data to your database once it is structured.
  • Data structure with phpMyAdmin
    The structure shown on the image below is for a simple news application that will show a headline, a date and some content.
    .
    .
    .
    .
    .
    .
  • This database has just one table with 4 fields, starting with item_id (a unique index), then headline, date and markup. Each field is defined as a different data type depending on what type of content it will contain. For example, the date field is set to display the current MySQL datestamp each time the row is updated. The item_id field is a 4 digit integer (0-9999), the headline can contain up to 100 variable characters and the markup is just a text field.
    .
    .
    .
    .
    .
    .
  • At Ecowebhost, the structure looks the same; they are using phpMyAdmin with a slightly different skin but the operations are identical. Notice that item_id is set to AUTO_INCREMENT. This means it automatically numbers each row when a new news entry is added – once set up, we can forget about it. It is also defined as the primary key, which just means that the rows in the database will be sorted in that order.0
  • Inserting data with phpMyAdmin
    Most web applications, like WordPress will have a control panel that enables users to add data but phpMyAdmin can be used to add data to any MySQL database.
    .
    .
    .
    .
    .
    .
    .
  • Browse data with phpMyAdmin
    Each database table is a sort of spreadsheet consisting of rows of data. In this database, each row has 4 fields. Once data has been entered, it can be extracted by PHP using a query…
    .
    .
    .
    .
    .
    .
  • Link to database and run query
    <?php
    # username, password and database name
    $db_user = “web107-ma-news”;
    $db_password = “+M/*Pqdi1;4Y”;
    $db_name = “web107-ma-news”;# connect to to mysql and select database
    $db_conn = new mysqli(‘localhost’, $db_username, $db_password, $db_name);# build a database query
    $sql = “SELECT headline, markup, date FROM news ORDER BY date DESC“;# run the query and assign the result to a variable
    $result=$db_conn->query($sql);
    ?>The host is always called “localhost” when the database is on the same server as your website. The above bit of PHP assigns the database access credentials to variables, links to MySQL, selects the database, queries the database and stores the selected data in a variable called $result and then closes the MySQL link.
  • The query:
    $query = “SELECT headline, markup, date FROM news ORDER BY date DESC“;
    SELECT [the field names] FROM [the table name] ORDER BY [a value] [descending]This query selects the three fields (columns) headline, markup and date from the news table. We could have used SELECT * (the wildcard character) to select all columns in the table but more specific queries make for easier interpretation. The query then uses the date value to arrange the data in descending order so that the most recent article is always first. All of the selected data is stored as an array (a kind of spreadsheet) in a variable ($result). The data will be extracted one row at a time using PHP.
  • Access and Print Array Data
    <?php
    # step through each news article, one at a time
    while ($row=$result->fetch_assoc())
    {$headline = $row[“headline”];
    $date = $row[“date”];
    $markup = $row[“markup”];# convert mysql date to php timestamp
    $timestamp = strtotime( $date );# format php timestamp
    $display_date = date(‘jS F Y’, $timestamp);# print out the news story
    echo “<h2>$headline</h2>”;
    echo “<p>$date</p>”;
    echo “<p>$markup</p>”;
    }
    ?>This bit of PHP uses a while loop to step through each row in the array, assigns each value in the row to a variable, converts the MySQL date to a format for printing and then prints out the new articles using the echo function. The while loop will continue until there are no more rows.
  • A PHP file:
    Shown below is a completed code with a few added extra details to the script. For example, the or die functions tell the script what to do if there is an error when communicating with the database.<?php
    # a simple application to extract news articles from a database using mysqli and print them out# assign username, password and database name to variables
    $db_user = “web107-ma-news”;
    $db_password = “+M/*Pqdi1;4Y”;
    $db_name = “web107-ma-news”;# connect to the database or stop the script and give an error message
    $conn = new mysqli(‘localhost’, $db_user, $db_password, $db_name) or die (‘Cannot open database’);# build the query
    $sql = ‘SELECT headline, markup, date FROM news ORDER BY date DESC LIMIT 5’;# run the query
    $result = $conn->query($sql) or die (mysqli_error());
    ?><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
    <html xmlns=”http://www.w3.org/1999/xhtml”>
    <head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
    <title>The News (PHP and MySQL example)</title>
    <link href=”base.css” rel=”stylesheet” type=”text/css” />
    </head>
    <body>
    <div id=”wrapper”>
    <h1>The News (PHP and MySQL example)</h1><?php
    # step through each news article, one at a time
    while ($row = $result->fetch_assoc())
    {# assign each field to a variable
    $headline = $row[‘headline’];
    $date = $row[‘date’];
    $markup = $row[‘markup’];

    # convert mysql date to php timestamp
    $timestamp = strtotime($date);

    # format php timestamp
    $display_date = date(‘jS F Y’, $timestamp);

    # print out the news article
    echo “<div class=”article”>n”;
    echo “<h2>$headline</h2>n”;
    echo “<p class=”date”>$display_date</p>n”;
    echo “$markupn”;
    echo “</div>nn”;
    }
    ?>

    </div>
    </body>
    </html>

    As you can see, PHP codes can go in both the head of a page and within the body, depending on the circumstance.

 Posted by at 11:33 am

Introduction to PHP

 Classwork  Comments Off on Introduction to PHP
Dec 192011
 

CLASS NOTES

PHP FOR SITE MODULARITY

  • What is PHP?
    PHP is a “server-side” scripting language specifically designed for producing dynamic web pages. It is the most widely used scripting language in the world and PHP5 is the latest version.
  • How does PHP work?
    PHP scripts are embedded in the HTML mark-up and the file has to be saved with a .php function so that the server knows how to treat it. When a user requests a PHP page, the server passes the page to the PHP “parser”, which runs the scripts and passes the compiled page back to the web server for delivery to the user. The browser requests to view a page called index.php. index.php is sent to the interpreter within the server and is sent back to the browser as index.html.
  • What PHP looks like (it goes within HTML):
    <html>
    <head>

    <title>PHP Test</title>
    </head><body>
    <?php echo ‘<p>Hello World</p>‘; ?>
    </body>
    </html>

    PHP scripts are always enclosed with a <?php and a ?>
    Each instruction is terminated with a semi-colon ;

    After the php file has been ‘parsed’ (sent to the interpreter), the user will see a normal HTML file that says <p>Hello World</p>

  • Using variables for consistency:
    If you change the name in one place, it will change all over the site. This example is changing the page name in the head title and all the h1 on the site:<?php $page_name = “PHP Test” ; ?>
    <html>
    <head>
    <title><? echo $page_name; ?></title>
    </head>
    <h1><? echo $page_name; ?></ h1>
    <body>
    </body>
    </html>

    The user will just see the following:
    <html>
    <head>
    <title>PHP Test</title>
    </head>
    <h1>PHP Test</ h1>
    <body>
    </body>
    </html>

     

  • Dates with PHP:
    PHP can automatically change dates and use the date to change other things on a site. However, the date is not Local, it comes from the server-side, meaning the time and date will be according to whichever web host you use. Javascript uses Local Time.
  • The date formatting is very flexible and can be formatted in various ways:
    The code for 2003 – 2011 will be:
    2003 –
    <? echo date(“Y”); ?> 

    The code for 12:55pm 23rd Nov 2010 will be:
    <? echo date(“g:ia jS M Y”); ?> 

  • Using the date to do something:
    <html>
    <head>
    <title>Today</title>
    </head>
    <body>
    <?php
    $today = date(l);
    echo “<p>Today is $today</p>”;
    if ($today == “Saturday” OR $today == “Sunday”){
    echo “<p>Hooray! It’s the weekend.</p>“;
    }else{
    echo “<p>Oh, it’s just another work day.</p>“;
    }
    ?>
    </body>
    </html>
  • Site Modularity:
    Using the include function to update elements to the whole site.
    To include elements such as ‘branding’, ‘sidebar’ and ‘footer’ on one page, it will look something like this:
    <html>
    [HEAD SECTION]
    <body>
    <? include(‘branding.php’);?>
    <div>
    [CONTENT GOES HERE]
    </div>
    <? include(‘sidebar.php’);?>
    <? include(‘footer.php’);?>
    </body>
    </html>So there are three separate files…
    branding.php
    sidebar.php
    footer.php
    …which are saved separately and then included into all the other pages. Those three files are known as server-side includes because they are added to the main page by the server before passing the completed page to the user’s browser for display. In reality, the page on the right is built from 4 files, a parent file (index.php) and the 3 includes. The file extension for includes can be anything you like. You will often see…
    branding.inc …or… branding.inc.php but most commonly they are saved as .php files and in a folder called includes.
  • Path names:
    A “portable” absolute path:
    <? include($_SERVER[‘DOCUMENT_ROOT’] . ‘/includes/footer.php’); ?>
    In order to make absolute paths “portable” (they work on different domains or if the domain changes), use the $_SERVER[‘DOCUMENT_ROOT’] superglobal variable as in the example above.A relative path:
    <? include(‘includes/footer.php’); ?>
    The problem with using relative paths for includes is that they change depending on where in the site the parent file is located.

    An absolute path:
    <? include(‘/home/mydomain/public_html/includes/footer.php’); ?>
    PHP can see above the document root so, unlike HTML, PHP absolute paths begin at the topmost server level and not the document root. Notice that the name of the domain is included in an absolute path.

  • An example of a page with includes:
    <?php $this_page = “PHP Example”; ?>
    <html>
    <head>
    <title><? echo $this_page; ?></title>
    <link href=”/style/style.css” rel=”stylesheet” type=”text/css” media=”screen” />
    </head>
    <body>
    <div id=”wrapper”>
    <?
    include($_SERVER[‘DOCUMENT_ROOT’].’/includes/header.php’); include($_SERVER[‘DOCUMENT_ROOT’].’/includes/navigation.php’);
    ?>
    <div id=”content”> <!– Content Begin –>
    <h1><? echo $this_page; ?></h1>
    <p>Some body text… </p>
    <!– Content End –>

    </div>
    <? include($_SERVER[‘DOCUMENT_ROOT’].’/includes/footer.php’); ?>
    </div>
    </body>
    </html>

  • The included navigation:
    This is to include the same navigation list on each page of your site so it can be easily updated. However, we want the navigation to indicate which page we’re on, we don’t want a live link to the PHP Example page if we’re already on that page.
    This is a normal list of navigation links:
    <ul id=”navigation”>
    <li><a href=”php-example.php”>PHP Example</a></li>
    <li><a href=”another-link.php”>Another Link</a></li>
    <li>…
    …</li>
    </ul>This is the same list, with the PHP script:

    <ul id=”navigation”>
    <?php
    if ($this_page == “PHP Example”) {
    echo “<li>PHP Example</li>“;
    }else{
    echo “<li><a href=”php-example.php”>PHP Example</a></li>“;
    }
    ?>
    <li><a href=”another-link.php”>Another Link</a></li>
    <li>…
    …</li>
    </ul>

  • This is a list of three links which shows the same intelligent PHP script applied to all links:
    <ul id=”navigation”>
    <?php
    if ($this_page==”PHP Example”){
    echo “<li>PHP Example</li>“;
    }else{
    echo “<li><a href=”php-example.php”>PHP Example</a></li>“;
    }
    if ($this_page==”Another Page”){
    echo “<li>Another Link</li>“;
    }else{
    echo “<li><a href=”another-page.php”>Another Link</a></li>“;
    }
    if ($this_page==”A Third Page”){
    echo “<li>A Third Link</li>“;
    }else{
    echo “<li><a href=”a-third-page.php”>A Third Link</a></li>“;
    }
    ?>
    </ul>
  • Random Image Display:
    <?php
    $random_image = rand(1, 3);
    switch $random_image) {
    case “1”:
    $image = “image-01.jpg”;
    break;
    case “2”:
    $image = “image-02.jpg”;
    break;
    case “3”:
    $image = “image-03.jpg”;
    }
    ?>
    <img href=”<? echo $image; ?>” width=”25 height=”25″ alt=”” />
  • Random Image with Alt Text:
    <?php
    $random_image = rand(1, 3);
    switch $random_image) {
    case “1”:
    $image = “image-01.jpg”;
    $alt = “A Blackbird”;
    break;
    case “2”:
    $image = “image-02.jpg”;
    $alt = “A Blue Tit”;
    break;
    case “3”:
    $image = “image-03.jpg”;
    $alt = “A Robin”;
    }
    ?>
    <img href=”<? echo $image; ?>” width=”25 height=”25″ alt=”<? echo $alt; ?>” />
  • Day of the Week:
    <?php
    $today = date(l);
    switch $today) {
    case “Monday”:
    $image = “image-01.jpg”;
    $alt = “A Blackbird”;
    break;
    case “Tuesday”:
    $image = “image-02.jpg”;
    $alt = “A Blue Tit”;
    break;
    case “Wednesday”:
    $image = “image-03.jpg”;
    $alt = “A Robin”;
    …and so on for each day of the week…
    }
    ?>
    <img href=”<? echo $image; ?>” width=”25 height=”25″ alt=”<? echo $alt; ?>” />
  • Using Quotes:
    This is really important and is the cause of much anguish for the PHP beginner.
    We can print text in PHP using the echo function like this:
    echo “David likes PHP”;We can also print HTML using the same function:
    echo “<p>David likes PHP</p>”;

    But a problem arises when the text or HTML we are printing includes quotes:
    echo “<p>David likes PHP</p>”;

    This will cause an error because echo thinks the string ends after the second double quote. There are 2 ways around the problem:

    Escape the double quotes:
    echo “<p class=”content”>David likes PHP</p>”;
    Or use single quotes:
    echo ‘<p>David likes PHP</p>’;

    Both the above options give the same result:
    <p>David likes PHP</p>

  • Comments in PHP scripts:
    Single line comments begin with the hash symbol (#). Multi-line comments use exactly the same syntax as CSS.<?php
    # assign the name of the day to a variable
    $today = date(l);
    /* check the value of the variable against a number of
    options – the days of the week */
    switch $today) {
    # if today is Monday, assign the image and alt variables
    case “Monday”:
    $image = “image-01.jpg”;
    $alt = “A Blackbird”;
    break;
    # if today is Tuesday, assign the image and alt variables
    case “Tuesday”:
    $image = “image-02.jpg”;
    $alt = “A Blue Tit”;
    break;
 Posted by at 5:50 pm

JavaScript and jQuery

 Classwork  Comments Off on JavaScript and jQuery
Dec 192011
 

CLASS NOTES

THE BEHAVIOURAL LAYER (JAVASCRIPT AND JQUERY):

  • About Javascript Libraries/Frameworks:
    JavaScript libraries are collections of pre-designed functions that can be added to webpages using a simplified JavaScript syntax. There are lots of JavaScript libraries (sometimes known as “frameworks”). Moo Tools, YUI, MoochiKit, Google Web Tool Kit, Spry and jQuery are just a few of the better known.
  • Why jQuery?
    By far the most popular library is jQuery. It is well supported and documented, concise, fast and, most important of all, easy to use. One of the most important features of jQuery is that it is designed to work “cross-browser”.
  • How to use jQuery:
    jquery.com
    To begin using jQuery, all you need to do is to download the small .js file and link to it from the head section of your page or simply link to the .js file hosted elsewhere.
    <script type=”text/javascript” src=”/javascript/jquery-1.3.2.min.js”></script>
    OR
    <script type=”text/javascript” src=”http://code.jquery.com/jquery-latest.js”></script>
    Once you have done that, you can start using jQuery in your pages.
  • An example of jQuery:
    The following example uses the jQuery .toggleClass() function to add/remove a class from an element. View the script in actionHTML:
    The target (paragraph):
    <p id=”change”>Duis sed ligula odio, sed posuere magna…</p>
    The trigger (button):
    <form> <input type=”button” value=”Make Change” onclick=”makeChange()” /> </form>CSS:
    .change_me {
    background-color:#BADB35;
    }

    The Javascript:
    <script type=”text/javascript”>
    function makeChange(){
    $(“#change”).toggleClass(‘change_me’);
    return false;
    }
    </script>

  • A breakdown of the jQuery:
    your function name:
    function makeChange(){
    {this symbol to open the functionjQuery:
    $(“#change”).toggleClass(‘change_me’);
    Dollar sign signifies jQuery
    Your chosen selector. In this case it is the ID name #change
    jQuery function name .toggleClass

    return false; end the function quietly
    } close the function

  • Another example of jQuery:
    The following example uses the jQuery .slideToggle() function to show/hide page elements. View the script in actionHTML:
    The target (paragraph):
    <p>Duis sed ligula odio, sed posuere magna…</p>
    <p id=”extra”>Duis sed ligula odio, sed posuere magna…</p>
    The trigger (button):
    <p id=”link”><a href=”#extra”>More content&hellip;</a></p>CSS:
    #extra {
    display:none;
    }

    The Javascript:
    <script src=”/javascript/jquery-1.3.2.min.js” type=”text/javascript”></script>
    <script type=”text/javascript”>
    $(document).ready(function(){
    $(“#link a”).click(function(){
    $(“#extra”).slideToggle();
    return false;
    });
    });
    </script>

  • jQuery UI takes the concept of a JavaScript library to the next level by providing a library of “widgets”, effects and utilities and not just functions. Each widget is composed of the core jQuery library, a widget specific function library, associated CSS and image files. jQuery UI provides standard solutions to common interface design methods.
  • This example uses the jQuery UI Tabs widget to create a tabbed interface. Notice that the markup is very simple, as is the JavaScript function that makes it work: ExampleWidgets can easily be customized by editing the supplied images and CSS file so that they blend with your site design. However, the jQuery UI site also provides a “ThemeRoller” so that you can create your own bespoke theme.
  • What is AJAX?
    – AJAX (Asynchronous JavaScript and XML)
    – Data is retrieved using the XHLHttpRequest object
    – Allows parts of a page to be refreshed with new data from the server
  • Useful links:
    jquery.com
    jqueryui.com
 Posted by at 4:21 pm