Continuing with the PHP Tutorial Series

Dear followers of the PHP Tutorial, hope you all enjoyed the PHP, and got benefits from this simple tutorial. As I promised you before, the next series of the PHP Tutorial focus on developing web-based applications using PHP.

To make the development more useful and close to real world applications, we need to focus on the user interface, and cover aspects related to it, so we moved for two short tutorials that covers the User Interface aspects using XHTML and CSS, and learned the basics for developing a cross browser compatible pages, and how to apply standards in developing the web page.

From Now on, we are going to develop our first we application in this tutorial, which is a guest book, that allow users to post comments and there’ll be a simple admin panel to manage the comments.

The development for the Guest Book goes on these steps:

1. System definition and requirements.

2. Analysis and design for the database (Includes implementing the database).

3. Implementing the system logic (PHP).

4. User interface design.

5. Deployment.

Hope you enjoy the development process for the application, and if you have any questions or feedback don’t hesitate to tell us about it.

Cheers,

Anas Jaghoub

G-Jordan Day-1 Event By Google on December 12, 2010

Today, Google run its first event G-Jordan in Jordan at Hayat Amman hotel, about 30 Googlers where there, presented sessions and talked about latest technologies from Google, they also talked about HTML5, Cloud Computing, Open web standards, Chrome Extensions. Attendances where professors from Jordan universities, and also students from different universities and countries like Lebanon, Palestine, Bahrain and more according to invitations sent by Google.

Really it was an amazing event, valuable, and successful.

Anas Jaghoub

P.S here some of photos from the event:

Nelson Mattos – VP, EMEA Product & Engineering

Sebastian Trzcinski-Clément – Developer / Industry Relations Lead, Middle East and North Africa

What you speech is what you see and what is Google translate :))

Chris DiBona – Open source and public sector programs manager and Me(Anas Jaghoub)

 

Luiselle Mozze a Googler and me (Anas Jaghoub)

Luiselle Mozze, Me (Anas Jaghoub), and my friends Mohammad Jaradat(left) and Ahmad Sharairi(right) of Luiselle Mozze.

Regards,

Cloud Computing Session at AABU–IT College on 2-DEC-2010

On 2-DEC-2010, I’d presented a session about “Cloud Computing” on the college of IT at Al-Al Bayt university, the session focused on introducing the concept of cloud computing, why cloud computing, area of usability, examples on cloud computing, advantages and limitations of cloud computing.

Attendances were students of I.T college in both departments Computer Science and Computer Information System, In addition to the head of department of Computer Science Dr. Sa’ad Bany Mohammad.

Here the link for the ppt slides of the session on Google Docs: Cloud Computing Session

another link on SkyDrive: Cloud Computing Session

Anas Jaghoub

P.S, Below Images from the session:

CSS Tutorial – Lesson 1 Part II

In the previous lesson we learned how to define a CSS rule, and we had shown that a CSS rule consists of two parts a selector and a declaration.

In the previous lesson we talked that in the selector we might write the html element we want to style. In our lesson today, completing with CSS rules, we’ll see now other types of selectors,

The ID selector:

CSS allows you to specify a style for a single element, regardless to its tag, depending on its id attribute. as you know, in XHTML each element has an id attribute, and this id must be unique.

To define a CSS rule depending on the ID selector below the syntax for it:

Example:

#theID

{

font-size: 14px;

}

Notes:

  • The above CSS rule will be applied for any element whose id = theID,
  • The ID selector must start with #.

The Class Selector:

Unlike the ID selector, the class selector allows us to define a rule for multiple elements regardless to their tag. The class selector enables us to define a common style for common elements, so that each element whose class same as the selector, will be styled according to the rule it follows.

Example:

.Justifiable

{

text-align:justify;

font-size:12px;

color: black;

}

Notes:

  • The class selector must start with a dot.
  • and used with the class attribute for any element.

In some circumstances, we might need to apply some styles for specific elements, for example for some divs we might need their background-color be the same, with font-size 15px for example, CSS allows us to define specific rules for specific elements, here is the syntax:

Example:

div.Pink

{

background-color: pink;

font-size:15px;

}

Notes:

  • The above rule will be applied for all elements whose class is Pink, so we restricted the rule with the element div, and internally, restricted it to divs whose class is Pink, so this rule cannot work with element p for example though its class might be Pink, only with div element and has a class Pink.

End of this part,

To download this part as PDF click here: CSS Tutorial – Lesson 1 Part II

Best Wishes,

Anas Jaghoub

CSS Tutorial – Lesson 1 Part I

What is CSS?

CSS refers to Cascading Style Sheets, In general styles define how to display elements on the web page.

Why CSS?

By CSS, we can define a style for a web page and make it standard for all web pages on the website, changes to the style will be applicable to all pages on the same time. another point of view, CSS responsible for formatting elements of a page, this feature makes the HTML/XHTML responsible on defining the content of the page, and does not have a role in formatting the elements.

CSS created by W3C to solve a problem of HTML/XHTML, suppose you want to design your page in some specifications for fonts and colors used, then without using CSS, you have to write these specification for each page you want to apply this design to it, moreover, you might need to apply same design specifications on two different places on the same page, without CSS, you have to write it where ever you want it, this will make page design more complex and poor.

Syntax:

A CSS rule consists of two parts, first one is the selector, and the second one is the declaration part.

Normally, the selector is an HTML element that you want to style.

The declaration part, consists of properties and its values, each property defines a specific style that makes special touches to an element.

Example:

p

{

/* Declaration Part */

color: black;

font-size: 13px;

text-align: justify;

}

Notes:

  • The above lines of code, makes a rule for styling paragraphs in any HTML/XHTML document.
  • This rule displays paragraphs in font color black and size of 13px, and justifies it to its parent borders.
  • The p is an HTML element that refers to define paragraphs, and it is the selector in this rule.
  • Properties are defined in the declaration block.
  • Declaration block begins with an open curly bracket, and finishes with a close curly bracket.
  • Comments in CSS are enclosed within /* and */.
  • Each property definition ends with a semi-colon.
  • In this example I’m just showing the syntax of CSS, next lessons we’ll talk in deep details about properties and its values.

How to apply?

This example shows how to apply the above rule in an XHTML document.

  • Firstly, save the above rule in a file for example style.css, it is important that the extension of the file be .css.
  • In each page you need to apply your style, just link the style sheet to your page.
  • Look at this example:
  • <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
    http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

    <html>

    <head>

    <!—Use the link tag to link to your style sheet –>

    <link rel=”stylesheet” type=”text/css” href=”style.css” />

    <title>Welcome</title>

    </head>

    <body>

    <p> This is a paragraph that has special style defined in the CSS style sheet. </p>

    <p> Another Paragraph has same styles it is amazing idea Smile</p>

    </body>

    </html>

    End of Part I.

    To download this part as PDF file click here: CSS Tutorial – Lesson 1 Part I

    Best Wishes,

    Anas Jaghoub

XHTML Tutorial–Lesson 1 Part IV

Summary

In this lesson, I’ll try to summarize all what we learned in the previous lessons about XHTML.

Remember that XHTML refers to EXtensible Markup Language, which is a cleaner version of HTML, defined as an XML application, recommended by W3C, and compatible with all web browsers.

Remark that all XHTML elements are written in lower case.

Note that XHTML elements must be nested correctly and be a well formed structure.

Remark that all XHTML tags must have a closing tag.

Remember that empty tags are closed by a space followed by a forward slash then greater than symbol  />.

Note that attribute values must be enclosed within double quotes.

Attribute minimization is not allowed.

Each XHTML document must start with a DOCTYPE declaration.

Finally, The structure of XHTML document is, DOCTYPE declaration, followed by html tag, followed by a head tag, followed by title, followed by body tag. Remember that this structure is mandatory and not optional.

End of XHTML Tutorial, hope you got an overview about XHTML, and got the hint about web standardization.

To download this lesson as PDF file click here: XHTML Tutorial–Lesson 1 Part IV

Best Wishes,

Anas Jaghoub

XHTML Tutorial–Lesson 1 Part III

Document Type Definition DTD

As we said in the previous lesson, DTD is mandatory for each XHTML document, and we saw the structure for each XHTML document, that consists of DOCTYPE, html, head, title, body. In other words there is three parts that each XHTML document contain,

  • The DOCTYPE definition.
  • The head section.
  • The body section.

Remember: DOCTYPE definition is the first thing to be written in the XHTML document.

Below an example for an XHTML document:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

<html>

<head>

<title>Welcome</title>

</head>

<body>

<h1>Welcome To my page!</h1>

</body>

</html>

Notes

  • As we said before, each XHTML document must start with a DOCTYPE definition, that describes the syntax of a web page, and the allowed syntax to be used, In other words it specifies allowed tags to be used in the XHTML document.

There are three kinds of XHTML DOCTYPE, which are: STRICT, TRANSITIONAL, and FRAMESET. We’ll talk about each kind of them and where to use.

XHTML 1.0 STRICT

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;

The strict type of XHTML is a really clean markup language of html, it is free of presentational clutter, and used together with CSS. In other words, this type does not support presentational views for the page, and all design aspects and colors, fonts and styles are left to the CSS.

XHTML 1.0 Transitional

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

The transitional type is used if you still need XHTML to support presentational features and don’t want to depend completely on the CSS, it is a mix of XHTML and CSS, in fact this type is the commonly used in the web.

XHTML 1.0 Frameset

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”&gt;

The frameset type is used if you want to use html frames.

It’s important to know that the strict type includes elements and attributes that are not obsolete or have not been deprecated or do not appear in the framesets.

On the other hand, the transitional type includes all elements of the strict type plus obsolete and deprecated elements and attributes. It is not preferable to use obsolete or deprecated elements.

Finally, the frameset includes all features and elements in the transitional type plus frames.

To be continued,

To download this lesson as PDF file click here: XHTML Tutorial–Lesson 1 Part III

Best Wishes,

Anas Jaghoub