A Beginner’s Guide to Building and Hosting a Web Page

A beginner’s guide to Building and Hosting a Web Page Web design and development is incredibly fun. For those just getting started, I’ve developed the following guide to take you through all of the steps necessary to successfully embark on your web design and development adventure!

A) Index:

PRE: The 3 D’s

1. Gathering
2. Concept
3. Photoshop
4. Client Approval #1
5. HTML (front-end)
6. Code (back-end)
7. Client Approval #2
8. Uploading & Testing

B) Tools Required: (I’ll go through all of these tools in detail below)

1. Pencil
2. Paper
3. Photoshop (or other design tool)
4. Dreamweaver (or other web-development tool)
5. Copies of all the common browsers (see below for more info)
6. Filezilla (or other FTP tool to communicate with your web server)
7. Domain Name (your www. address)
8. Web Host such as GoDaddy (or something similar)
9. A computer
10. A passion for being creative!

——————————————————————————–

A) Index:

PRE: The 3 D’s

All websites in the world require 3 things.

A Domain Name. Through companies like GoDaddy, you can purchase names for small fees per year. If the name you want is something popular, consider purchasing it at the beginning of your build-process, after all, it’s good for a year.

A Dedicated Host Once you’ve selected a hosting package, you’ll have to log in and set everything up. You’ll have to point, or park your domain name at your hosting setup as well. Once all of that’s done, setup your FTP program so you’re connections to your server are working.

A Designed, and Developed Web Site (your stuff!). This tutorial will cover off on this one!

1. Gathering

The type of site you use and the tools you’ll need will vary a lot depending on the requirements of your client. A website built to do nothing but show pictures will have significantly different technology in the back-end than a page built to allow for discussions. Likewise, a site built for security with employee data and a login system will look entirely different yet.

Knowing what your client needs is the first real step in the building process. Make yourself a checklist and take it with you when you speak with your clients. Over time develop the checklist into a comprehensive consultation document. Be prepared for additional chat though. The most critical component of early web building is proper communication to ensure you and your client remain on the same ‘design’ page. The last thing you want to do is misinterpret their interests and spend 5-6 hours building something they didn’t want in the first place.

2. Concept

You’ve got all of your initial information. Now it’s time to sketch our concept design. You DO NOT need to be an artist for this. The purpose of this concept phase is to remove the computer and other distractions so you can visualize the design in your head.

Throughout this stage, we’re looking for general themes. What colours will we use, what header / body / footer layout will we go for? 2 column vs 3 column? Fixed or Liquid layout? Will the news display over here, or over there? What kind of navigational menu do we want, image based or CSS based? Sketch until your pretty little fingers bleed. You want to have an actual design on paper, something you’re pleased with. It’s incredibly easy to start over while your using a pencil but 3 hours into a designing session in Photoshop is NOT where you want to be when you realize eggplant yellow and rounded corners weren’t the way to go…

3. Photoshop

So we’ve got our concept on paper, now it’s time to transfer this design into Photoshop (or other similar program).

This phase is critical to ensuring we have a flexible method through which to make changes later on. It’s also paramount in ensuring our web page is cross-browser compatible later.

I’ll assume you’re using Photoshop and I’ll also assume you know something about it, ie: what layers are the general process of creating a graphic by using multiple layers to keep elements separated. If you not familiar with this process, head on over to HERE and spend some time learning the ground-work.

Assuming all of that (I assume a lot, I know!) let’s begin…

Typically if I were to create a picture in Photoshop, of a house on a lake, with a sun overhead I would do the following:

1. Delete the background later.

2. Create a new later ‘page’ to hold everything.

3. Create a new layer ‘house’.

4. Create a new layer BELOW that ‘lake’.

5. Create a new layer BELOW both of those ‘sun’.

In this way, I’ll have automatically setup the depth of my picture. The sun will appear behind the lake, which will appear behind the house. I can then design within each layer to keep things organized.

When designing a web site, you follow these same principles, but in a much more complete way.

