This semester I learned about web development by attending a presentation series. My goal was to learn more about how web pages are put together and how to do more advanced stuff with them. Prior to this semester, I knew some basic HTML, but that was it. I have since learned a lot more, including CSS, JavaScript, and PHP. I've written about the technologies that were covered this semester below.
Note: as of 10/16/2010, some server side demos are no longer functional and are around for archival purposes only.
Client Side Technologies
These technologies are run by the client (in other words, the computer viewing the website).
HTML and CSS
Websites are primarially constructed with HTML and CSS. The contents of the page are created in HTML and CSS is used for the presentation. Presentational elements should always be done in CSS. HTML should only be used for stuff that adds to the content of a page. An sample webpage made using HTML and CSS can be viewed here.
CSS is very powerful. The same HTML page, but with different CSS, can look entirely different. This is illustrated by CSS Zen Garden. The main page for CSS Zen Garden can be viewed with different CSS files. The page looks radically different with the different CSS files, even though the HTML for the page does not change at all. My CSS file for CSS Zen Garden can be seen here.
JavaScript
JavaScript is one way in which the functionality of a website can be enhanced. JavaScript can be used to create a menu system, for example. JavaScript can also be used to make a page interactive. For example, JavaScript can be used to get input from the user and respond to that input. This example of JavaScript simply moves bullet points up or down on the page when the user clicks on the correspondng text. Another example of JavaScript in action can be seen here.
XML, XSLT, and DTDs
Note: I was unable to attend this week as I was at the housing lottery.
HTML 5 and CSS 3
HTML 5 is the next version of HTML. It offers many interesting new tags and attributes. A few of the new attributes deal with forms. Currently, validation for email addresses and links needs to be performed with JavaScript or PHP. In HTML 5, there are new attributes for email and links so this verification can be done by the browser. New tags such as footer and navigation eliminate the need to use div tags with the ID attribute for CSS styling. Creating web pages will be much simpler when HTML 5 is widely supported. A cool site is The HTML5 Test, which allows one to see how well their internet browser supports HTML 5.
Like HTML 5, CSS 3 is the next version of CSS. It offers many new ways to style pages. One new way is to set items to display like a table cell. This allows one to have two divs be exactly the same height even if the size of their contents differ. This is useful for sidebars or navigation bars, for example. Currently this requires long workarounds. Another new feature is the ability to have rounded corners and the ability to create image gradients.
Server Side Technologies
Unlike the client side technologies, the server side technologies are processed by the server and only the results are delivered to the client. Web servers run on software such as Apache. SSL is also implemented on the server. To do this, software such as Open SSL needs to be installed. A RSA private key then needs to be created and signed (typically by a certificate authority that requires lots of money, but certificates can be self signed). Self signed certificated are less secure as one cannot verify the identity of the server they are connected with (though this may not even be true with certificate authorities). Internet browsers will generate a warning when a site's certificate is self-signed for this reason.
PHP
PHP is a scripting language like JavaScript, but unlike JavaScript, PHP is executed on the server. PHP is used for many different things on the web.For example, PHP is often used with HTML forms and is the "middle man" between a website and a database. Form data is stored in an array in PHP after it is submitted. PHP can then do stuff with the data (such as send an email, or add/update to a database). Here is a sample feedback form created with PHP.
MySQL
MySQL is a database system. It stores tables of information, for example a table of users for a login system. But MySQL is not limited to storing just user info. Databases like MySQL are used to run fourms and wikis across the Internet. Any site that stores lots of information that can change could use a system like MySQL.
I created a sample login system using PHP and MySQL (no longer functional since 10/16/2010).
Image Generation with PHP
PHP can be used to generate images, such as for a CAPTCHA. The basic code needed to generate an image is relatively simple: simply use imagecreatetruecolor to create an image with a certain width and height, add color/text as needed, output the image and tell the browser to interpret it as a jpeg, and destroy the image on the server to free up resources. To include the image in a website, simply use the img tag with the PHP page as the source. The image below (no longer functional since 10/16/2010) was generated with PHP and could be used for a CAPTCHA on a website - refresh the page to get a diferent image. The code for it can be viewed here
Ajax
Ajax isn't really a technology by itself. It's a combination of several technologies that allow a user to interact with a page asynchronosly with the server. Ajax is an engine written in JavaScript that handles requests from the page that don't require a query to the server, such as data validation, editing data that's already in memory, and even some navigation. The Ajax engine makes requests to the server when needed, so the user doesn't have to wait for the server to respond to continue interacting with the page. Ajax is used for web applications such as Gmail and Google Maps.
