Mark Lindquist - Web Developer
(((( (978)-201-6361 ))))

Log In:

Please log in or sign up to the right.
Exists in the database. Not in the database.

Register:

Sign up or log in to the left.

Introduction:

This website is a collection of features programmed to try and demonstrate the basic Web technologies used in creating websites. Although you will have to sign up and log in to access the main content, which is neccessary to demonstrate user authentication, once you do you will have access to a resume, portfolio, a photo gallery and more. The technologies chosen . . .
More>>
  • HTML5
  • CSS3
  • JavaScript
  • PHP
  • MySQL
  • jQuery
  • Photoshop

. . . are the backbone of this Web application. The remainder of this page explains these technologies with regards to how they are used on this site. But first an introduction.

In basic terms a Web page consists of three layers; structure, appearance, and behavior. The structure is defined by the HTML, XHTML, or HTML5 predefined elements or tags that make up a page. These tags could be any combination of p, a, img, div tags and more.

The CSS controls the appearance of these elements in terms of color, size, layout, visibility and so on for each element. CSS is sometimes considered the clothing that covers the skeleton or HTML tag structure.

The behavior of a website, things such as forms, authentication, and the like are controlled by scripting languages such as JavaScript, a browser based scripting language, and PHP, a server based scripting language. These programming paradigms act on the HTML elements, as does the CSS rules which dictate appearance, but in a behavioral way i.e. forms, database queries, form validation, and within this site the photo gallery. Considered the Web page's behavior these technologies differentiate a basic site from a dynamic one. The photo gallery is written in PHP and is a good example of advanced Web page behavior.

In a nutshell this site demonstrates the structure or new HTML5 elements, the appearance or CSS3 specification, and behavior with a lot of PHP, JavaScript, some jQuery and more.

Hide>>

Top >>

CSS:

In terms of the new CSS3 specifications the appearance utilizes the new text-shadow property for starters. There is a lot of background images, background gradients, floats, some media queries which determine the viewport's appearance given the size or width, and the @font-face CSS rule which demonstrates using custom fonts as can be seen in the header and navigation. The header, although appears to be a background image is actually a CSS3 Repeating Linear Gradient.
Top >>

JavaScript:

The heavy work is within the forms, validating the fields and such.

Each form in the site is validated using JavaScript. An event handler function handles each form field's blur event upon entering the next field in the form. A blur event takes place when the form field has focus and then loses focus (not entirely correct). The event handler function uses Regular Expressions to validate each field while losing focus. The Birth date example, along with the "What's This" and "Hide Tip" links are written in JavaScript.


Top >>

PHP:

The signup and log in forms are written in PHP with a MySQL database for storage. Upon signing up the info is recorded in a table in the database and you are presented with a log in form (Or log in from the front page if signed up). Upon logging in a video is displayed along with access to a photo gallery. The video uses HTML 5 video tag with appropriate attributes and is pretty cool if you wait for the download. The photo gallery, also with some cool images, is where much PHP work was written. The images are uploaded to a database and echoed to the page four at a time. The Pagination links that navigate the different pages of photos under the images is a procedure that uses the GET super global to retrieve the current page number from the URL.
Top >>

Authentication:

The sign up, log in, and logout procedure deserves its own description. From the login procedure a PHP session variable and a cookie are set. The session variable keeps the user logged in while the website session is active. The cookie keeps the user logged in even after the website session is inactive (the session variable has died) and the user comes back. This is called persistant log in because the user is logged in until the cookie expires or the user logs out, MAKING IT USER FRIENDLY.
Top >>