Thursday, 29 January 2009

XHTML and CSS

HTML a short History

90's Tim Bernards-Lee HTML 1.0
93 MOSIAC
95-99 HTML 2.0-3.2 graphics, fonts, tables, javascript
DOM 0
99 HTML 4.0 - W3C
CSS - return to the structural roots
containment, Doctype DTD
DOM 1
2000- XHMTL
DOM2

HTML CSS
HTML tags were originally designed to the define the content of the document.
They were supposed to say
"This is a header", "this is a paragragh"
This is what we are going back to
Structure in the page, presentation in the CSS

XHTML
SGML split into XML and HTML
XML split into other MLs and XHTML
HTML is not XML - this is because HTML contains presentation whereas XML contains only structure.

XHTML
Mandatory Tags


Nesting
no overlapping


Containment
XML document must be well formed
XHTML will not validate if they are not well formed


Empty elements

Tag and element must be lower case
but values can be either lower or uppercase
and attribute values must be quoted " "

CSS
links w3 schools csszengarden

gives greater flexibility
loads faster
source code is easier to read
accessible to multimedia

SELECTOR and PROPERTY
SELECTOR = a defined style
PROPERTY = definition of an element of the style

Friday, 28 November 2008

Lecture 9/Tutorial 8

Lecture

Networks
The physical nature of them, the basic concepts on how they work locally and world wide.

LANS - Local Area Networks
WANS - Wide Area Networks
VANS - Value Added Networks
MANS - Metropolitan Area Network
PANS - Personal Area Networks
BANS - Body Area Networks
AN - Academic Network
RFID - Radio Frequency identification

2 useful definitions

The Internet
is the global network of networks of computers and peripherals that communicate with each other (plus developers)

The World Wide Web
is the Internet plus all information accessible via the Internet plus all communities and developers.

The Cloud
As a user sat at a PC the cloud is the representation of the complicated network structure of the internet. The bit that I do not own or manage.
As time goes on more people's documents, files will become part of the cloud and less will be on there own PCs.

3 basic shapes of networks
Ring - serially closed loop, message passed along (or Token) nodes (terminals/PCs/printer)
Bus (generic name) - along a backbone nodes connected including a server
Star - central hub that all nodes connected and rely on

5 circle cable strategy - historic idea 1996 People and Chips McGraw Hill
Home
Workplace
Local district
National telephony
International backbones including satellites

WiFi
Cable with the addition of radio technology
(one provider is actually called The Cloud)

DoCoMo's I-Mode
Do communications over the mobile network, Japans predominant mobile phone operator. (wiki)
Experimental 3G system

In the last few minutes of the lecture (tony finished at slide 21) we saw and discussed a video that gave example of BAN and a particularly mad professor who appeared to be hellbent on turning himself into a cyberman. All very scifi.

Tutorial

Edited the FormMailCharity.php to correct my typos. And then checked that everything worked.
Very frustrating. There must be something wrong with the systems within BIT.
I checked on my assignment enquiry page and found that the javascript validation did not work.
This was in 3P29. The code seemed correct.
Spent along time trying to make this work.
Came back this evening in 3p07, and it all works perfectly.
1. The javascript
2. The w3 validation
3. The PHP

all works fine.

I haven't changed anything, spent along time staring at the code, looking for errors and it was alright all along.

So I put it to my audience, what are the possible problems here??

It did mean that I have not done the very final parts of tutorial 5 (Exercise 3 - iframe) and 6 (Advanced -telephone number only because the hyperlink and image bit was done for the assignment)
I will of course for completeness finish the on Friday 5th or possibly come in earlier on Thursday 4th befow the lecture. An hour would be more than sufficient. iframe part I could actually do at home.

Conclusion

Although originally the thought of doing all these blogs wasn't all that appealing they have been useful for
1. revision of the work, and I have on new topics tried to explain them back in simple easier to remember terms. For my own benefit so for next year before the exam I have some easy to read summaries of the topics covered.
2. leaving myself notes on what to do in the next tutorial. Again for my own benefit so that I knew exactly what I had to get straight into.

Overall it became less about writing a blog to please my audience (Messrs Hulbert and Drewry) and more about being for me.

Saturday, 22 November 2008

Lecture 8/Tutorial 7

Lecture 8
History of the Internet.
A lecture that could easily of been lecture 1, we took a look at the past to get perspective on where we are now.
Depending on which piece of the infastructure, all of which are essential to make the internet work, decides when you can say the internet started. From the successful cabling across the Atlantic (1866) to Konrad Zuse's first binary machine(1936), (I can just imagine his wife's reaction to the thing he built in their front room), to ENIAC(1946), Lyons Electronic Office (1951), the military's role with ARPA (1958) and later with PC's, Marc Andreesen's MOSIAC and Tim Bernars-Lee's HTML