If we think of the typical web page as having 4 components, those components would be: PAGE (or WRAP) to hold everything, HEADER, BODY, FOOTER. Keeping this in mind, in photoshop we create ‘layer groups (or sets in older versions)’ which follow the same flow.

1. Create a new layer group called ‘page’.

2. Within that, create new layer groups called ‘header’, ‘body’, and ‘footer’.

3. Within each of those, create individual layers (not sets) to break apart the various design elements.

When you’re done in Photoshop, if you look on the right, you should literally have a collapsible hierarchy of design elements that all collapse up into one top-level

element called ‘page’. Clicking that one layer group should reveal 3 layer groups within called header, body and footer. I’ve left out navigation and sidebar etc but those would have their own layer sets as well if you are building them.

By following this method, you’ll have a very organized and clear layout. You can come back and edit specific sections later on without having to worry about layering, depth, or moving the wrong components etc.

4. Client Approval #1

It’s not time to show our client our Photoshop (or similar) design. At this point it’s a picture only. We should have placeholder text and links in though so it appears exactly as a full, written web page would look. Use fake pictures if you need to. We want this to represent the web page as closely as possible.

We’ll go back and forth in this phase until the client approves of our graphical design. Once that’s done – congratulations! The design work is complete!

5. HTML (front-end)

Open up Photoshop and ensure all of your individual layers are saved as .GIF or .JPG or .PNG, or whatever format you want to use. We’re going to need everything in that format for the web.

NOTE: When saving in Photoshop, ensure you choose ‘save for web or devices’ as this offers some additional compression options for low bandwidth environments.

Open Dreamweaver (I know, I know, you’re EXCITED!) and create a new XHTML page. Yes, I said XHTML, not HTML (though they can be labeled the same when picking from the Dreamweaver ‘new’ menu. If you’d like to know why, check out this article. In a nut shell, it’s better, cleaner, more proper, and will ensure your code is more functional and valid.

Your new blank web page will look something like this:

<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&#8243; /> <title>Untitled Document</title> </head> <body> </body> </html>

Start by creating our basic layout with DIV’s. It should look like this once complete.

<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&#8243; /> <title>Untitled Document</title> </head> <body> </p> <div id="page"> <div id="header">This is the header!</div> <div id="body">This is the content!</div> <div id="footer">This is the footer!</div> </p></div> <p> </body> </html>

Once that’s complete, build your page, placing the design elements into their appropriate spots. Once you’ve got this single, XHTML page working, in multiple browsers, you can stop if you wish at this point. However, there are a few more steps we can take to further clean up our code.

Currently, this page is large and unwieldy. As we add content, it will become difficult to discern where on the page certain things begin and end. To combat this, we can use PHP files to store our content and simply include them in our index page. Note, to do this you’d need to change your index page from a XHTML page to a PHP page.

I won’t get into includes, but this is essentially what the page could look like after you’ve finished including everything.

<?php include('header.php');?> <?php include('navigation.php');?> </p> <div> This is the only actual content on our page. Everything else is being included using PHP. It doesn&#8217;t matter how large the other files are, this is all we&#8217;ll ever see when we&#8217;re working in development mode on this page. Clean eh!?! </div> <p> <?php include('sidebar.php');?> <?php include('footer.php');?>

REMEMBER: Nothing is dynamic at this point, we’re building a basic, static page, with default news, fake pictures, etc. Nothing is coded in the back-end at this point.

Regardless of how little or how much organization you work into your page layout, the goal of this entire phase is to have a STATIC page, that looks exactly like our photoshop page, that works in multiple browsers. If we’ve gotten this far, we’re almost there!

6. Code (back-end)

Aside from the navigation buttons working, everything else on the site is probably broken. We’ve manually written in all of our text, and none of our gadgets work.

At this point we want to start coding in the back end, gadget by gadget.

For example. If we have a news section on our page, right now in our static page we’ve simply written that news in there. Instead, we’d like that news to be automatically entered when we create a new article, with some automatic program that doesn’t involve opening Dreamweaver each time. This is what we call a ‘Content Management System’ or CMS.

There are various forms of it out there. I won’t get into it at all, but Joomla and WordPress are great ones to begin with.

Alternatively, if you’re like me and like learning how the gears work from the bottom up, you might challenge yourself to learn MYSQL and PHP more extensively and simply write a little news gadget that reads and writes to a databases – it’s completely up to you!

Either way, the important part of this phase is to leave the design alone and work on adding life to all the gadgets and widgets on your page. Create that login system, create that user system, how about a gallery, a calendar, a CMS, maybe a guest-book or a comments box… it’s completely up to you. Remember, for every gadget, you should have designed it FIRST so you have it in Photoshop as a design. That way the design component is gone and you’re just coding the back end.

If you get caught up trying to design, AND code something in at the same time, trust me… it can sap your days away as you struggle to fight with misaligning CSS boxes etc.

Design it, then Develop it. Rinse. Repeat. Success.

7. Client Approval #2

It’s time to go back to the client and show them the development work you’ve been doing. Show off your login system, show off your gallery. WOW them! If they aren’t WOW’d, go back and tweak some stuff, sometimes all the way back to the design phase.

Rinse and repeat until you, and your client, are comfortable and satisfied with the current site.

8. Uploading and Testing

Up to this point, you would have either built everything locally and uploaded it piece-wise to test on the web server, OR, you might have used a program like WAMP to run a local server.

If you’ve been uploading everything to the web server, you’re finished! The website will already be up there.

If you’ve been running everything locally and using something like localhost to test the site, you’ll now need to upload everything to your web server. Once that’s done, you have to test everything again. MYSQL databases will likely be broken and need re-pointing, likewise things might operate slightly differently on that server for whatever reason.

Go through and ensure everything works up on the server.

Once that’s done, you’re finished! Congratulations on building and uploading your first web page!

——————————————————————————–

B) Tools Required:

1. Pencil

A pencil or pen, it doesn’t really matter. You’re going to need something to do the conceptual design with.

2. Paper

To go with the pencil or pen

3. Photoshop (or other design tool)

You’ll need something to do the graphical design with. Photoshop it self is quite pricey. If that’s not an option for you, or if you don’t have access to it via some shared resource, then do some research and find some free or cheap alternatives. I won’t comment on those here as I personally use Photoshop.

4. Dreamweaver (or other web development tool)

This is your bread and butter. This is the tool you’ll spend most of your time in. This is the tool that allows you to actually build the web pages, to write the code, to create your functions, to tie your graphical genius in with your buttons, forms and dynamic content.

To be quite honest, Dreamweaver it self is the most complete and by survey, most popular tool for the job. If you’re planning on getting into design and development seriously, this is worth the money.

However, there are alternatives if you can’t afford that. Again, do some research and you’ll find some cheaper/free alternatives that will do the job as well.

5. Copies of all the common browsers

I’m not going to specifically reference the browsers you should code for. The intention of this article is to be valid for more than just the several months in which it was written.

That said, visit this WC3 resource to get a listing of the currently used browsers and their market share of the internet. The list as of today, looks like this:

2010 IE8 IE7 IE6 Firefox Chrome Safari Opera

April 16.2% 9.3% 7.9% 46.4% 13.6% 3.7% 2.2%

March 15.3% 10.7% 8.9% 46.2% 12.3% 3.7% 2.2%

February 14.7% 11.0% 9.6% 46.5% 11.6% 3.8% 2.1%

January 14.3% 11.7% 10.2% 46.3% 10.8% 3.7% 2.2%

If I were building a site today for a client, I’d ensure it was compatible with Firefox, Chrome and IE 7+. That’s 85% of the market. Personally I don’t believe in backwards designing sites to reach back 3 browser revisions (IE 6). The types of hacks and fixes needed to get a site to operate correctly back that far are not worth the time. Shoot for 85% and you’ll be golden.

6. FileZilla (or other FTP tool)

You’ll need a tool like this to upload and download files from your web server. This is going to be a common task for you once you begin so find something you enjoy using and stick with it.

7. Domain Name (your www address)

Every site needs a registered name. I’ll get into the specifics more in the instructions but essentially, you will at some point need this before you can complete your client’s website.

8. Web Host (such as GoDaddy)

Every site needs physical space on the web somewhere. Hosting companies provide this. Companies like GoDaddy sell you space on one of their servers on which you can park your website files. For this you pay a small monthly fee.

Personally I’ve had incredible success with GoDaddy, but there are many out there to choose from.

9. A computer

Sorry folks, not optional. Laptops work great as well for you coffee-shop coders

10. A passion for being creative!

Corny, but true. This is NOT a business to get into simply because you want to pay the bills and have good computer skills. If you’re not really vested, and interested in the work your doing, it’ll show in the lackluster designs, rushed coding, and sloppy work you do.

Do yourself a favour, ask yourself this question: “Could I build websites as a hobby and enjoy it?” If you answered “yes” then this is a great business to get into.

E-Learning Using Semantic Web and End-User Programming Techniques

Introduction

Although there are web modelling tools available it still needs considerable effort to adapt these tools for educational use. Research is needed into creation of Semantic Web models for educators to use in order to create learning objects and models. This educational modelling research should focus on the creation of a web based knowledge management system, and migration of simple models that are normally created in spreadsheets to a shared learning environment.

With the development of technologies under the broad terms of Semantic Web and Web 2.0 there are opportunities to establish a highly interactive web based learning environment. The constructionist approach to understanding problems is to learn about them by modelling them. This approach can be used in combination with research into enabling end-user programming techniques in order to provide an environment for non programmers to model their problems. Visualisation and interaction provide rapid feedback that gives a powerful representation of the environment to be modelled.

Many people would like to make greater use of computer technology but are hampered by the need to learn programming languages if they are to fully interact with software. Instead they are limited to the use of certain features that are provided for them. A further constraint is the cost of software, and it is important to develop free software and encourage a community of end-user developers, and modellers.

The aim should be to create a software development environment that enables people to customise their own software solution. This is an alternative to provision of software as a finished article that can’t be changed. The e-learning software can be customised without requiring programming expertise.

Methodology

A Semantic Web modelling infrastructure could be created to be the basis of future research in learning systems. In order to achieve these aims it is important to examine applications that assist in model building and critically review them. The system we could be used to promote engineering to a skeptical public who see the profession as poorly paid and dirty, ‘House of Lords Select Committee on Science and Technology report science and society’ [1], and remote from the public [2]. The aim of this research is to try to bring together the areas of E-Learning, End-User Programming and the Semantic Web.

Since Engelbart’s Augment [3] there have been attempts to create systems to aid learning. Papert [4] and Smith [5] built on the Augment research to develop a method of Human Computer Interaction (HCI) that can be applied to e-learning. These systems were defined prior to the Semantic Web. It is important now to re-examine and apply this research using Semantic Web/Web 2.0 tools and techniques. Some examples are available [6], more information about the history of end-user programming is available [7].

Mechanisms of Web 2.0 [8] applications include Google web spreadsheets [9]. These applications are increasing in popularity, and can provide modelling capability over the Web, the use of Web 2.0 for public policy is examined in [10]. The advantages of open source collaboration are that as well as allowing researchers to co-operate and work together where they share an interest; it also allows the untapped potential to be developed of those who do not have an official research position. This includes students, people employed outside the academic environment, retired people and amateurs who have useful expertise. Astronomy, for example, has harnessed skills of this very diverse range of people to make new discoveries. The expertise provided by anyone involved can be applied to feedback on usefulness, or ease of use of software, as well as actual involvement in software development. This means feedback would be sought from users of software even if they were not software experts. Researchers would benefit the community by providing education tools online and for libraries. This is different from other open source communities in that the intention is to make the software easier to use and develop, and so involve those who have not previously been capable of participating in software development.

An E-Learning and Modelling tool could bring together experts in science, engineering, systems modelling, computing, web development, and Human Computer Interaction. In any location there are likely to be several researchers examining a different part of a related overall subject, such as web based systems. This means there is a need to co-ordinate researchers, in computing and engineering in a project to link together work on information management and visualisation for modelling and decision support.

Many people who are experts in their domain want to create software models. Scaffidi et al [11] show that most people who develop software are end users not professional programmers. End-user programming is particularly important in this research to make it possible for people who do not have a programming background to create their own educational tools. Semantic Web tools and techniques can be used to create a web based end-user programming environment, these aims are also explained in [12]. People can then use this to create their own software. This software could allow interactive visual modelling of information. This corresponds to the type of work normally undertaken using spreadsheets for modelling, and web editors for knowledge management.

Semantic/Web 2.0 Web Tools

The need is for an alternative way of representing these models, which does not require the user to write code. The tool created must make it practical to interact with and change educational models and to share information with others. Such a project can involve use of editing tools such as wikis [13][14][15], blogs, and semantic web editors [16][17][18] to allow discussion and explanation of the models.

There is an urgent need for Semantic Web tools to illustrate the benefits this technology can provide for education, ‘EASE: The European Association Semantic Web Education’ [19] explains this need. Some Semantic Web tools are available, explained by EASE and in the Jena User Conference [20] or being developed at present, but they are still difficult for people to make use of as they require a good deal of development expertise. REASE (the repository of EASE for learning units) [21] provides a way to find and create learning materials for industrial applications of Semantic Web technologies.

The key problem is enabling a Semantic Web infrastructure that will be the basis for future research in learning systems. To achieve this, a modelling environment needs to be created in order to allow people to customise their own models. This environment can be created using an open standard language such as XML (eXtensible Markup Language). As the high level translation this infrastructure would depend on tools developed in order to assist the user, provide an interface and manage the user interface. This is why tools should be used such as Protégé [13], Amaya [16][17][18]. Until recently XML has been used to represent information, and programming languages used for actual code. Semantic languages such as XML can be applied to software development as well as information representation, as they provide a higher level declarative view of the problem. Semantic Web techniques should be used because they can facilitate computer based communication. Berners-Lee defined the Semantic Web as ‘a web of data that can be processed directly or indirectly by machines’ [22]. Flexibility is essential when different people are not all using the same systems. To achieve this flexibility ontology languages such as the open standard OWL (Web Ontology Language) [23] can be used. OWL can be searched using SPARQL [24] because it is based on RDF (Resource Description Framework)/XML, and can be searched and accessed using XQuery [25] and XForms [26].

End-User Programming

An end-user programming project could involve co-operation with the Institute for End User Computing (IEUC) [27]. Other End-User Programming Consortiums are End-Users Shaping Effective Software (EUSES) [28] and Network of Excellence on End User Development (EUD.Net) [29]. An end-user programming environment can make use of ‘Program Transformation’. Program Transformation allows for writing in one representation or language, and translating to another. This is particularly useful for language independent programming, or for high level end-user programming that can then be translated to a language more easily understood by computer systems. This research is influenced by the theory of constructionism explained in [30] and the use of Logo for teaching [31] and [32]. This research could be particularly focused on the web environment, as this is cheap to support and allows for distributed modelling, and learning [30].

Human Computer Interaction

Use of the Semantic Web is to be a means for open standard representation of learning material, transformation into different representations as required, and for provision of a high level interface as a tool for model creation, and translation to educational objects. To achieve this is necessary to create a translator that converts the diagrammatic representation of a problem into e-learning objects. Translations could be performed into any programming or meta-programming language or open standard information representation language, the visualisation of the model created could be displayed on the web. A two way translation is needed between human and computer, and between different software environments. This definition used by Simons and Parmee [33] explains the aim “a kind of action that occurs as two or more objects have an effect on each other. The idea of a two-way effect is essential to the concept of interaction, as opposed to a one way causal effect”.

This communication strategy improves opportunities for end-user programming, sharing of information, and education of both users and computer software. The analogy of educating computer software to do what the user intends is called programming by demonstration in ‘Watch What I Do: Programming by Demonstration’ [34]. The user has the role of an educator of the software which acts as an apprentice to learn what is required. Learners are thus able to instruct the software and so program solutions, using an adaptive modelling tool. The education is then a two way process of the user learning from computer based software, and the software learning to do what the user requires. In order to enable understanding of the models and e-learning objects it is essential to visualise them and allow interaction. The visualisation can be depicted in various ways. Two examples are: as a tree (that can be colour coded to represent different types of information) and as an interactive SVG (Scalable Vector Graphics) diagram of a component to be modelled. SVG is an XML based syntax so can be searched and modelled as such. Examples show a tree based representation of engineering components [35], and how a tree based representation is converted into an interactive diagrammatic representation [36]. Transformations are performed between a taxonomy representation of information into many different visualisations and software representations. This process converts an abstract representation of a problem to a concrete model created with the aid of two way communication between the user and the modelling tool.

Highly interactive web pages that act like programs to provide a user interface can be used to provide an interactive User Driven Programming environment. These interactive web pages can be based on visual programming languages such as Alice [37]. Interactive web programs can also be created using scripting languages and XML combinations such as AJAX (Asynchronous JavaScript And XML), which is an overall name for techniques to create highly interactive web pages. Ajax techniques for creation of interactive web models will assist computer literate end-users in programming tasks on the web [38].

Collaborative Modelling

Huhns [39] and Paternò [40] both explain that alternatives to current software development approach are required. The need is to translate from a model-based visual representation understood by users to software. Johnson [41] explains that successful interaction requires mapping between levels of abstractions and that translation between these abstraction levels required by users and computers is difficult. He explains that this problem often means systems are created that make the user cope with the problems of mis-translation. The representation of rules and information can be illustrated diagrammatically. It is possible to describe algorithms through concrete examples rather than abstractly. Models must be designed and visualised so that they convey to users a representation of a problem that assists with their vision of it. This subject is explored in [42] and is the basis of our visualisation techniques that enable users to create and understand models, which are translated into software representations.

Conclusion
Advantages of this research are : –

– Creation of an open standard online e-learning environment that is usable by non-programmers.

– Enabling of creation of e-learning objects by non programmers.

– Enabling widespread dissemination and sharing of models over the web.

– Provision of an educational resource for students, scientists, engineers, software developers, arts, and business.

– Increased user involvement in e-learning development to allow savings in cost and time taken for this development, and enable greater creation and use of educational tools.

– Availability of e-learning models and interactive visualisation of educational objects much more widely using browser based software.

– Enabling many more people to program.

– Opening up opportunities to people currently outside formal education.

This research can bridge the gap between computer literate people and e-learning software creation. This can give a practical illustration of the benefits end-user programming and Semantic Web techniques could provide for e-learning.

References

[1] Select Committee on Science and Technology Third Report Chapter 2: Public Attitudes and Values – Attitudes to engineering 2.39 – http://www.publications.parliament.uk/pa/ld199900/ldselect/ldsctech/38/3804.htm.

[2] Canavan B, Magill J, Love D, A Study of the Factors Affecting Perception of Science, Engineering and Technology (SET) in Young People (2002), International Conference on Engineering Education, August 18-21, 2002, Manchester, U.K.

[3] Augment – http://www.cems.uwe.ac.uk/amrc/seeds/PeterHale/EndUserHistory/Augment.htm.

[4] Seymour Papert – Logo –http://www.cems.uwe.ac.uk/amrc/seeds/PeterHale/EndUserHistory/Logo.htm.

[5] Smith, D. C., 1977. A Computer Program to Model and Stimulate Creative Thought. Basel: Birkhauser.

[6] Examples Page – http://www.cems.uwe.ac.uk/amrc/seeds/models.htm.

[7] History of End User Programming – http://www.cems.uwe.ac.uk/amrc/seeds/PeterHale/EndUserHistory.htm.

[8] Mayo, E., Steinberg, T., The Power of Information, 2007 http://www.cabinetoffice.gov.uk/publications/reports/power_information/power_information.pdf?id=3965 Cabinet Office – An independent review.

[9] Google, 2007. Create and share your work online https://www.google.com/accounts/ManageAccount.

[10] JISC (Joint Information Systems Committee) Technology and Standards Watch. 2007. What is Web 2.0? Ideas, technologies and implications for education.

[11] Scaffidi, C., Shaw, M., Myers, B. (2005). Estimating the Numbers of End Users and End User Programmers, IEEE Symposium on Visual Languages and Human-Centric Computing, (VL/HCC’05): 207-214 Dallas, Texas.

[12] Stutt, A., Motta, E., 2004. Semantic Learning Webs. Journal of Interactive Media in Education, 2004 (10). Special Issue on the Educational Semantic Web. ISSN:1365-893X – http://www-jime.open.ac.uk/2004/10.

[13] Protégé Community Wiki – User Driven Progamming – http://protege.cim3.net/cgi-bin/wiki.pl?UserDrivenProgramming.

[14] Vanguard Software Modelling Wiki – http://wiki.vanguardsw.com/bin/browse.dsb?dir/Engineering/Aerospace/.

[15] Visual Knowledge [http://www.visualknowledge.com] – Semantic Wiki.

[16] Quint, V., Vatton, I., 2004. Techniques for Authoring Complex XML Documents, DocEng 2004 – ACM Symposium on Document Engineering Milwaukee October 28-30 – http://wam.inrialpes.fr/publications/2004/DocEng2004VQIV.html.

[17] Quint, V., Vatton, I., 2005. Towards Active Web Clients, DocEng 2005 – ACM Symposium on Document Engineering Bristol United Kingdom 2-4 November – http://wam.inrialpes.fr/publications/2004/DocEng2004VQIV.html.

[18] Amaya, 2007. Welcome to Amaya – W3C’s Editor/Browser http://www.w3.org/Amaya/.

[19] Diederich, J, Nejdl, W, Tolksdorf R, 2006, EASE: The European Association for SemanticWeb Education, SWET2006 Beijing, China.

[20] Jena User Conference, 2006, Bristol, UK [http://jena.hpl.hp.com/juc2006/proceedings.html] – Proceedings (2006).

[21] REASE the repository of EASE for learning units [http://ubp.l3s.uni-hannover.de/ubp].

[22] Berners-Lee, T, 1999, Weaving the Web, Harper San Francisco, ISBN 0062515861.

[23] Bechhofer, S., Carrol, J., 2004. Parsing owl dl: trees or triples?. Proceedings of the 13th international conference on World Wide Web, NY, USA, pp 266-275.

[24] SPARQL http://dret.net/glossary/sparql – Simple Protocol and RDF Query Language

[25] World Wide Web Consortium (W3C), 2006. XQuery 1.0: An XML Query Language http://www.w3.org/TR/xquery/.

[26] Bruchez, E, 2006. XForms: an Alternative to Ajax?. XTech 2006: Building Web 2.0 16-19 May 2006, Amsterdam, The Netherlands.

[27] Institute for End User Computing http://www.ieuc.org/home.html.

[28] Network of Excellence on End User Development EUD.Net http://giove.cnuce.cnr.it/eud-net.htm.

[29] End-Users Shaping Effective Software (EUSES) http://eusesconsortium.org/.

[30] Resnick, M., 1996. Distributed Constructionism. In: Proceedings of the International Conference on the Learning Sciences Association for the Advancement of Computing in Education, Northwestern University – http://llk.media.mit.edu/papers/Distrib-Construc.html.

[31] Papert, S., 1999. What is Logo? And Who Needs it? An essay. LCSI’s book, Logo Philosophy and Implementation. http://www.microworlds.com/company/philosophy.pdf.

[32] MIT Logo Foundation, 2006. What is Logo? http://el.media.mit.edu/Logo-foundation/logo/index.html.

[33] Simons, C. L. Parmee, I. C., 2006, A manifesto for cooperative human / machine interaction, object-oriented conceptual software design, Advanced Computation in Design and Decision Making group Technical Report TR091006 – http://www.cems.uwe.ac.uk/~clsimons/Publications/CooperativeInteraction.pdf.

[34] Cypher, A, 1993, Watch What I Do Programming by Demonstration, MIT Press, ISBN:0262032139.

[35] Hale P, http://www.cems.uwe.ac.uk/~phale/Flash/FlashHCI.htm – Spar – Tree based representation.

[36] Hale P, http://www.cems.uwe.ac.uk/~phale/InteractiveSVGExamples.htm – Interactive Examples.

[37] Alice [http://www.alice.org/-] Alice v2.0 – Learn to Program Interactive 3D Graphics.

[38] Cagle K, AJAX on the Enterprise, AJAXWorld conference, October 4, 2006 – http://www.oreillynet.com/xml/blog/2006/10/ajax_on_the_enterprise.html.

[39] Huhns M, 2001, Interaction-Oriented Software Development, Journal of Software Engineering and Knowledge Engineering.

[40] Paternò F, 2005, Model-based tools for pervasive usability, Interacting with Computers Vol 17(3), pp 291-315.

[41] Johnson, P., 2004. Interactions, Collaborations and breakdowns. ACM International Conference Proceeding Series; Proceedings of the 3rd annual conference on Task models and diagrams

[42] Crapo A W, Waisel L B, Wallace W A, Willemain T R, 2002, Visualization and Modelling for Intelligent Systems, Intelligent Systems: Technology and Applications, Vol I Implementation Techniques pp 53-85.

Is It Really Easy to Develop Web Design?

To develop web design it is not enough just to install a powerful graphics editor on your personal computer. You should at least learn how to use this editor. And to develop really nice and attractive web design which will be able to attract target visitors you should also learn the basics of web development, Internet marketing, psychology…

To develop web design is not a simple task as a website should be not only nice but also functional. It should make a positive impression on the visitors. This impression can be achieved due to the right choice of the website background, fonts, color gamma, decorative elements, competent arrangement of all page elements.

For example, the choice of website background in many respects depends on the type of the page layout, i.e. if it is flexible or fixed-width. If the page layout is fixed website content is located in the columns that have fixed width. If the width of the computer display exceeds the set width of such fixed columns, a lot of “empty space” appears. Will this space look normal? You should consider this question beforehand.

When you develop web design you should always take into account that design which is embodied on the paper and design which is embodied on the Web may be perceived in totally different ways. For example, serif fonts look very attractive when they are printed on the paper and it is very easy to read a book or newspaper with a serif font. But serif fonts are very hard to perceive from the computer display; they are very tiring for the eyesight. Therefore it is better to use sans-serif fonts (Arial, Helvetica, Verdana) during web design development.

When you develop web design you should also keep in mind that the overwhelming majority of the Internet users have installed only standard fonts. The rest of the fonts are often paid (for example fonts developed by Adobe Systems Incorporated) and not all Internet users can afford themselves to purchase them. The use of such paid fonts in web design of your site is inappropriate.

As a rule, the choice of the color gamma of the site is based on the analysis of needs of the site target audience. For example, target visitors of the site which belongs to the company that manufactures copper pipes in most cases are the representatives of the companies which sell copper pipes or use them in their own manufacture. Will such target visitors like “acid” color gamma of website design? Will they find such website attractive and trustworthy? We guess they won’t.

Decorative elements used during the development of web design should meet their intended purpose – their goal is to decorate the site. If decorative elements are excessively used in website design, if they prevent the visitors from perceiving information at the site, such elements are harmful for the site.

Non-professional development of web design may result in a whole number of mistakes which have a negative influence on the site effectiveness. Here are only some of the most typical mistakes.

Photos which illustrate the company’s activity have too low quality or compression artifacts. It strikes the visitors’ eyes right away and reduces their level of confidence in the company.

The texts at the site are typed with a very small font or the font color is practically identical to the background color. It prevents the visitors from studying the information at the site as such fonts are very tiring for the eyes.

The background color is too bright, motley. The text gets lost on such background, it is hard for visitors to read anything.

Along with the listed mistakes there also are a lot of other mistakes of web design development. All these mistakes may be rough or minor, but the result is always the same – the visitors leave the site, they do not purchase the company’s goods or order its services. And it the visitors do not convert into clients, the site does not perform its functions.

To develop a website means to provide your company with a powerful tool which stimulates the purchase activity (or any other kind of activity if your site is a non-profit one). Therefore only professional web designers are able to develop web design which will meet all modern requirements.