Project 4 – Final Hand In

April 2, 2011 § Leave a comment

For this project’s final work we have to produce a web site for an event to show what we learnt during the course about web site production and we have to focus on web site elements like links, media, scripts and other web elements.

I chose to make a web site for an event called Emergenza Radio. It’s a streaming radio’s program, conducted by my friends in Rome, and it is on air every thursday.

The first step was to collect some pictures through the facebook’s group. With them I made a moodboard. I made the logo for them a couple of years ago.

Then I began to sketch something on my sketch book, and I made a graphic interface in Photoshop.


interface

I even made a layout scheme and a colour scheme in Photoshop.

After the work in Photoshop, I began to work with Dreamweaver. I made some video tutorials to help understanding how I worked in Dreamweaver but anyway I will post all the html and css code.

Layout Design

I began using a Dreamweaver CS4 template, it is easier and quicker and it gave me all the web page settings to start.

I made my layout adding more divs and I coloured them with different colurs to have an idea of what it will be.

Below a screengrab of the layout, you can see the different divs with different colours.

Now I began to give to the layout the colours and the image that I made before with Photosop.

Below a screengrab of the layout, you can see it is taking shape.

body  {
 margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
 padding: 0;
 text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
 color: #000000;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 100%;
 background-color: #666666;
 background-image: url(images/background-emergenza-radio.jpg);
 background-repeat: repeat;
}
.twoColFixRtHdr #container {
 width: 800px; /* the auto margins (in conjunction with a width) center the page */
 border: 1px solid #000000;
 text-align: left; /* this overrides the text-align: center on the body element. */
 margin-top: 0;
 margin-right: auto;
 margin-bottom: 0;
 margin-left: auto;
 position: relative;
 background-color: #000;
 color: #FFF;
}

I began to work on the different divs placing contents and pictures…

div #top

#top

<div id="top"><a href="http://www.fusoradio.net" target="_blank"><img src="images/logo-fusoradio.png" alt="icon-fusoradio" width="87" height="30" align="right" /></a><a href="http://www.myspace.com/otteruf" target="_blank"><img src="images/myspace_logo.png" alt="icon-my-space" width="30" height="30" align="right" /></a><a href="http://www.facebook.com" target="_blank"><img src="images/logo-facebook.png" alt="icon-facebook" width="30" height="29" align="right" /></a>
 <div id="followus">Follow Us</div>
 <a name="totop" id="totop"></a></div>
#top {
 height: 35px;
 padding-top: 5px;
 padding-right: 30px;
 font-size: small;
}
#followus {
 position: absolute;
 left: 541px;
 top: 16px;
}
.iconspace {
 margin-left: 5px;
}
img {
 border-top-style: none;
 border-right-style: none;
 border-bottom-style: none;
 border-left-style: none;
}

div #header

header

<div id="header">
 <div id="everythu"><a href="http://www.fusoradio.net" target="_blank"><img src="images/emergenza-radio-on-lin-on-f.png" width="187" height="122" alt="emergenza-radio-on-line" /></a></div>
 <!-- end #header -->
 </div>
.twoColFixRtHdr #header {
 height: 375px;
 background-image: url(images/emrgenza-radio-header-logo.jpg);
}
#everythu {
 width: 200px;
 position: absolute;
 left: 11px;
 top: 242px;
}

div #navbar

navbar

<div id="navbar"><a name="homepage" id="homepage"></a><a href="#homepage">Home</a> | <a href="#">About</a> | <a href="#">Contact</a> | <a href="http://www.fusoradio.net">Fusoradio</a></div>
#navbar {
 font-family: MyUnderwoodRegular, Verdana, Geneva, sans-serif;
 background-color: #eace01;
 height: 25px;
 font-size: 20px;
 font-weight: 500;
 letter-spacing: 3px;
 text-align: right;
 color: #000;
 padding-top: 10px;
 padding-right: 30px;
}
@font-face {
 font-family: 'MyUnderwoodRegular';
 src: url('font/MyUnderwood-webfont.eot');
 src: url('font/MyUnderwood-webfont.eot?iefix') format('eot'),
 url('font/MyUnderwood-webfont.woff') format('woff'),
 url('font/MyUnderwood-webfont.ttf') format('truetype'),
 url('font/MyUnderwood-webfont.svg#webfontTjpwvVPS') format('svg');
 font-weight: normal;
 font-style: normal;
}
a:link {
 color: #000;
 text-decoration: none;
}
a:visited {
 text-decoration: none;
 color: #000;
}
a:hover {
 text-decoration: none;
 color: #900;
}
a:active {
 text-decoration: none;
 color: #000;
}

div #sidebar

sidebar

<div id="sidebar1">
 <h3><img src="images/every-thu.png" width="227" height="56" alt="every-thu-emergenza-radio" /></h3>
 <div>
 <h3><a href="http://www.fusoradio.net/radio/ascolta.asp" target="_blank">Listen live</a></h3>
 </div>
 <div>
 <h3><a href="http://www.fusoradio.net/radio/ascolta_trasmissioni.asp" target="_blank">Listen Poadcast</a></h3>
 </div>
 <!-- end #sidebar1 -->
 </div>
.twoColFixRtHdr #sidebar1 {
 float: left; /* since this element is floated, a width must be given */
 width: 220px;
 padding-top: 21px;
 padding-right: 7px;
 text-align: right;
}
.classlink a:link{
 color:#FFF;
 text-decoration:underline;
}
.classlink a:visited{
 color:#FFF;
 text-decoration:underline;
}
.classlink a:active{
 color:#FFF;
 text-decoration:underline;
}
.classlink a:hover{
 color:#CCC;
 text-decoration:underline;
}

div #main content

main content

<div id="mainContent">
 <h1>
 NEXT EPISODE OF EMERGENZA RADIO </h1>
 <h2>THURSDAY 3RD FEBRUARY</h2>
 <div>
 <div>
 <p><img src="images/thu-3-feb-fly.jpg" alt="fly-emergenza-radio" width="204" height="187" align="left" />Emergenza Radio has selected <br />
 5 Rock bands for the next episode:<br />
 <br />
 L' Officina della Camomilla<br />
 Lola and the Lovers<br />
 Megaride<br />
 Rito Pagano<br />
 Rockazzi<br />
 <br />
 <a href="#" target="_blank">Listen episode</a><br />
 <br />
 <a href="#totop">Back to the top</a></p>
 </div>
 </div>
 <div> </div>
 <h2>THURSDAY 20TH JANUARY</h2>
 <p><img src="images/thu-20-jan-fly.jpg" alt="fly-emergenza-radio" width="205" height="242" align="left" />Emergenza Radio has selected<br />
 6 Rap bands for the next episode:<br />
 Esa<br />
 Ill Nano<br />
 Willy Valanga<br />
 Tejaman<br />
 JunglaBeat<br />
 Don Diegoh</p>
 <div>
 <p><a href="#" target="_blank">Listen episode</a></p>
 </div>
 <div>
 <p><a href="#totop" target="_blank">Back to the top</a></p>
 </div>
 <p>&nbsp;</p><!-- end #mainContent -->
 </div>
.twoColFixRtHdr #mainContent {
 float: left;
 width: 430px;
 margin-left: 20px;
 padding-top: 25px;
 padding-right: 3px;
 padding-left: 2px;
}
p {
 text-align: right;
 font-size: small;
}
h1 {
 font-size: 19px;
}
h2 {
 font-size: 14px;
}
.imagespace {
 margin-bottom: 10px;
 margin-right: 10px;
}

some graphic details in the navigation bar

graphic details

<div class="arrow"></div>
 <div id="stars"></div>
 <div id="splash"></div>
#splash {
 background-image: url(images/splash.png);
 height: 150px;
 width: 88px;
 position: absolute;
 left: -59px;
 top: 408px;
}
#stars {
 background-image: url(images/stelle.png);
 height: 57px;
 width: 67px;
 position: absolute;
 left: 754px;
 top: 444px;
}
.arrow {
 background-image: url(images/arrow-yellow-nav-bar.png);
 height: 27px;
 width: 42px;
 position: absolute;
 left: 307px;
 top: 449px;
}

anchors and java script “smooth scroller”

<head>
 <script language="javascript" src="js/smooth-src-comments.js"></script>
 <script language="javascript" src="js/smooth.pack.js"></script>
 </head>
 <a name="totop" id="totop"></a>
 <a name="homepage" id="homepage"></a>

div #footer

footer

<div id="footer">
 <p>© 2011 Emergenza Radio - Design by Giorgio Scappaticcio</p>
 <!-- end #footer -->
 </div>
.twoColFixRtHdr #footer {
 padding: 0 10px 0 20px;
 background-color: #eace01;
}
.twoColFixRtHdr #footer p {
 margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
 padding: 10px 0;
 color: #000;
 text-align: left;
}

Ok now the page Home is finished, the post will continue with the About and Contact pages design…

Advertisements

Project 4 – Workshop 3

March 15, 2011 § Leave a comment

In this workshop we learnt to use AP divs, below an example of web page that I made to show how they work:
The same example in Dreamweaver:

I wrote in red the AP div's names, to help understanding how the page is set up

Below I posted the HTML code of the page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="styles.css" rel="stylesheet" type="text/css" /></head>

<body>
<div id="wrapper">
 <div id="logo"></div>
 <div id="content">
 <div id="textcontent">This workshop is about AP Divs and elements. This AP Div has an absolute position.</div>
 <div id="navbar"> <a href="#">home</a> / <a href="#">about</a> / <a href="#">contact </a></div>
 </div>
 <div id="sidebar">
 <h2>News</h2>
 <p><span>Wed 2nd February</span><br />
 Today we are studing about AP elements and Divs</p>
</div>
 <div id="footer">2011 Copyright / Web Design Course / Brighton &amp; Hove City College</div>
</div>

</body>
</html>

and the CSS:

@charset "UTF-8";
body {
 background-image: url(images/wood-pattern-background.jpg);
 background-repeat: repeat;
}
.centertext {
 text-align: center;
}
.textorange {
 color: #FFF;
}
#textcontent {
 position: absolute;
 width: 200px;
 left: 26px;
 top: 74px;
}
#navbar {
 position:absolute;
 left:368px;
 top:32px;
 width:224px;
 height:30px;
 z-index:3;
 font-family: Verdana, Geneva, sans-serif;
 font-size: 16px;
}
#logo {
 height: 129px;
 position: absolute;
 z-index: 100;
 left: 51px;
 top: 47px;
 background-image: url(images/ap-element-workshop.png);
 width: 482px;
 background-repeat: no-repeat;
}
#content {
 position:absolute;
 left:28px;
 top:150px;
 width:653px;
 height:504px;
 z-index:2;
 background-image: url(images/Moleskine_inside_view.png);
 background-repeat: no-repeat;
}
#sidebar {
 position:absolute;
 left:678px;
 top:155px;
 width:192px;
 height:497px;
 z-index:3;
 background-image: url(images/sidebar-back-pen.png);
 padding-right: 5px;
 padding-left: 5px;
 background-repeat: no-repeat;
}
#footer {
 position:absolute;
 left:23px;
 top:647px;
 width:856px;
 height:58px;
 z-index:4;
 padding-top: 10px;
 padding-right: 5px;
 padding-bottom: 5px;
 padding-left: 25px;
 color: #FFF;
 font-size: 14px;
}
#wrapper {
 width: 990px;
 margin-top: 0px;
 margin-right: auto;
 margin-bottom: 0px;
 margin-left: auto;
 position: relative;
 top: 0px;
 bottom: 0px;
}
a:link {
 color: #000;
 text-decoration: none;
}
a:visited {
 text-decoration: none;
 color: #000;
}
a:hover {
 text-decoration: underline;
 color: #E19500;
}
a:active {
 text-decoration: none;
 color: #000;
}

You can see the div #wrapper has a position “relative” and the other divs have a position “absolute”

Project 4 – Workshop 2

March 15, 2011 § Leave a comment

In this workshop we learnt how to create anchor and even how to insert javascript and interactive media.

In the example below we created some links and anchors and we link each other to go through the link in a different part of the web page and then we added a javascript to give to the scroll a dynamic effect.

Below is how the anchor appears in the code:

<a name="top" id="top"></a>

This below is how the web page turns up in the browser:
Then we added a script in the tag “head”, it is called “smooth scroll”. Below the piece of code that we added:

<script language="javascript" src="js/smooth-src-comments.js"></script>
<script language="javascript" src="js/smooth.pack.js"></script>

In the same day we also learnt how to place interactive media as flash videos, and links to email and to medias as youtube, and even links to pdf or mp3 files.

Below an example about what we did:
You can see underneath the header I put a flash video, it is a “.swf” file.
This is how it appears in the HTML code:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="777" height="210" id="FlashID" title="kayek">
 <param name="movie" value="media/kayaksnew.swf" />
 <param name="quality" value="high" />
 <param name="wmode" value="opaque" />
 <param name="swfversion" value="6.0.65.0" />
 <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
 <param name="expressinstall" value="Scripts/expressInstall.swf" />
 <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
 <!--[if !IE]>-->
 <object type="application/x-shockwave-flash" data="media/kayaksnew.swf" width="777" height="210">
 <!--<![endif]-->
 <param name="quality" value="high" />
 <param name="wmode" value="opaque" />
 <param name="swfversion" value="6.0.65.0" />
 <param name="expressinstall" value="Scripts/expressInstall.swf" />
 <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
 <div>
 <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
 <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
 </div>
 <!--[if !IE]>-->
 </object>
 <!--<![endif]-->
 </object>

Below the example of links to external web page and e-mail
This how they become visible in the HTML code:

<a href="mailto:ooohh1@hotmail.it">Email us for more information </a>
 <a href="http://www.perception.co.uk/pages/index/homepage" target="_blank">Visit our sister website</a>

You cannot see the e-mail because it was encrypted

Below an example of link to PDF file and MP3 file:
This is how they become visible in the HTML code:

<a href="media/perception_brochure.pdf">Download our spec here </a>
 <a href="media/river-6.mp3">Listen our MP3</a>

Then we added a link to a Youtube’s video, it’s very easy you go on Youtube, choose the video that you like and go on embed, it will give you the code to past in the HTML code in the position that you prefer:

<iframe title="YouTube video player" width="425" height="349" src="http://www.youtube.com/embed/KWlwQll1eU0" frameborder="0" allowfullscreen></iframe>

Project 4 – Workshop 1

March 15, 2011 § Leave a comment

In this workshop we started to design real web pages, with a Dreamweaver template we learnt how to add different HTML elements (images, headings, paragraph, meta tags, and links) to a web page and how to set them with CSS. We began to use divs and positioning them with id and class CSS.

My web site is about a web agency in Brighton, it’s no real, I called it Surf Web design Brighton.

Below a snapshot of the page

Below I posted the HTML page code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Surf Web Design in Brighton = Web Designers and Developers based in Sussex</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<meta name="Keywords" content="Web Design Brighton, web development based in Brighton, Surf Web Design, SEO, web agency, web Design Sussex, web services" />
<meta name="Description" content="Get the best web design in Brighton and Sussex at low cost. Surf Web Design Brighton is even Web development and SEO optimization. Web designers and developers will help you to have success on internet." />
</head>

<body>

<div id="container">
 <div id="header">
 <h1>&nbsp;</h1>
 <!-- end #header -->
 </div>
 <div id="whitestripe"></div>
 <div id="navbar"><a href="index.html">Home</a> | <a href="about-surf-web-design.html">About</a> | <a href="portfolio-surf-web-design.html">Portfolio</a> | <a href="contact-surf-web-design.html">Contact</a></div>
 <div id="sidebar1">
 <h3>News</h3>
 <p2>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the left side of the #mainContent div if it will always contain more content. </p2>
 <p2></p2>
 <!-- end #sidebar1 --></div>
 <div id="mainContent">
 <h1> Surf Web Design in Brighton</h1>
 <p><img src="images/webdesign - img1.jpg" alt="web-design-brighton" width="237" height="157" align="left" />We offer you the best web design and development in Brighton and Sussex at very low cost, and SEO optimization for your success on internet. <br />
 </p>
 <h2>&nbsp;</h2>
 <h2>&nbsp;</h2>
 <h2>&nbsp;</h2>
 <h2>Try Surf Web Design Brighton</h2>
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. </p>
 <!-- end #mainContent --></div>
 <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br />
 <div id="whitestripe"></div>
 <div id="footer">
 <p1> &copy; 2011 Copyright Surf Web Design </p1>
 </div>
<!-- end #container --></div>
</body>
</html>

and CSS code:

@charset "UTF-8";
body  {
 margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
 padding: 0;
 text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
 color: #000000;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 100%;
 background-color: #FFF;
 background-image: none;
}
.twoColFixLtHdr #container {
 width: 960px; /* the auto margins (in conjunction with a width) center the page */
 border: thin none #000000;
 text-align: left; /* this overrides the text-align: center on the body element. */
 margin-top: 0;
 margin-right: auto;
 margin-bottom: 0;
 margin-left: auto;
 background-color: #FFFFFF;
 background-image: url(images/surf-web-design-background-.jpg);
 background-repeat: repeat-y;
}
p1 {
 color: #FFF;
 font-size: small;
 font-family: Verdana, Geneva, sans-serif;
}
.twoColFixLtHdr #header {
 background-color: #DDDDDD;
 background-image: url(images/surf-web-design-header.jpg);
 height: 150px;
 padding-top: 0;
 padding-right: 10px;
 padding-bottom: 0;
 padding-left: 20px;
}
#navbar {
 background-color: #319bc3;
 height: 25px;
 padding-left: 650px;
 padding-top: 10px;
}
h1 , h2{
 font-family: Georgia, "Times New Roman", Times, serif;
 color: #006287;
}
h3 {
 color: #FFF;
}
p2 {
 font-family: Verdana, Geneva, sans-serif;
 font-size: 12px;
}
p {
 font-size: 12px;
 color: #000;
 font-family: Verdana, Geneva, sans-serif;
}
#whitestripe {
 background-color: #FFF;
 height: 3px;
}
.imageleft {
 margin-right: 5px;
 margin-bottom: 5px;
}
.twoColFixLtHdr #header h1 {
 margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
 padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
.twoColFixLtHdr #sidebar1 {
 float: left; /* since this element is floated, a width must be given */
 width: 200px; /* the background color will be displayed for the length of the content in the column, but no further */
 padding: 15px 10px 15px 20px;
}
.twoColFixLtHdr #mainContent {
 margin: 0 0 0 250px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
 padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
}
.twoColFixLtHdr #footer {
 background-color: #319bc3;
 height: 30px;
 padding-top: 5px;
 padding-right: 10px;
 padding-bottom: 0;
 padding-left: 20px;
}
.twoColFixLtHdr #footer p {
 margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
 padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
 float: right;
 margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
 float: left;
 margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
 clear:both;
 height:0;
 font-size: 1px;
 line-height: 0px;
}a:link {
 color: #FFF;
 text-decoration: none;
}
a:visited {
 text-decoration: none;
 color: #FFF;
}
a:hover {
 text-decoration: underline;
 color: #FF0;
}
a:active {
 text-decoration: none;
 color: #FFF;
}

Project 4 – SEO Workshop

March 15, 2011 § Leave a comment

I wrote on Google “web design in Brighton” and below you can see the first five websites in the result:

1) www.alpha-net.co.uk (web site grade 90 on websitegrader.com)

Page title = Web Design Brighton + Web Development Brighton = Alphanet
Meta Description
= Web Design & Web Development for companies who want a website and marketing that hits the ground running.
Keywords = web design brighton, web development brighton
H1 = Alphanet – Brighton Web Design Company
H2 =
It is an image where they specified the alt text (Brighton web design company offers a fast, friendly and professional service)
First 20 words =
The web design and marketing offered by Alphanet has been quoted by some of our clients as “A truly outstanding
Images Alt Text = Client testimonials / Web Designers in Brighton Map LocationBrighton, /Web design, web development and marketing services / STOP losing out to your competitors on google? register here for a FREE marketing consultation / Call us on 01273 573845 / Graphic design Services / Contact Us / Web design services / read more web design testimonials / How alphanet can help you… / Brighton Webdesign Services Rock / looking for a web design company in brighton then call us on 01273 573845call us on / Alphanet Web design Brighton / Call us now to find out how we can help you / Web Marketing Services / SEO and PPC / Brighton web design company offers a fast, friendly and professional service / Here’s why we stand out…

2) www.bozboz.co.uk (web site grade 81 on websitegrader.com)

Page title = Web Design Brighton | Web Design Agency | Graphic Design Brighton
Meta Description =
Web design Brighton. Specialists in web design, SEO, flash website development, php development and flash actionscript development. We offer bespoke web design services to suit many budgets
Keywords =
web design Brighton, web agency, web design agency, Digital agency Brighton, web standards, web designer based in Brighton, web development, flash development, actionscript development, bozboz, graphic design
H1 = Web Design Brighton / Creative Web Agency / Ecommerce Web Design /CMS Development / Graphic Design
H2 =
Next level Websites / Variety of options / Search Engine Friendly / Proven Track Record / Custom Coding / Custom CMS / CMS Features / Whatever You Need / Design Services / SEO Brighton / Natural Serach / SEO Services / Internet Marketing / Email Marketing / Full Service Digital Agency /

3) www.webdesignmatters.com (website grade 82 on websitegrader.com)

Page title: Web Design Brighton :: Seo Brighton :: Digital Marketing Company | Web Design Matters Ltd
Meta description
: “Good web design really does matter, so does a proven track record in the search engines, top 5 for 700 websites and counting, web designers, Web Design Brighton, web development agency”
Keywords:
Web Design Matters, web design, SEO, content management systems, website design company, ecommerce, seo Agency, Company, Sussex
H1:Web Design Brighton, Seo & Digital Marketing Brighton, Web Design Matters…
First 20 Words:
With over 700 websites live on internet, we have years of solid experience in the build and ongoing.
Images alt text= Home Page – Web Design and Software – Page Rank 2 – Web Design Sussex – Graphic Design & animation – Web Design Matters – Web Design Brighton – contact details email marketing – Top 10 in Google – web design portfolio – Brighton SEO Agency – testimonials – Web Design Brighton – wordpress com – stats plugin – seo – web design brighton – brighton web designers

4) http://www.bright-site.co.uk/ (website grade on websitegrader.com)

Page title: Web design Brighton | Website design by Bright Site
Meta description
: Web design Brighton – Make sure you are getting the most out of your website. Web designers based in Shoream-by-Sea, near Brighton, Sussex.
Keywords:
Web design Brighton, Web design Shoream-by-Sea, Web design Sussex
H1: Web Design Brighton
First 20 Words:
Bright Site is a Brighton web design company providing quality, professional website at an affordable price. We build bespoke
Images alt text:
Seagulls Direct, Metal Mule, Priors estate agents in Brighton web design project, Promotion, Rewind, Web design for Brighton based Specs opticians, HR Workforce, Sagari, Brasserie Pascal, Driftwood Mirrors, See our work

5) www.wanstall.co.uk (web site grade 74 on websitegrader.com)

Page title: Web design Brighton – Justin Wanstall Brighton based Web designer & Web developer
Meta Description: Web designer based in Brighton, England. xHTML/CSS Standard Compliant Web Design & PHP/MySQL Web Development. Low cost, high quality, well designed web pages. Web site and web page design at low prices. Custom websites designed to meet your requirements.
Keywords: web design brighton, Web standards, SEO Brighton, Search engine positioning and optimisation, Website Design, Brighton website designer, web designer based in Brighton, web design, affordable web site design, web services, web design portfolio, freelance website designer
H1: Web Design Brighton
H2:
Brighton based design – Web design portfolio – Not just Brighton based web site design! – PSD to xHTML/CSS Conversation
H3:
Seo Brighton – Logo Design Brighton – Web design Brighton – CMS Development – Ecommerce Brighton – Flash Design Brighton – Previous current clients – Find me on these networks – Things I’m talking about.
First 20 words:
I’m Justin Wanstall, a web designer developer based in Brighton, on the south coast of the Uk
Images alt text: Flash design Brighton, PSD to xHTML/CSS, Web design Portfolio, CMS Development, Ecommerce Brighton, Web design Brighton, Logo Design Brighton, SEO Brighton, Web design portfolio, Justin Wanstall – Brighton web designer

Below I wrote the meta tags and the tags for the body for the next workshop, it’s about web design in Brighton:

http://www.surfwebrighton.co.uk

Page title: Surf Web Design in Brighton = Web designers and Web developers based in Sussex
Description: Get the best web design in Brighton and Sussex at low cost. Surf design is even Web development and SEO optimization. Surf Web Design Brighton will help you to have succes on internet.
Keywords: Web Design Brighton, Web development based in Brighton, Surf Web Design, SEO, web optimization, web agency, web design Sussex, web services, best web design.
H1: Surf Web Design in Brighton
H2: Try Surf Web Design
First 20 words: We offer you the best web design and developent in Brighton and Sussex at low cost, and SEO optimization for your succes on internet.

Project 4 -Task 1: Overview of HTML and CSS

March 4, 2011 § Leave a comment

What is HTML?

HTML is a language for describing web pages, HTML stands for Hyper Text Markup Language, it is not a programming language, it is a markup language. A markup language is a set of markup tags, HTML uses markup tags to describe web pages.
HTML is responsible for the construction, and the total output, of a page.

HTML Documents = Web Pages

* HTML documents describe web pages
* HTML documents contain HTML tags and plain text
* HTML documents are also called web pages

HTML markup tags are usually called HTML tags

* HTML tags are keywords surrounded by angle brackets like <html>
* HTML tags normally come in pairs like <b> and </b>
* The first tag in a pair is the start tag, the second tag is the end tag
* Start and end tags are also called opening tags and closing tags

There are three “sections” of a HTML document source: Inline, Internal, and External.

Inline markup goes in the <body> tag, and defines the webpage’s base layout. It structures the output of a webpage, such as creating tables and divisions, forms and buttons, links and anchors, or even just normal text and images.

Internal markup goes in the <head> tag.  Most of the time, users do not directly see anything in internal markup (with the exception of something such as the <title> of a page). Internal markup can declare some special things about a page that the user won’t notice, such as the Character Set Declaration, the Document Type Declaration, keywords, and description to that webpage.

External markup is markup (of any language, for example css) not contained in the HTML document, but in a different file. The contents of this file, to retrieve the markup, can usually be called by Internal Markup.

This below is the classic structure of a html document:

<Html> —-> It’s where the web page starts

<Head> —-> It’s where the head of the web page starts
</ Head> —-> It’s where the head of the web page finishes

<Body> —-> It’s where the body of web page starts
</ Body> —-> It’s where the body of the web page finishes

</Html> —> It’s where the web page finishes

The purpose of a web browser (like Internet Explorer or Firefox) is to read HTML documents and display them as web pages.

What is the HTML head element?

It’s a container for all the head elements. In the <head> you can find elements about scripts, instructions for the browser where to find style sheets, meta information, and more.

Description of the head elements tags:

<head>     Defines information about the document
<title>                 Defines the title of a document
<base />     Defines a default address or a default target for all links on a page
<link />     Defines the relationship between a document and an external resource
<meta />     Defines metadata about an HTML document
<script>     Defines a client-side script
<style>     Defines style information for a document

What is the body?
The body element defines the document’s body, and it contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc.

What is the Doctype?

The doctype declaration is not an HTML tag; it is an instruction to the web browser about what version of the markup language the page is written in.

The doctype declaration refers to a Document Type Definition (DTD). The DTD specifies the rules for the markup language, so that the browsers render the content correctly.
The doctype declaration should be the very first thing in an HTML document, before the tag.

This below is a short coded piece of HTML written for this analysis:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title> Test html for written research </title>
<meta name="Description" content="This a description to show meta tag" />
<meta name="Keywords" content="Html, CSS, test, Brighton City College, Web design course" />
</ head>
<body>
<h1> Test html with notepad </h1>
<p> This is a html test, I want to show how the html tags work </p>
<img src="html-icon.png">
<ul>
<li>Test 1 unordered list</li>
<li>Test 2 unordered list</li>
</ul>
<a href="test.html">This is a test for link </a>
</body>
</html>

Final result

In this picture you can see the relation between the HTML code and the final result in the browser

What is the difference between HTML and CSS?

CSS is another widely-accepted web-design language, CSS stands for Cascading Style Sheets.
While with HTML we design and create the structure and the outline of a web page, with CSS we don’t create anything, but we use it to decorate, align, and position (etc) elements in HTML.
CSS can edit things such as element width and height, background color, border, alignment, and actual visibility, for starters.
CSS is incorporated into a webpage using Internal markup (in the <head>; in <style> tags) or external markup (from a “.css” file).

This is a web page where a CSS is applied, in this case the CSS is used to position, align, and decorate all the HTML emelents

This is the same web page without the CSS. With this example it is easy to understand the function of the CSS

CSS rule structure

This below is the classic structure of a CSS rule:

The selector is normally the HTML element you want to style.

Each declaration consists of a property and a value.

The property is the style attribute you want to change. Each property has a value.

In this case the rule is applied to the heading 1 and it sets the colour (blue) and the size (12px) of the font.

We have different ways to write a CSS rule:

sometimes you can find CSS rule on one line like this:   p { color:red; font-size:12px; }

othertimes you can see one declaration on each line to make the rule more readable:

p {
color:red;
font-size:12px;
}

This below is a short coded piece of HTML, you can see I added in the <head> a link to the css file.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title> Test html for written research </p>
<meta name="Description" content="This a description to show meta tag" />
<link href="style.css" rel="stylesheet" type="text/css" />
</ head>
<body>
<h1> Test html with notepad </h1>
<img src="html-icon.png">
<p> This is a html test, I want to show how the html tags work
 This is a html test, I want to show how the html tags workThis
 is a html test,I want to show how the html tags work This is a html test,
 I want to show how the html tags work </p>
<ul>
<li>Test 1 unordered list</li>
<li>Test 2 unordered list</li>
</ul>
<a href="test.html">This is a test for link </a>
</body>
</html>


A coded piece of CSS written on Notepad

This below is a short code piece of CSS:

h1 {
font-family:"Verdana";
font-size:25px;
color:blue;
font-weight:bold;
}
p {
color:black;
font-size:12px;
font-family:"Verdana";
line-height:20px;
}

Final result with a CSS file

In this picture you can see the relation between Html, Css and final result.

 

Project 3 -Website Evaluation Questionnaire

January 25, 2011 § Leave a comment

This evaluation is for a good website

Site name : Zizzi Restaurant        Site URL : http://www.zizzi.co.uk

Load Time : My modem connection is 20 Mb Broadband

Does the site’s load time seem reasonable? Yes it does, it takes 2 seconds to load

Appearance

Is the page layout and use of color, fonts and images consistent throughout the site? Yes it is, you can see the same layout and fonts throughout the site

Are there less than three fonts used in the design? Three fonts are used: a script font for the logo, a serif for the navigation and a sans serif for the content.

Are there a moderate number of colours used in the design? Yes they used a grey scale in the header and a beige colour for the background, white for the the navigation’s font and a pink for the headings font.

Is the design appropiate for the purpose of the site and for the intended audience? Yes they have a clear and stylish design, I think they want to communicate elegance but also simplicity reflecting the welcoming and stylish ambience they try to create in their restaurants.

Will the design appeal to the target audience? Yes it will

Is the page layout balanced, clean, and uncluttered? Yes it is. Everything is tidy and clean. The composition is well done and it is easy to understand.

