Week 6: Web servers

Introduction

Web servers are widely used in today's world to deliver dynamic web pages to users surfing the internet. When a client makes a new request through a web browser, the server processes the request, converts the page from the dynamic language to html and sends it to the browser. This has a lot of advantages because the browser can send parameters to the server which change the content that is generated by the server.

Server Side Includes

SSI is a simple programming language which was developed a while ago, way before dynamic web languages like php where born. SSI only supported one type : text but at the time it was enough to make web pages a bit more dynamic.

Sessions

In today's advanced websites, information needs to be consistently stored. Variables is a way to store data but after the page refreshes, that variable is lost forever unless it is stored in a file, cookie or a database. In order to keep variables between different pages there's a special variable which is called a Session cookie which enables someone to store data throughout the pages and is cleared out when the session expires. This type of variable is generally used for login information including purposes such as storing of personal data & user type.

XAMPP

It best that a devloper has a local server where he can test all his work. This relieves the developer from uploading a file every time he wants to test it. Mysql and PHP are different modules and needed to be installed separately in the past.A group of members have setup a package including all the necessary modules needed for a local web server & distribute it for free. This is called XAMPP and one can download the package here.

Problems

Since we wanted to make our web server accessible to other pc's from the same network(also external network), after making sure that my firewall allowed connections through port 80, I jumped to another PC to try to access my server. To my surprise, an error popped up stating that the server is not accessible and the reason was a new Xampp security featue. Some configuration in the httpd.xampp.conf found in <XAMPP DIRECTORY>/apache/conf/extra, had the wrong configuration. Here is a simple fix which will relieve this problem.

Change this:
Order deny,allow

Deny from all

Allow from 127.0.0.0/8

ErrorDocument 403 /error/HTTP_XAMPP_FORBIDDEN.html.var

To This:
Order deny,allow

Allow from all

ErrorDocument 403 /error/HTTP_XAMPP_FORBIDDEN.html.var

Week 5: Accessibility

Introduction

Accessibility is a major issue throughout the world. People with special needs are always thought of when things are built, either it is a university or a bar, mobile phones and cars. 

User Accessibility

There's a certain legislation that one should provide a product/service which can be accessible by everyone. This is also true for websites, there are certain guidelines one can follow in order to develop the website in a way that it's accessible to everyone. 

In order to design a website for people wth special needs these methods can be used:

1. Text resizing.

2. Text equivalents(images - alt tags, long descs, title properies)

3. Not too much flash & Javascript

4. Less movement in the website or atlest provide a stop or pause button

5. Use colors with less contrast

Here's a list of tools one can use to test your website to check whether it is accessible by people with special needs:

1. Firefox Accessibility Extension

2. aDesigner

3. EvalAccess

My Thoughts
 After following a lecture on the subject, I realized that never before have I thought on user accessibility for people with special needs when developing a new project. Although my business sector may not be highly targeted at people with special needs, they still have the right to navigate through each and every website on the net without any problems. In my opinion, developers and companies don't take this much into consideration so they just make their website accessible for normal people. Since their are lots of websites out there and the majority of them wouldn't mind to even consider making adjustments, I thought that their should be some sort of software that does this on the client side. So I set myself to research some of these applications and to my surprise  what I came up with was nothing. After giving it some more thought though, such software would be quite complicated to develop because of the diversity of website templates out there.

Week 4 :XML, XSLT & RSS

Introduction

XML or Extensible markup language is a way of encoding documents in such a format that is platform independent. The fact is that it is widely used by different servers to connect and transfer data between each other. It has a lot of other uses such as backing up data. 

Document Type Definition

DTD is used to define the type of the particular document. Such a document should contain elements, attributes, entities, & notations used in the XML that this dtd is defining. In other words, the DTD sets the rules that the XML file must follow & in the case that the XML markup doesn't follow the rules, the XML file is tagged as invalid.

XML Schema Definition

This type of schema definition, does the same job as the previously mentioned DTD but it brings alot of advantages over the other schema languages, here is a list of such advantages:

• It's more direct - it doesn't require any intermediate processing using a parser.
• Auto schema creation
• It uses XML Format unlike other schema languages
• Can specify data types for attributes and elements

Here's an example of an XSD schema definition:


Schema Declaration:

<xsd:schema xmlns:xsd="http://www.w3.org/2001/XMLSchema">

Element:

<xsd:element name="Student"
                     minOccurs="0" 
                     maxOccurs="unbounded">

Attributes:

<xs:attribute name="myattribute" type="string"/>

XPath

Is used to define parts of an XML document and makes up a large part of an XSLT document. It also contains a set of functions to navigate an XML document and these could be found in XQuery and XPointer.

XSLT

Xslt is a document that defines styles for xml documents. For example one can convert an XML document into an XHTML one only with the use of XSLT.

TASK

The task for this week is to first write an XML document and test it in an XML validator which can be found here. So I set myself to write a short XML document which was tested in this validator, the test resulted in no errors. Here is a sample code of the XML document and a screenshot showing the testing process & result.