There are so many different things to mention along the way all are list on Hobbes Internet Timeline.

http://www.zakon.org/robert/internet/timeline/

One interesting fact, The Queen sent her first email in 1976. She got in ahead of all of us!!

Tutorial
This week I went back to finish Worksheet 5.
Very straightforward and validated after a couple of edits.
Linked weather.html back to my index page and updated my index page to include the weather exercise and uploaeded to my public file and the ittwassignment folder.

Rather than do exercise 3, I checked on my Media Technology assignment, which was done in FLASH, that the links worked and that a copy was in the ittwassignment folder. This had to be done because my index page has a link on it to the media assignment.
Was an interesting assignment for me because I has not even used Flash before and on the weekend 15/16th November I sat down and learnt what I needed for the assigment and by Sunday afternoon it was done. Frustratingly the loading of the movies did not work at home but I had the feeling that once I got to 3p07 and tried it within the BIT system it would work.
And it did, first time. So with that assignment I had gone from having zero knowlegde and not knowing how I was going to do it to getting it done 2 weeks early. I had recorded my progress as I was going along and that is all that is required for the accompanying report.
Validation of the media page, I must admit I didn't bother to do because the page was provided for us.

To do next tutorial
Tidy any typos in my assignment website.
finish exercise 3 from worksheet 5
check if there are any other exercised that I failed to finish.

Saturday, 15 November 2008

Lecture 7/tutorial 6

Lecture
This week
SGML- Standardised General Markup Language (the daddy)
HTML - Hypertext Markup Language
DHTML - Dynamic HTML
XML - Extensible ML
XHTML - Extensible HTML
SMIL - Synchronised Multimedia Integration Language.

Historically "markup" is what you would do to a text document to tell, for example to a typist how you want the text to be displayed. Like label whats a heading, or when a new paragraph starts.

With that in mind "markup" is a relatively straight forward term to get to grips with.
Simply adding labels to pieces of text at it's most simple level.

All we need is a set of labels or tags and the method/rules on how they are used.

The Markup language can either be Procedural where the content is "marked up" and the instructions on how the content is going to be displayed are contained within the document or it can be Descriptive where only the content has the markup and the browser decides how the content is to be displayed. (but it will obey certain rules)

The Document Type definition at the start of a web page's code is saying to the browser which particular markup language is going to be used plus where the method/rules are kept. At W3C usually.

What I hadn't appreciated before was that so much of the text of out daily lives is getting the mark up treatment.
Tony's example of google books which I had never seen before has made me realise that I might never need to buy another book, but I may have to buy another screen!
http://books.google.com

HTML by Tim Berners-Lee is a subset of SGML.


Tutorial
This week I first finished off the FormMail example and checked that I received it's email and validated.
All worked with no problems.
Assignment
I uploaded my assignment Charity website and checked all the links and validation.
Then I edited the FormMail.php file so that the code could be used for my assignment.
New file called FormmailCharity.php.
Uploaded it to my ittwassignment folder on my public site.
This worked first time although I have noticed some typos that will need amending for next week. Ran out of time this week to make it perfect.
Can see no reason why I can't add my header from my charity site to the response page. So this will be something for me to do next week.
Plus must add some comments.

Home Page
I also updated my home page with the link to my assignment. And other than adding the header we made in Media Technologies a few weeks ago I have resisted the temptation to improve the look of my home page.
Since we are doing CSS next term, I think it's best that the content of my home page be simply listed, and that it validates.
I still have to go back and do Tutorial 5. But feel that I'm in a good position in that my assignment is sitting in the folder 95% completed.

Tuesday, 11 November 2008

Charity - F.L.O.B.

F.L.O.B. - not a great name but memorable!

Will be adding something interesting about Food Labels on Booze very soon.

The link below takes you to the assigment home page.

Go to Charity site



The overall design of the webpages are very straight forward and easy to navigate.
(But allowing for the non use of CSS)
The steering away from trying to be a flashy designer has come from the Book "Don't make me Think" by Steve Krug, especially pages 126 and 127.
On future projects I will be including more of his ideas.

Friday, 7 November 2008

lecture 6/tutorial 5

Lecture
This week (06.11.08) Tony tackled 3 related subjects

DOM, JAVASCRIPT and AJAX

DOM (Document Object Model) definition on the W3 consortium site is defined
as an API (Application Program Interface) for valid and well formed HTML and XML documents.
It is independent of HTML and XML, and so the same DOM could apply to later versions of the same website if in the future it is done it XML 3.0 for example providing the structure of the webpage remains the same.
From the DOM you can see where each part of the webpage relates to another, where they connect to each other and what their role is.
The DOM gives the programmer direct access to the part of the webpage that they intend to edit.
The pictorial representation of the DOM can be likened to an upside down tree.
According to WIKI the DOM is not required for pure HTML but Javascript scripts use the DOM
modify/change to inspect a page or document.

Tony referred to the to W3C schools examples on DOMs.

JAVASCRIPT
Javascript is used to add interactivity to a webpage. The script will use an object and change it's state or can be used to start a javascript action.
javascript is mostly client side ie done at the user' browser rather than actions done at the server (server side)
Tony referred to his own javascript example on his website.
Very useful for checking (validating) the contents of a form before it wings it's way to the server and it's recipient.

AJAX
Asynchronous javascript and XML
A group of techniques used for creating interactive web application.
Moving on from just Javascript client side we are now going to use the javascript actions to retrieve content from the server.
The content is dependant on what the javascript has requested which is of course dependant on what the user did. (we hope, if all is going well!)

Tony referred to this example

link http://noticeboard.chrisjhill.co.uk/

The movement of the post it notes is recorded by the javascript, passed to the server and the webpage is altered for everyone viewing it.


Tutorial
Added the links of all the previous exercises/practice pages completed to my home page.
Checked them for compliance. And resolved any errors.
Made the new folder called ittwassignments and copied the existing exercises/ practice pages across to to it.

martin's home page

Renamed the existing files that can be used as templates for the assignment and checked them for compliance and placed them in the ittwassignment folder ready to edit into the assignment specification.

charity home page

In the evening I made a start to tutorial 6 although I never finished.
I attempted this one because tutorials 4 and 5 I can try at home but 6 with it's PHP element I would rather do at UWE and it is important for the assignment.


To do next time.
Put descriptions by the links rather than just titles. If this compliant code is to be used in the future it would be wise to describe clearly what it is for easy reference.

Saturday, 1 November 2008

lecture five/tutorial four

This week (30.10.08) Tony talked about hyperlinks and images.

Very first thing that was covered was the principle of "containment" which means that content must have a tag in front and a tag and the end. And went on to explain hyper links and images.

With this blog I have used examples of html code but left off the <> brackets that usually surround the code so that the code is not recognised by the blog text editor.

Tony explained the difference between "relative address" where you use the Anchor hyperlink reference or "a href" to go to a local directory and "absolute address" where you use the full hyper text transfer protocol (HTTP) address that you see entered in browsers.

Something that was in the book Heads first HTML & CSS was the terms "Parent" or "grandparent" folders.
If the parent folder is the folder that all the code and images are held then any page linking to another page within the parent folder does not need the full HTTP address in it's link.
For example A page would use the tag a href="bpage.html" (inside of <>) then the words describing the link such as "link to B page" then the closing tag /a inside <> brackets.
The full address of "B page" could be placed there after the ahref= but it is not necessary.

If there is another level folder the parent folder, can become the grandparent folder.
If you want to link a page that is held within the lowest level of folder (which you can call the parent folder) and you want to link to a page or image in a higher level folder (which you could call the grandparent folder) then you use the tag
a href="../apage.html" then the description, and then the closing tag.
And this is still addressing the file or page locally.

The "../" was something new that I certainly had not heard of before.

Wasn't mentioned in the lecture but down through the folders as in
a href="afolder/bfile.html" or even ahref="afolder/bfolder/cfile.html"
was mentioned.

Another thing that was mentioned on the lecture was putting anchor points within a long paragraph of text.
I had only seen this before where sometimes you see a "back to top" link.

Absolute addressing then is only necessary when you want to link to websites outside of the one you are currently looking at.
And so the full HTTP address is used but Tony never mentioned that sometimes you don't want to have the reader/user leaving your website and just simply open a new window with the original window still open then you use:-

a target="_blank" href=http://www.etc etc etc.....

Without the attribute "target=_blank" the reader may leave your website and never come back!!

To summarise Tony talked about how your working environment should "mirror" whats on your public or server file.

Then Tony went on to talk about images.

The most important things for me were:-

1. that you should use the "alt" and dimension attributes because they are required for validation.
2. that you can dither a GIF so that you can give the appearance of a graduated colour without going to the generally large file sizes of jpegs. Which could be handy for a vector diagram such as a company logo with a graduated tine or it could be used for a button or tab like the tab on the browser window a few inches about this text if you are using IE 7. But this is of limited use and JPEGs are still better for photo's.
3. Interlacing where the image appears out of focus and then gradually comes into focus as the page loads fully.

Tony only mentioned his own website tutorial as a link we should follow up.


In the tutorial/lab session I needed to make sure that my form page validated correctly and that meant the W3C validation and the Javascript validation.
The week before I had only got partly through constructing the table.
It can be seen at.

Link to Martins form2

The empty field validation works, and it is W3C validated too.

At home I added the email validation and that worked fully too.

Felt the compulsion to do a little jig around my dining room after that.
Much to the surprise of my children who were watching James Bond.
Then I had to explain why the jig was necessary. I have never seen their eyes glaze over so fast. I don't think they really needed to know in quite such detail.

I used the Head Up books on HTML & CSS pages 591 to 638 for the form part and Heads Up book on JAVAscript pages 293 to 304 for the Javascript validation part.


OK I look at it and think I am a week behind but that particular exercise was to me really important and I couldn't have it partially working or not understanding it.

So this week I have to catch up with other exercises and set up the file "ittwassignment" on my public directory. Which I may have done had it been mentioned again within the detail of the blog part of the assignment on page 2.

I am pleased that page 3 of the charity website in the assignment is now simply a modification of what I already have and not something I have to put hours into.

Wednesday, 29 October 2008

google map

external link to arial photo of my house

ninja cat video embeded

ninja cat embeded this time


ninja cat video

cat stalking

Tuesday, 28 October 2008

published site - customer requirements

I was approached back in september by a lady (Julie) who wants to earn some extra cash by doing peoples ironing.
She wanted a website so that people could look up her details when that had lost her flyer that she had put in people's doors around Whitchurch.
She couldn't pay me but said she would baby sit anytime.

I registered the domain with get dotted, (www.juliesironing.com) set up the hosting with Freeola put up a holding page just to show her that it exists and then thought about doing this really amazing designer site.
Trouble was I could never get round to it.

The lectures of Information Design had taught me about giving the customer what they want, something they can understand easily, their customers can understand easily and something that I can easily understand when I come back to re-edit the site some time in the future.

So the Tuesday evening of 21st October 08 after my kids were gone to bed I set about producing a very simple site that suited her and not me.

Straight forward pictures downloaded from the internet, prepared up in fireworks.
I took the common background colour from the pics and used that for the text colour and then found the contrasting background colour.
She had supplied the text.
I also wanted to reflect some warmth of her personality.
Most of the other ironing service type websites were blue and white which although clean looking had a cold appearance.

Well before midnight I had finished it, I uploaded to freeola.

Next day after I sent her a text and she phoned back immediately very excited about the website and the colours I had chosen, and the layout etc.

I was glad to get that project off my desk, she was over the moon.

And next time I get asked to do something I won't sit on it wondering how I am going to make it look like the next big thing.

Monday, 20 October 2008

managing information

Now I was quite happy with a just a blueyonder email account, now I have an msn account, and a google account that all need checking.
Have to check the blackboard regularly. Every lecturer seems to put their important stuff in different places
Have to check the library to see if they have got the books in I want.
Have to check the links recommended by lecturers.
Have to read the books recommended by lecturers.
Have to go to Ning and check who's there.
Have to check my bank account.
Have to check with Amazon to find out where my books are.
Have to read my snail mail.
Have to check my children's homework
Have to check my children take the right kit to school
Have to feed my children
Have to wash their clothes
Have to check when events are on at my kids school
Have to fill in the form that decides what school my oldest
goes to next year.
Have to decorate. I've started so I'll finish.
Have to clean the house.
Have to do the accounts for my father's business
Have to do the artwork for my father's business
Have to process orders for my father's business
Have to do websites for people for nothing(currently working on 2)
Have to exercise, run 20 miles and weight train 3 times per week
Have to teach over at the Filton college (not too often)

and have to check with my girlfriend that she still loves me cause honestly
I barely have the time. :-)

Monday, 13 October 2008

Design Fun

Finally got it worked out.
An absolutely killer presentation we result cause I have put in the effort over the last couple of days.
The project is called "the gift".
We had to interview someone and then work out what would be the perfect present for them.
If you are a young lad of 18 who thinks about football alot you also have another thing on your mind too. Girls.
So my gift idea helps this young lad score on and off the pitch.
Just hope over the next few days I can mock up all the necessary materials and presentation stuff ready for Friday.

Friday, 10 October 2008