Week 12

I choose ASDA website: http://www.asda.com

The structure is quite similar to all other websites, It has their logo on the upper left corner followed by the navigation bar and a search bar. Right under, we can find an advertisement space and then, some javascript code that enables some images to slide. The structure is quite simple, although the details make the overall website look quite good and professional.

After that we have clearly some articles, each containing a picture and some text, in this case links, next to it. After the gallery we have two pictures as links until finally we reach the footer, which appears in a different way than usual: is not entirely horizontal. This footer is followed by an Image of ASDA and finally a little footer with the Cookies information.

The website has a simple look, and the green and white style is very appropriate since those are the company colours. The evidence of HTML5 is not very visible, but there are rounded boxes in their site, which proves the use of the latest HTML version.

PHP is obviously used since, after we log in, our name appears written in the home page. Also, it is a website that needs to store large amounts of data about their products, and therefore, PHP or other similar language is used. Javascript is often used here mostly to make images slide.

Overall, is a very good website, with an easy to follow structure, and an excellent use of PHP. 

Week 11

This Week we were introduced to Java Script and some basic functions. The tutorial required the use of two:
One that will display a greeting depending on the time of the day and the second that would make some help text disappear when we put the mouse over it.
The second one was quite hard to achieve, and it took me more than  hour to make it work, but after the hard work comes the reward.


Here is the code that allowed me to do both functions:


function greeting()
{
var d = new Date()
var time = d.getHours()
if (time<12)
{
  document.write("<h1>Good morning</h1>");
}
else if (time>10 && time<17)
{
  document.write("<h1>Good afternoon</h1>");
}
else
{
  document.write("<h1>Good evening</h1>");
}
}



(...)



var defaulttext = "Enter your address here" ;
var areatext = "" ;
window.onload = init ;

function init()
{
if (!document.forms["payment"]) return; 
document.forms["payment"].elements["address"].value = defaulttext;
areatext = "" ;
}

function searchclear()
{
document.forms["payment"].
elements["address"].value = areatext ;
}

function searchpopulate()
{
areatext = document.forms["payment"].
elements["address"].value ;
}



My web site has some clear flaws due to the lack of imagination to write normal text, but, on the technical aspect, I have used everything that I learnt about HTML and not only, to personalise my pages. The outcome of the site does not look very professional, but it is functional with an easy navigation bar and a common style throughout the pages.

All pages were validated with 0 errors.

1202236.studentplus.abertay.ac.uk/Week100/Index.html

Week 10

Today we learnt about PHP. Is very useful to store data and retrieve it, instead of copying the same code over and over again, and this week we were asked to implement it in our web sites. What I did was create a HTML file of my header, another one of my navigation bar and a third one of my footer, and then, I changed all my pages to .php.

Here is the PHP code I have in one of the pages:



<?php include_once("header.html") ; ?>
<?php include_once("nav.html") ; ?>
<?php include_once("footer.html") ; ?>



Then, in my Reply page, I have something like this:




            <?php
            echo "<p>" ;
            echo "name : ".$_POST["name"] ;
            echo "</p>" ;
            
            echo "<p>" ;
            echo "e-mail : ".$_POST["email"] ;
            echo "</p>" ;
            
            echo "<p>" ;
            echo "address : ".$_POST["address"] ;
            echo "</p>" ;

echo "<p>" ;
            echo "postcode : ".$_POST["postcode"] ;
            echo "</p>" ;

echo "<p>" ;
            echo "country : ".$_POST["country"] ;
            echo "</p>" ;
            
            ?>



Is a very useful feature, since it allows to save much time copying and it makes the process of changing a detail in the header for instance much easier and efficient. My Reply page:

1202236.studentplus.abertay.ac.uk/Week100/Index.html

Week 09

Week 9 is about forms. These are nowadays one of the most important uses of internet, and today, we learnt   how to design a simple one with the <form> tag, as well as some others, for example:
<fieldset> ; which will create a field set.
<legend> ; inside of the fieldset we need a tittle
<label> ; and then we need a label which is what do we want the user to input
<input> ; well, this one will define the input, if it is in text or numbers, and it has other numerous possible attributes, as placeholder and required among others.

Here is some of those tags being used:



<form name="payment" action="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi" method="post" id="payment">
<fieldset class=fix>
<legend>Personal Details</legend>
<ol>
<li>
<label for="name">Name?</label>
<input id="name" name="name" type="text" placeholder="Full name" required="required" autofocus="autofocus">
</li>



The for was particularly difficult to make, because with so many different tags, ones inside of others, the CSS took me quite a lot of time, but in the end, everything worked out as planned. I used the counter example given by the teacher which I though it was an interesting feature.



 fieldset.fix > legend:before { content: counter(fieldset) ". ";
counter-increment: fieldset;
}



The CSS page for this week is quite long, so I will just copy some parts:



form#payment fieldset fieldset legend { color: #111111;
font-size: 29px;
font-weight: normal;
}

form#payment ol li { background: #000000;
background: rgba(255,255,255,.3);
border-color: #000000;
border-color: rgba(255,255,255,.6);
border-style: solid;
border-width: 2px;
border-radius: 5px;
line-height: 30px;
list-style: none;
padding: 5px 10px;
margin-bottom: 2px;
}

form#payment ol ol li { background: none;
border: none;
}



(...)



form#payment input:not([type=radio]),

form#payment textarea { background: #ffffff;
border: none;
border-radius: 3px;
outline: none;
padding: 5px;
width: 310px;
}

form#payment input:not([type=submit]):focus,

form#payment textarea:focus { background: #eaeaea;}

form#payment input[type=radio] { margin-right: 5px;}




In the end, this is how it looks the Contact Us page:

I had some problems with the validator this time, because I discovered that I cannot include <p> or <br /> inside an ordered list. I was using this method to space between the lines, but the validator interpreted as an error, and so, they were removed. I used margin-bottom instead to make the margins. In the end: 0 errors.


http://1202236.studentplus.abertay.ac.uk/Index/Index.html