Are the images smooth and properly anti-aliased to the background? Yes they are. This site is for a big company so I think the pictures came from a professional photographer who has taken the images specifically for use on the web site.

Are the graphics appropiate and relevant to the content of the site? Yes they have  very clean graphics appropiate to the content of the site

Are your eyes directed to the content or important page elements? Yes they are, because the navigation is quite big and placed across the top of the page directly underneath the header and they used big images to call the attention to important page elements such as news and promotions.

Are the colour combinations pleasing and appropiate for the site’s purpose? Yes they didn’t use too many colours and the combination is very good. I like the pink combined with the grey because it stands out.

Is the text clearly legible? Yes it is

Is important content (such as navigation, search boxes, site and page identification) visible without scrolling? Yes it is, my laptop’s resolution is setted on 1280 x 800 px and I don’t need to scroll to see important content.

Is copyright, privacy and contact information easily located? Yes, you can find the copyright, social network and ‘contact us’ links at the bottom of the page.

Is the homepage short enough that it doesn’t require a great deal of vertical scrolling? Yes you don’t need to scroll vertically much at all.

Is the purpose of the site (and each page within it) immeadiately clear? Yes they are very clean and easy to understand. The large images that you immediately see are of the restaurants and the food served there. Also, three of the navigation links underneath the header identify the business as food related. Even the header itself contains the word ‘ristorante’ and a link to book a table online.

Structure and Navigation


Is the content of the site logically organized? Yes it is, you can see that the page follows the classic organisation of a good web page.

Is the navigation located in the same place on each page of the site? Yes it is located across the top of the page directly underneath the header on every page

Is the navigation clearly recognizable as navigation? Yes it is quite big and it catchs your attention.

Are all links clearly labeled and their destination obvious? Yes they are.

Is the navigation simple to understand and use? Yes it is very simple and there is a rollover effect on the links.

Is the use of the browser back button unnecessary (no dead end pages)? No you don’t need the browser back button and there aren’t dead end pages.

If icons or other images are used for navigation, is their meaning clear? yes they are well done and help to communicate the message of the text.If icons or other images are used for navigation, are text links also provided? Yes they are. There is an rollover effect that provides the text link and the description.

Is the purpose of each page easily identified? Yes it is very easy and clean. There is a title on each page which corresponds to the navigation text.

Is any essential information directly linked to in the navigation system (for instance, a contact page)? Yes they provided also a bottom navigation with the essential information such as contact us, book a table etc..

Can users get to information with a minimal number of clicks? Yes they can. The max number of clicks is three. For example if you’re looking for salads you have to click on ‘our food’ and then on ‘food menu’ on the left navigation and then on ‘insalate’.

Is there an obvious method of navigating between related pages of the site? Yes the method of navigating of this site is very easy and obvious.

Is there an obvious method of navigating between different sections of the site? Yes there is.

Content

Does the content reflect the purpose of the site? Yes it does, it uses very nice pictures of the food and restaurant interior and the content text is easy to understand.

Is the content appropiate for the intended audience? Yes it is, is appropiate for a big range of people because it’s so simple to use.

Is the content sufficient to meet user needs and expectations? Yes it gives the whole picture and you can have all the information that you need about this restaurant (such as history and menu) as well as being able to book tables, request regular news and contact the company.

Is the text content free from spelling, grammatical, and typographical errors? Yes it is.

Are short sentences, short paragraphs, headings, and bulleted lists used so that the content can be easily scanned? Yes they are, the longest paragraph that i found is 5 lines.

Are lines of text too long to be easily read? Each lines have in average 12 – 13 words. They are very clear to read.

Is information correct and current? Yes it is. The last post on the blog is on 21 January 2011.

Can specific content be easily found? Yes it can.

For sites with large amounts of information, is a search function available? There isn’t a search function because in the pages there isn’t a large amounts of information.

Usability

Is the site cross-browser and cross-platform compatible? Yes it is. I tried it on Firefox, Internet Explorer and Safari and it works great.

Can the site be viewed without unintended horizontal scrolling? Yes, I have got a 1280 x 800 px resolution on my laptop and I don’t need an horizontal scrolling.

Are form fields arranged in a logical order? Yes they are. Are all components of the site functional? Yes they are.

Is information concerning any special browser or plug-in requirements clearly visible and easily understood? There isn’t any information about that because there aren’t any special requirements.

Are interactive features clearly explained? There aren’t any particular interactive features.

Are the skills required to use the site’s features appropiate for its intended audience? Yes they are, the audience can use this website very easily without particular skills.

Is there an off switch music? There isn’t music on this website

Is the site designed to be accessible to disabled users? They haven’t got the W3C logo on the website, so I am not sure.