<?xml version="1.0"?>
<student id = "4343433M">
<name>Jack the ripper</name>
<project_title>Developement</project_title>
<category>PHP</category>
<abstract>Its a project</abstract>
<date_submitted>02-10-99</date_submitted>
</student>

The second task was to make our own DTD and validate the XML we created against it. As explained before, DTD sets the rule for the XML data provided and if the XML doesn't follow the rules set out in the DTD it will be tagged as invalid. Here's a screenshot of this test:

Week3: More Javascript

Introduction
The document object model(DOM) represents the interaction of objects in an html, xhtml or XML files. Using JavaScript one can access the DOM dynamically once the page is loaded. It helps developers extract pieces of data that can be used in order to carry out a process & it can also be used to validate user input. The possibilities are endless since the file can be manipulated as if you are editing it directly in a text editor.


DOM JavaScript Commands
Here's a list of commonly used commands to access the DOM of an xhtml element:

• document.cookie - Access the cookie
• document.getElementById("id") - Get a node object using its ID
• document.getElementById("id").innerHtml - Get the html of a node object using its ID
• document.URL - Get the full URL of the browser
• document.getElementsByTagName("input") - Retrieves all node objects with tag type specified.
• document.getElementById("frm1").submit() - Submit a Form object
• document.getElementById("id").style - Manipulate an element's style

DOM Traversing

Traversing the DOM means navigating the DOM & finding specific nodes. The DOM api gives us the node properties that we can use to retrieve any node we want. In order to navigate through a DOM one can use these api commands:

• Node.childNodes - Directly access the nodes of a single element. Gives you an array of nodes which one can loop throgh.
• Node.firstChild - Get the first child of a single node.
• Node.lastChild - Same as above but instead returns the last node.
• Node.parentNode - Gives you the enclosing node of this current node.
• Node.nextSibling - Retrieves the next node on the same level of this DOM element.
• Node.previousSibling - Same as above but gets the previous node.

Frameworks
In order to releive you from a lot of stress, there have been alot of development for javascript frameworks lately that would facilitate your life. Top rated javascript frameworks:Jquery,MooTools,Dojo,ExtJs, GWT(Google Web Toolkit), YUI. All are good frameworks but in my opinion Jquery is the best because it allows you to do lots with less coding. You could also find alot of ready made plugins for you and its really well documented. Jquery also comes with a UI library which helps you make transitions and animations in your web pages with not more than 5 lines of code.

Task - Coursework
The task this week was to develop a small animation using html, css & javascript which will also serve as the coursework of this sector. The objectives are to animate a man walking whilst the users have the command of slowing/agilitating the animation & throwing an object to the animation. Apart from that we were also asked to integrate something of our own. My feature was to enable the user to change the direction the man is walking, so the man in my animation can either go to the left or to the right. 

It was quite an easy task to develop but still, a bit time consuming without using any frameworks. The basic concept of the animation is to change one image constantly on the webpage to simulate such an animation and in my case change the css left/right position since the man also walks through the x-axis. A function then takes care of the movement and the speed using a timer.

The first problem I had was with the images, the sequence wasn't smooth since the character seems to be moving in vain (like walking on a treadmill or doing a moonwalk). I tried increasing the pace at which the character moves at every iteration but since in the images, small paces are made, this couldn't be made either. 
Another problem which I encountered is when I opened the document in Internet Explorer, here's a list of problems that occurred when the application was opened with Internet Explorer:

• Main Controls where not positioned correctly which indicates a CSS problem.
• The character wouldn't do any more animation after a few paces which indicates a JavaScript flaw.

 

Week2: Javascript

Introduction
Javascript is run on the client side. For this reason, the visitors using your website can easily open, analyze & even manipulate your script with the use of firebug or the url address bar. It's main use is to execute any type of code which one would want to make use of without reloading the web page. Web pages has developed over the years and have become more usable for the user. It is why most web developers use javascript in the first place. This is why it adds alot of functionality to a web page.

With the development of the methods, it has become an even more powerful tool, for example ajax allows a javascript script to request data from a server without refreshing the page and make it accessible to the client. Some recent ajax developments have allowed functions such as: autocomplete, updating data without refreshing a page, storing data in the database and many more.

Security
Since the javascript files are visible to the visitors, some may obfuscate their coding which scrambles all the human readable coding into alot of garbage which still works but hardly readable. Altough javascript is a very useful tool, one must not overdo javascript because of these reasons:People do navigate the web with javascript disabled,It slows your web page, makes your website more vulnerable.

Affect on web
With the use of javascript, most of the modern web sites substitute flash with javascript for obvious advantageous features especially SEO related.

Task
Our task today was to download an html page with a javascript integrated and do these tasks:
1. Change Style
2. Add More information
3. Apply a discount
4. add new feature
In the screenshot below, you can see the how the page changed with the new style and added information




Something new that I learned today is JsFiddle.net which is a nice online tool to manipulate html, Javascript and Css. The interesting thing is that it does this by allowing you to choose a Javascript framework, how cool is that?