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

Week 08

This week's tutorial is focused on putting everything together in a actual Site, most of this is already done in the last week. I have change the design of the logo and the navigation bar, I also changed the font and improved the "boxes" because some of them would not work on some browsers the way I wanted. Here is some code that links the pages:





<nav id="navegacao">
<div id = "dropbox1">
Cables
<ul class="clearfix">
<li><a href="http://1202236.studentplus.abertay.ac.uk/Week100/Home/MovicelHome.html">Home</a></li>
<li><a href="http://1202236.studentplus.abertay.ac.uk/Week100/Error/UnderConstruction.html">About Us</a></li>
<li><a href="http://1202236.studentplus.abertay.ac.uk/Week100/Error/UnderConstruction.html">Contact Us</a></li>

</ul>
</div>

<div id = "dropbox2">
Equipment
<ul class="clearfix">
<li><a href="http://1202236.studentplus.abertay.ac.uk/Week100/Error/UnderConstruction.html">Mobile phones</a></li>
<li><a href="http://1202236.studentplus.abertay.ac.uk/Week100/Error/UnderConstruction.html">Computers</a></li>
<li><a href="http://1202236.studentplus.abertay.ac.uk/Week100/Error/UnderConstruction.html">Tablets</a></li>
<li><a href="http://1202236.studentplus.abertay.ac.uk/Week100/Error/UnderConstruction.html">Hard Drives</a></li>
<li><a href="http://1202236.studentplus.abertay.ac.uk/Week100/Gallery/MovicelGallery.html">Cables</a></li>
</ul>
</div>
</nav>




Most of the pages still lead to a "Under Construction" Page, but I am currently working on creating more pages to link them to. Another detail is that I decided to call the folder Week 100 because I can no longer separate and create new web pages for each week. Instead I am just improving the old one with the new features, so the folder is the same. The header, navigation bar, and footer all look the same.

Another detail is the logo. I actually change the image of the logo to a blue background to match we color design of the web page, but the actual logo background is red, so I used Paint to paint all the background. I rather boring and time consuming detail, but in the end it is just how expected.

Al the pages went through the Validator and all of them came out with 0 errors.

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

Week 07

We are already in Week 7 and our Web pages are starting to look like a real one. This week, our task was to link the Web pages together in order to start building a Web site, as well as adding a drop down menu in our links. It is a rather important mark today to link all Web pages in one big Web site.

Here is some of the code that allowed us to do that:



<nav id="navegacao">
<div id = "dropbox1">
Home
<ul class="clearfix">
<li><a href="http://1202236.studentplus.abertay.ac.uk/Week07/About/AboutUs.html">About Us</a></li>
<li><a href="http://1202236.studentplus.abertay.ac.uk/Week07/Contact/ContactUs.html">Contact Us</a></li>
<ul>
</div>

<div id = "dropbox2">
Equipment
<ul class="clearfix">
<li><a href="http://1202236.studentplus.abertay.ac.uk/Week07/Error/UnderConstruction.html">Mobile phones</a></li>
<li><a href="http://1202236.studentplus.abertay.ac.uk/Week07/Error/UnderConstruction.html">Computers</a></li>
<li><a href="http://1202236.studentplus.abertay.ac.uk/Week07/Error/UnderConstruction.html">Tablets</a></li>
<li><a href="http://1202236.studentplus.abertay.ac.uk/Week07/Error/UnderConstruction.html">Hard Drives</a></li>
<li><a href="http://1202236.studentplus.abertay.ac.uk/Week06/MovicelGallery.html">Cables</a></li>
<ul>
</div>
</nav>


These are 2 div tags inside the navigation bar and each one of them as it's own drop down menu. I tried to create a class instead of 2 different ID's with rather similar styling, but it did not work for one simple reason: although the colors and styling are the same, the drop down box has to "drop" under each link, meaning it will drop in different places if we put the mouse over the first link or the second, and that detail prevented me to use a class.

Some CSS3 code:



#dropbox1{ border: 2px solid #004C67 ;
background-color:  #5095C9 ;
margin : 2px 20px 0px 20px ;
padding: 5px 20px 5px 20px;
border-radius: 5px;
display: inline;}

#dropbox1 ul{         list-style-type : none ;
display: none;
margin-top: 8px;
margin-left: 16px;
padding : 10px;
float: left;
position: absolute}

#dropbox1:hover ul {display:block;}


I currently have the "Home" page, the "Cable Section" (gallery) page, and an "Under Construction" page. All of these pages are link together, and all of them have a navigation bar so the user has total freedom to navigate through the website, even if there is not much to see for now. I spent part of this week also working on the header, making it the exact same size in all pages and the navigation bar the same. When browsing through the pages those two boxes are exactly in the same place, making it easier to understand where exactly we are on the Web site, and how to go move to another page:



#cabeca { background-color: #A7E8FF ;
margin : auto ;
padding: 10px;
border-radius: 10px;
border : 2px solid #004C67 ;
color : #004C67 ;
text-align: center;
width: 1310px;
height: 150px
                }

In order to be the same, these two properties were made constant throughout the styling pages.
Here are some screenshots:

All HTML files were checked for Errors in the Validator and, as expected, 0 errors.

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

Week 06

In week 6 we had a overall revision of all previous week, including the <figure> tag. We were asked to write a web page in a gallery format containing 9 or more images, using the template given. To position the images in the desire place was a quite a challenging task, but in the end everything was as expected.


<section id="seccao">

<figure class="imagem">
<img src="http://1202236.studentplus.abertay.ac.uk/Week06/cable1.jpg" alt="Ethernet Cable" />
<figcaption>Ethernet Cables</figcaption>
</figure>

<figure class="imagem">
<img src="http://1202236.studentplus.abertay.ac.uk/Week06/cable2.jpg" alt="Earphone Extension Cable" />
<figcaption>Earphone Cables</figcaption>
</figure>

(...)


<figure class="imagem">
<img src="http://1202236.studentplus.abertay.ac.uk/Week06/cable12.jpg" alt="Jumper Cable" />
<figcaption>Car Cables</figcaption>
</figure>

</section>

The HTML file passed in the validator with 0 errors.

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

http://1202236.studentplus.abertay.ac.uk/Week06/MovicelGallery.html      -----   Week 06