- ‘The World Wide Web is the Gutenberg press of our time.’ - Elizabeth Castro
This section is about my personal learning needs
I really want to learn real codes and write without and interface programs.
Write a website just with a text editor.
Integrate video lectures and weekly discussion with other resources [technical academics books]
Utilize serious certified tutorials.
Share knowledge with all the others students via blogs and discussion board
Internet
I would like to build a business site [demo] for a Catering company.
Aquolina Catering, based in Milano, Italy.
HTML, XHTML, CSS
I will use a simple text editor.
. Five different sections, lots of photos [events and plates], interaction of the users [rate, comment, press area].
Step 1: Define the goals based on user requirement
Step 2: Define and organizing the site content’s area [with the client]
Step 3: Create the first structure of the site
Step 4: Define with the client all the choices [design style]
Step 5: Create a Demo and test it
The first clear goal was learn how to use code like HTML, XHTML and CSS. I have totally achieved my objective. Now I’m able to read these codes, to understand their structure and of course to use them in a real application. The result of my work is huge for someone who has never learned coding before. My Web site is complete, is working and looks quite good. As I wrote in my proposal I did everything without any support of external software. Everything has been made with a text editor.
I have tried to write some code in the past, but was just simple curiosity and fun. I also have used simple and easy programs such as FrontPage or Dreamweaver for my experiments. I never tried to learn systematically real programming languages. Because this was my first time, I decided to focus just on two technologies learning them as my best. I have chosen the two must important and popular Web technologies because of their importance in the Web history: are quite old but at the same time particularly modern.
Studying these technologies is also studying the Web. I have analysed the history of the Web, understanding when and how these technologies born. I have read a lot of documents regarding the creation of W3C, I have found the first draft of HTML in the history wrote by a young Tim Bernes Lee and I have analyzed the so-called ‘Browser war’.
HTML is an open source format language utilized to described hyper textual documents in the World Wide Web. HTML is not a programming language but a markup language, used to describing contents – textual or not – of a web page.
Elizabeth Castro (Castro, 2007, p.14) argues that the two main characteristics of HTML are Hypertext and universality: ‘Hypertext means you can create a link in a Web page that leads the visitor to any other Web page or to practically anything else on the Internet. It means that the information on the web can be accessed from many different directions’.
Tim Berners-Lee at CERN laboratories originally developed HTML. It became popular via Mosaic browser and then during the ‘90s with the Web explosion. During this period HTML expanded in many ways. At the very beginning was a battle: Netscape and Internet Explorer – the two most popular browser in 1994 – started fighting each other using private codes. The result was the so-called browser wars, a mess of languages where real loser were users.
‘The first publicly available description of HTML was a document called HTML Tags, first mentioned on the Internet by Berners-Lee in late 1991. It describes 22 elements comprising the initial, relatively simple design of HTML. Thirteen of these elements still exist in HTML 4’ (Wikipedia: HTML, 2008). The born of W3C in the October 1994 helped to solve the battle of standards: one of the Web strong points is that web authors, retailers and users share the same conventions on HTML. A strong collaborative work is done on HTML because of this.
Nowadays HTML is a universally accepted standard. The current version is HTML 4.01, a subversion of HTML 4. In the W3C abstract of HTML 4.01 specification is wrote: ‘This specification defines HTML 4.01, which is a subversion of HTML 4. […] HTML 4 supports more multimedia options, scripting languages, style sheets, better printing facilities, and documents that are more accessible to users with disabilities. HTML 4 also takes great strides towards the internationalization of documents, with the goal of making the Web truly World Wide’ (W3C: HTML 4.01 Specification, 1999). A working group composed by ‘WHATWG’ community and ‘W3C HTML Working Group’ is also focused in the development of the new HTML 5 (WHATWG community: FAQ, 2008).
Every hypertextual document wrote in HTML must be included in a file ‘.htm’ or ‘.html’. The main component of this syntax is the ‘element’ used to format data and send encoded info to the browser. Every element is containing in markups called tags. ‘An element usually has a start tag (e.g. 'element-name') and an end tag (e.g. '/element-name'). The element's attributes are contained in the start tag and content is located between the tags (e.g. 'element-name attribute="value"'Content'/element-name').’ (Wikipedia: HTML, 2008).
‘XHTML is a redefinition of HTML in terms of XML. XML is language for creating other languages’ (Castro, 2007 p.19). More general is the syntax of a code; more complex is to translate it for a device. ‘The W3C rewrote HTML in XML. This new language had all of the features of HTML and thus could be understood from every browser on the planet’ (Castro, 2007, p.19). With the use of the web from new devices like PDAs, mobile phones, Netbooks, or Braille readers became more important to move to a better syntax. Visibility on different device, more stability with different browser and more visibility on many search engines because of the syntax are just few advantages of XHTML.
Exactly like HTML 4.01, the earliest version of XHTML include three different sub-specifications:
XHTML required extreme precision and method during the composition of the code. Some different rules from HTML:
XHTML is rigorous. Instead of the old HTML code, XHTML needs perfection. Some rules that change in XHTML:
‘In the new HTML version 4, the W3C marked most of the formatting elements for future removal from the specifications. These elements would henceforth be deprecated, and their use discouraged. At the same time, they created the new system for formatting instructions – called Cascading Style Sheets, or CSS – to fill the gap’ (Castro, 2007 p.18).
CSS story started in 1993 when some users from a mailing list called ‘www-talk’ asked to developers to become available to influence their page style (before 1993 web pages were without style and their format was complete settled from the browser).
The first version of CSS1 was born in 1996 from the W3C. The success of this first version was quite limited because there were not many browsers able to support this code. Some years later, when Microsoft and Netscape joined W3C and when new browser like Opera were born, were released CSS2 (1998). In CSS2 are defined rules for the browsers when they have to apply style property to some pages.
With this release were defined format visual model with numerous proprieties to manage position of the content on a page, their dimension and their graphical aspects. Were chose the box model for every single propriety of every single block. Were developed new proprieties on text formatting like (color, alignment, fonts, ecc.) and new style for tables.
But the main important implement of the CSS version 2 was the improving of accessibility aspects of a page. Splitting the content from presentation is possible for designers simplify and thin HTML code. Because of this, the result documents will be more accessible also to person with disabilities and special needs using particular softwares.
At the moment is released a 2.1 version of CSS but without the official final recommendation. The W3C is already working on CSS3 which main news will be the subdivision in different modules for different kind of browser like visual browser or acoustic browser.
A common characteristic of every version of the CSS language is that is possible to fixed different style sheets called favorite or alternative. In this way is possible to give to the user the choice on which kind of style he/she prefers according to his/her needs.
The importance gave to standard during the course have influenced my work a lot. Understanding the importance of Web standards was particularly interesting: the potentialities of a ‘Web for everyone’ are fascinating. In my project I have respected the major rules of accessibility using an extreme clearness of the code.
First of all, I decided to use an external Cascading style sheet. The main advantage of this choice is to separate HTML and CSS codes in order to keep clean and clear pages. The structure of my code reflects exactly the structure of my site. The CSS style sheets, for instance, is divided in instruction named as the section of my pages. These sections are also in the same order in which are presented on the browser: body, container, header, navigation, content, and footer.
The only exception on the site structure is the ‘photos’ page. In this page I have added a special code dedicated to the gallery. The major of the photo galleries on the Web are made with Java or Flash. The main advantage using these two technologies is that is possible to gain incredible results particularly in term of design. The disadvantages are that these two technologies are not totally supported, especially from old browsers and particular software for people whit disabilities. Furthermore Flash and Java elements are quite slow with old connection and old hardware.
Above, the entire CSS code of the 'hoverbox'.
According to my proposal, I have chose to work just with HTML and CSS. Reading about CSS I have discovered big on-line community supporting this technology and its potentialities. Using a CSS gallery in project became a little personal challenge. During my research I have found a gallery called ‘hoverbox’, a reproduction of another famous gallery called ‘lightbox’. Is called ‘hoverbox’ because of the :hover command applied. Adapting this gallery to the particular structure of my site was not so easy. I had to modify a lot of parameters working a week with padding margin and position commands. Finally I’m proud of the result, it works quite well and it looks quite elegant.
The arrows in the picture above, shows how I worked on the 'hoverbox' gallery in order to leave space between the zoomed image and the others on the background. Is possible move in every direction from every picture without overlap
three personas and scenarios:
Age: 56
Occupancy: He is the Italian manager of a big multinational company.
Location: Milan city
Education: Business degree
Home life: He is married with Paola, a math teacher. He lives in a big old mansion in the centre of Milan, walking distance to his office. He loves skiing and he also bought a nice cottage on the Alps where he uses spend the weekends.
Internet usage: He is not a web expert. He learned how to use computers only 3 years ago because of his job. He just knows how to use the intranet of the company and how to send and receive emails.
Scenario: Marco has to set up a meeting for the launch of the new product. This meeting is extremely important for his business; everything should be perfect. Will be plenty of managers from all over the world. He already decided the location and the program of the event and he just needs a catering service. He needs something modern, simple and reliable. On the Aquolina website he can find exactly what he need. He prefer to make a calling directly to Aquolina on the mobile number founded on the website.
Age: 33
Occupancy: She is the event manager of a public relation agency
Location: Milan city
Education: Public Relation degree
Home life: She’s single. She lives alone in a small flat in the centre of Milan. She loves go shopping with her friends, go to the cinema and travelling. She use travel a lot because of her busy job.
Internet usage: She’s very expert with the web. She uses to work with many clients at the same time and she use to keep in contact with them by email.
Scenario: A famous Milan fashion agency, one of the most important Federica’s customers, ask her to organize a big event for the new collection. Federica want to call Aquolina, her favourite catering company but unfortunately she deleted their number! No problems, she jump into an Internet point, check the website and in a minute she already sent an email to them.
Age: 37
Occupancy: Baker
Location: Milan suburbs
Education: High school
Home life: Mario lives with her girlfriend Laura in a suburb close to Milan. They are going to marry in two months. Mario loves his job and his hobby is cook. He really loves good quality food.
Internet usage: He is captivated by new technologies but he just bought his first computer last months. Mario has never used Internet before.
Scenario: Mario and Laura are going to marry. They want to big celebrate their union. They are searching for a catering service and a friend of them suggest sending an email to the Aquolina Catering Company asking some information. They found the website elegant and easy to use, and they immediately send an email to the company.
As I said in the introduction, the main characteristic of this website will be ‘simplicity’.
The structure of the web site is the typical of a classic static business website. The ‘home’ page is the main page. It contains the menu who link to all the other sections. The ‘about’ page will contain a short written presentation of the catering company. The ‘photos’ page will contain a simple and light gallery of good quality photos in a casual random order. The ‘contacts’ page will contain telephone numbers, name and addresses of the company and the people involved. From every page is possible go to all the other pages from the menu list and also understand, using the black highlighted word.
The structure of the pages will be always the same as well the graphic aspect. The menu will be always the same, as well the footer at the bottom, the logo and the header. The only changeable part will be the content.
This for:
The structure of each page is really simple and clean. The body is a perfect square positioned at the centre of the browser. At the top of the page there is the header who contain the name of the company and a little slogan. Just below there is the menu, 4 simple buttons linked to the relative pages.
The main element is the content area, well positioned at the centre of the page. At the bottom there is the footer who contain part of the contacts details of the company.
As is possible to see from the follo screenshot, the design of the website will be very polish and minimal. Minimal, like the finger food served by Aquolina. White is a luxury and calm colour. Grey is the new black. All the links are black highlighted.
These are the two main reasons of this particular design:
First: the average of the users of this website, simply needs contacts of Aquolina Catering. This website is like a big business card accessible at every time from all over the world. The footer, with address and telephone number, will be always at the bottom of every page.
Second: this architecture allow easy and safety web usability and accessibility. This approach make the website easy to use for the end-user, without requiring her (or him) to possess any special technical knowledge.
My plan:
Week 10: optimize the html structure + css style sheets + building photo gallery.
Week 11: first online testing + fixing bugs.
Week 12: finalise the project + write essay + last test.
Week 13: upload the website + final report.
As I wrote in my proposal, I worked with and for a client. This experience teaches me a lot also on this level. The relationship with a client is stimulating but not easy. My working plan was not always respected from the client. Last time changes are normal and complicated to fix. My project was not just supposed to work but to looks good to the users. The importance of the design in this site was primary. I have tried to think something that was agile and smart at the same time.
One of my first ideas was to dedicate some pages to the interaction between users and client. I proposed to the client pages with rating and feedback gives from the public. Learning technologies with video lectures and personal research I realized that PHP was the technology able to worked with databases and not HTML or CSS. Moreover, talking with the client I realized that his needs were different: he asked for a plain Web site, without interaction or useless features. Because of this, I have concentrated my efforts to my initial targets and, using no more than HTML and CSS technologies, I have tried to satisfy client design and structure needs.
During this work I have used a variety of resources. Because my project was concentrate on HTML, XHTML and CSS I worked using a book wrote by Elizabeth Castro called ‘HTML, XHTML, CSS’. I have also used a lot of online tutorials, especially when I have worked to the photo gallery.
The course of ‘Digital Media Development Processes’ helps me to better understand the good balance between content and design of an online product. The blogging activity was also a good support both on technical and methodological aspect. Posting my problems, reading post of my ‘colleagues’ was helpful and useful. Using an aggregator called Vienna I was alerted every second about others activities and comments. This particular work method gives me the feeling of a membership to a big community who shared knowledge and tips as more big communities like W3C and WHATWG represent for the entire Web.
Give and take feedbacks during the group works were particularly interesting. In these activities I have learned not just from my colleagues’ comments but also from their method. Especially at the beginning of my work, looking (both online via blog and in class) how the others started their jobs helps me to set mine and correct my method.
Method is probably the biggest lesson I have learned in this subject, both on micro and macro levels. At a micro level I have learned the necessity of a strict method writing codes. The respect of standard is possible just using precision and clearness. At a macro level I have learned to set a method of work, respecting due dates, planning a reasonable schedule, and secret of working step by step.
Old links: