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

Week 05

In this week, we basically learned how to position things instead of the default way of top to bottom. Is very useful to make our aside or to put an image in the left of the web page as a logo. the "text-alignment" tag is also very useful, as it allowed me to put the tittle in the middle of the page instead of being on the standard left side. This week, I almost did not change the actual HTML file, since the CSS positioning relies mostly on the style sheet.

here is some of the new code I used in the style sheet to improve the web page:


#cabeca img    { width: 194.1px;
                          height: 140.1px;
                          float: left;}

(...)

#cabeca h1     { color: #004C67 ;
                         font-family: "Comic", cursive, sans;
                         text-align: center;}
(...)

#rodape1        { background-color: #A7E8FF ;
                          color : #004C67 ;
                          margin : auto ;
                          margin-top: 20px;
                          border : 2px solid #004C67 ;
                          border-radius: 10px;
                          width : 97.25%%;
                          padding : 10px ;
                          font-family: "Comic", cursive, sans;
                          float: left;}



I forgot to mention in last week's post, that I am using some strange id's for the HTML tags, like "cabeca", "rodape", or "lado". These are Portuguese words, because I find a little hard to come up with a good id for <header> besides "header" or "heading", so I tried to translate it into Portuguese, my main language.

This is the translation:
Cabeça = head
Navegação = navigation
Secção = section
Rodapé = footer
Lado = side
I hope there is no problem with these id's.

The aside was very troublesome. In the beginning, I set the width of the Contacts box to 97.5% to match the other boxes in the right end of the page, and I put: "float: right;" to make the box go right. When I tested it on my Opera browser, everything was fine, as shown in the picture, until I tested it in my friend's browser (Google chrome). In his computer, the browser completely ignored the "float: right" tag. I took some hours to discover that all browsers, except Opera, will ignore the float: when we define a specific width. I just had to delete the width in the contacts box to make it work in all other browsers, including mobile phones.



#lado        { background-color: #A7E8FF ;
                   color : #004C67 ;
                   margin-top: 20px;
                   border : 2px solid #004C67 ;
                   border-radius: 10px;
                   padding : 10px ;
                   /* width: 97.5%; */
                   font-family: "Comic", cursive, sans;
                   float: right;}



The HTML file has passed with no Errors in the validator.


http://1202236.studentplus.abertay.ac.uk/Week05/Movicel2.html

Week 04

In this week we learned how to structure our web page using some HTML5 new tags, like:
<header> ; <footer> ; <aside> ; <section> ; <article> ; <figure> and <navigation>.
We were asked to structure our web page using some of these tags so we can have more control over where to put things and divide the web page in logical sections.

These are just some of the tags that I used in my code:

<header id="cabeca">

<img src="blue.jpg" alt="movicel logo"/>

<h1>Movicel</h1>

<h2>Closer to you</h2>

</header>

(...)

<nav id="navegacao">

<a href="http://movicel.co.ao">Mobile phones</a>
<a href="http://movicel.co.ao">Computers</a>
<a href="http://movicel.co.ao">Tablets</a>
<a href="http://movicel.co.ao">Hard Drives</a>
<a href="http://movicel.co.ao">Cables</a>

</nav>

(...)

<section id="seccao">

<p>Movicel is a world-wide company that has set its goals in selling the best technological articles currently avaiable in the market
This page is still under construction, but we promise that in the future, you will be able to purchase, pre-order, or just have a look at our top quality products.</p>

</section>

(...)


And here is some parts of my style sheet:



#cabeca{    background-color: #A7E8FF ;
                  margin : auto ;
                  padding: 10px;
                  border-radius: 10px;
                  border : 2px solid #004C67 ;
                  color : #004C67 ;}

#cabeca img{      width: 194.1px;
                           height: 140.1px;}

#cabeca h1{        color: #004C67 ;
                           font-family: "Comic", cursive, sans;}

#cabeca h2{        color: #004C67 ;
                           font-family: "Comic", cursive, sans;}

(...)

#navegacao{       font-family: "Comic", cursive, sans;
                           background-color: #A7E8FF ;
                           margin : auto ;
                           margin-top: 10px;
                           padding: 10px;
                           border-radius: 10px;
                           border : 2px solid #004C67 ;
                           color : #004C67 ;
                           width : 98.1%;}

#navegacao a:link {        color:#004C67;
                                      padding: 0 20px;}
#navegacao a:visited {    color:#004C67;
                                      padding: 0 20px;}
#navegacao a:hover {     color:#FF0000 ;
                                      padding: 0 20px;}
#navegacao a:active {     color:#E24D08;
                                      padding: 0 20px;}

(...)


The content of the web page is quite poor because I focused more on playing with the style sheet and choosing the colors for the background, borders and text. Initially, it was red, and then green, but in the end I decided to go for the blue style. The structure of it is from top to bottom, but I hope next week I can learn how to move things to the sides and how to move the text and images to put them side by side, like I planned with my heading:

Once again, the HTML file passed in the validator with 0 Errors.

http://1202236.studentplus.abertay.ac.uk/Week04/Movicel.html

Week 03

In this week, we are starting to style our web pages using CSS3. So far we have learned simple styling techniques as changing the font, moving the text to left middle or right, or changing the colour of the background. We also started to use the <div> tag, which allowed us to style our pages much easier and with control of what chunk we are styling.
My web page is basically the same as the one in week 2, or at least the information displayed. The only change I made was styling it a bit.



<!doctype html>
<html>
<head>
<title>Table Tennis</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style3.css" />

</head>
<body>

<div id="intro" >
<h1>Table tennis</h1>

<img src="TableTennis.jpg" alt="TableTennis" width="200" height="200"/>

<p>Table tennis originated in Britain around 1880's as a high-class game, played with books as net and as rackets and with a golf ball. As the years passed, this sport grew in popularity and in 1988 was considered an Olympic sport in the 1988 Olympics in South Korea.</p>

<p>The ball has to weight about 2.7 grams, and have the exact diameter of 40 mm to follow the International Table Tennis Federation rules. It also has to bounce up between 24 to 26 cm when dropped on a steel block from a 30.5 cm height, meaning that its coefficient of restitution is about 0.89 to 0.92. The rackets do not have much restricted rules, as long as at least 85% of it is made of wood, and it has two different sides, each one coloured in red and black. This allows the opponent to know what type of hit is going to recieve as they have the opportunity to inspect eachothers rackets before a match.</p>
</div>

<div id="table" >
<h2>Table information</h2>
<table>
<tr>
<th>Lenght</th>
<th>Width</th>
<th>Height</th>
<th>Net Height</th>
</tr>
<tr>
<td>2.74 m</td>
<td>1.52 m</td>
<td>0.76 m</td>
<td>0.15 m</td>
</tr>
</table>
</div>

<div id="references" >
<h2>References</h2>
<ul><li><a href="http://en.wikipedia.org/wiki/Table_tennis">Wikipedia</a></li></ul>
</div>

</Body>
</html>


And here is the style code:



body {
background-color: #E1EDFF;
text-align : left ;
font-family: Comic Sans, arial, helvetica, sans-serif ;
color: #02456D;
font-size : 1.0em ;
}
h1 {
font-size : 2em ;
font-family: Comic Sans, arial, helvetica, sans-serif ;
font-weight : bold ;
text-align : center ;
}
h2 {
font-size : 1.8em ;
font-family: Comic Sans, arial, helvetica, sans-serif ;
font-weight : bold ;
text-align : center ;
}

a { text-decoration: none; }
td,th { vertical-align : bottom ; }

#intro
{
background-color: #E1FFE3 ;
margin : 20px ;
border : 3px solid #000000 ;
border-radius : 20px ;
padding : 10px ;
width : 100%;
color : #057B05 ;
}

#table
{
background-color: #E1FFE3 ;
margin : 20px ;
border : 3px solid #000000 ;
border-radius : 20px ;
padding : 10px ;
width : 100%;
color : #057B05 ;
}

#references
{
background-color: #E1FFE3 ;
margin : 20px ;
border : 3px solid #000000 ;
border-radius : 20px ;
padding : 10px ;
width : 100%;
font-size : 1.0em ;
color : #057B05 ;
}
#references a:link {color:#2E54FF;}
#references a:visited {color:#2E54FF;}
#references a:hover {color:#FF1E1E ;
text-decoration : bold ; }
#references a:active {color:#FF1E1E;}




 It is a very simple styling, using the template given on the lecture, but I didn't want to put to much styling for now. I had some problems with the size of the page, as the browsers I tested, could not display the page completely in the screen, and I need to use the bottom scroll bar to see the right part of the web page, but besides that, everything is as expected. I keep changing the values and see how each one affects the page, the colours I got them from the web site given in the lecture and, once again, as expected, the page does not have errors.

Week 02

In this week, more tags were used to write a page about my interests, being the most significant one, the <table> tag, along with the <th>, <tr> and <td>. In this page, the topic was "Table Tennis" or, as it is commonly called: "Ping-Pong".
I have described quite shortly some history and used the <table> tag to describe the ping-pong table dimensions, it seemed appropriate.

My code is the following:



<!doctype html>
<html>
<head>
 <title>Table Tennis</title>
 <meta charset="utf-8" />
</head>
<body>
<h1>Table tennis</h1>
<img src="TableTennis.jpg" alt="TableTennis" width="100" height="100"/>
<p>Table tennis originated in Britain around 1880's as a high-class game, played with books as net and as rackets and with a golf ball. As the years passed, this sport grew in popularity and in 1988 was considered an Olympic sport in the 1988 Olympics in South Korea.</p>
<p>The ball has to weight about 2.7 grams, and have the exact diameter of 40 mm to follow the  International Table Tennis Federation rules. It also has to bounce up between 24 to 26 cm when dropped on a steel block from a 30.5 cm height, meaning that its coefficient of restitution is about 0.89 to 0.92. The rackets do not have much restricted rules, as long as at least 85% of it is made of wood, and it has two different sides, each one coloured in red and black. This allows the opponent to know what type of hit is going to receive as they have the opportunity to inspect each others rackets before a match.</p>
<h2>Table information</h2>
<table>
 <tr>
  <th>Lenght</th>
  <th>Width</th>
  <th>Height</th>
  <th>Net Height</th>
 </tr>
 <tr>
  <td>2.74 m</td>
  <td>1.52 m</td>
  <td>0.76 m</td>
  <td>0.15 m</td>
 </tr>
</table>
<h2>References</h2>
<ul><li><a href="http://en.wikipedia.org/wiki/Table_tennis">Wikipedia</a></li></ul>
</Body>
</html>


Once again, this code is quite simple and the topic is not fully explored, but, all the tags were used once again and the code works properly in the 5 browsers given. Important to notice that the validator evaluated this code with 0 errors. A print screen is below:

Week 01

This week, we had a lecture introducing us HTML, some of its history and the important rules to follow when writing it.
The tutorial part asked us to write a similar HTML page as the one that was given as example. We were required to introduce us in the page as well as using some tags for aid, for example:

Paragraph - <p> ..... </p>
Bullet point lists - <ul> <li>
Headings - <h1> <h2> etc...
Images - <img>

After I finish writing, the code was this:




<!doctype html>
<html>
<head>
<title>Antonio Figueiredo</title>
<meta charset="utf-8" />
</head>
<body>
<h1>Antonio Figueiredo</h1>

<p>Student from Abertay Dundee currentlty taking the "Ethical Hacking and Countermessures" course.</p>

<h2>Home country</h2>

<p>My nationality is Portuguese, as well as my first language, but that is not where I grew up. I have lived in Angola for many time, about 15 years, and is what I consider my home country. The country itself is quite bad for living if we look closer to the quality of life in Luanda, which is the capital.
Luanda was considered the most expensive city in the world two years in a row: 2010 and 2011. This simple fact proves that is not a very good country to reside, but that is not the worst of the problems. Some of them are these:</p>

<ul><li> Health facilities</li> 

<li>Saftey on the streets</li>

<li>Endless traffic </li></ul>

<h2>Academic past</h2>

<p> The teaching institution I chose to study is a Portuguese one, with exact correspondence with Portuguese education laws and obligations, which allowed me to apply for Abertay as a EU student. After finishing highschool, I studied one year in Cambridge as a foundation year, after which I applyied to Abertay University.</p>

<img src="Abertay.jpg" alt="Abertay" />

</Body>
</html>



It's a very short introduction, but all the tags required were used and, the final product is correct and working in the 5 browsers given. This code also passed the validation test with 0 errors and the final result is this: