If you are involved in any Internet activity, particularly for work or business, you may have come across the term "Web content". It may seem an odd expression and understandably baffles people. However, it is a key concept to understand if you are trying to make a success of an Internet business or other online project. In this article we will outline what Web content is, how it is produced and what people use it for.
Content Types
The Web presents many different types of content to the people browsing it. Content types include text, data and various media types such as images, video, audio and animation, not to mention interactive components. Most modern Web pages contain multiple types of content within them, since Web users have come to expect a stimulating, engaging and interactive experience when they visit a site.
If you are building a website, it is necessary to give careful consideration to the content you wish to include on each page. Striking a balance between having enough content and not too much can be tricky. Text content is arguably the most important in terms of success or failure. Successful text content for a website is relevant to the purpose of the site, provides useful material to the people visiting the site and is written to a high standard of quality.
For media content types, there are a number of additional considerations. For certain media items such as audio, video and animation, end-users may require particular software programs. This can naturally cause problems accessing those media items, particularly for users of certain device types and operating systems. It is also important to remember that many website users are now browsing on mobile devices such as smartphones, netbooks and tablet PCs. In these cases, there may be a low bandwidth and limited Internet connectivity generally. For this reason it is advisable to use media items such as images with the smallest file sizes you can achieve while still maintaining an acceptable level of quality.
Content Delivery
Websites use a variety of techniques for delivering their content to users. Most sites are now dynamic, which means that the content is stored in database systems and built into Web pages when users' browsers request them. This process involves server side scripting. Server side scripts run when users request pages, fetching data from the database and building it into the resulting pages before returning these to the browser, or client.
Dynamic techniques have also produced Content Management Systems for authoring and delivering content. A CMS system allows people who do not have Web development or programming skills to create and publish website content. CMS programs such as Joomla and Wordpress are behind many of the most successful sites on the Web, for retail businesses, online newspapers and magazines, social media sites and many more.
How is Content Used?
Of course the most obvious use of content is to convey information to website users, but there is a lot more to it than that. Some organisations also create text content to drive traffic to their sites, publishing the content on other sites such as blogs and including links back to their own Web properties from there.
Many people focus on attracting search engine traffic using Search Engine Optimisation (SEO) techniques to tailor the text content of a site. These techniques have a limited and reducing value, as the search engines are always improving their algorithms to present their users with the most relevant results first. The only genuine way to perform well in the Search Engine Results Pages (SERPs) is to focus on creating good quality, relevant content on your site.
At its essence, Web content is anything you see on a website. However, the surrounding issues are complex and making best use of content can have a huge impact on the outcome of any Internet project.
See also:
Showing posts with label Web development. Show all posts
Showing posts with label Web development. Show all posts
Friday, 31 August 2012
Thursday, 30 August 2012
How To Get Started With Web Development
Anyone can teach themselves the skills involved in Web development, but if you're a beginner it can be difficult to know where to begin. In this article we'll go over the basic areas to get yourself acquainted with. Ideally, if you can work through each area in turn, getting yourself to a reasonable level of competence in each before moving on to the next, you'll build a solid foundation in the discipline that you can continue to grow over time. If you do not have much technical experience, try not to be intimidated by the number of technologies involved, just focus on one at a time and within a short period you'll be well on your way to being a competent Web developer.
HTML
The first area to get to grips with is HTML. HTML is known as a markup language. The content of most Web pages is structured within HTML markup. This markup consists of elements and attributes, with each content item in a page listed within one or more element structures.
The first step in creating any Web page is working out what the content is going to be, which may include text, images, media such as videos and interactive items. Once you decide on these content items and have them ready, you will structure them within HTML markup.
The HTML dictates the structure of a page, with each item listed within the body section, and information about the page listed in the head section. The head section gives the user's Web browser information it needs to display the page. To learn basic HTML, you should ideally cover: making a page, including text, links, images and HTML attributes. Once you have the basics of HTML mastered, you can look into other client side technologies.
CSS
Cascading Style Sheets determine the styling and appearance of Web pages, in conjunction with HTML code. CSS code for a page can appear along-side the HTML elements, in the page head section or in a separate file saved with ".css" as the extension.
CSS code can instruct the user's Web browser to display page items in particular ways. CSS dictates such display properties as text/ font style, colours, backgrounds, layouts, borders, margins and padding. The CSS declarations identify particular elements within a page by referring to the element type or using ID and class attributes included in the HTML markup.
The basic techniques involved in CSS are not complex, but the tricky part is testing your pages in different Web browsers, as your designs may appear with significant differences between them. Once you've learned basic HTML, learning the essentials of CSS is not difficult.
JavaScript
JavaScript is used to make Web pages dynamic and interactive. JavaScript code appears within the Web page HTML markup, either in the head or body section, or in a separate file saved with ".js" extension. Such scripts can respond to user interaction with a page, for example altering the appearance of a page element when the user hovers their mouse over it.
Writing JavaScript code is a fundamentally different activity to writing markup code. When you write JavaScript, you are effectively writing programs, with instructions for the Web browser to execute one after another. JavaScript areas to get yourself acquainted with for basic Web development include using logical structures such as loops and conditionals, variables, functions and event listeners. Try not to be too overwhelmed by learning JavaScript if you have no programming experience, as most websites only require small excerpts of code anyone can learn.
Server Side
So far we have focused on client side technologies, which are those technologies that operate in the user's Web browser (the client). Web development also involves technologies functioning on the Web server. These include database technologies and server side scripting.
Many websites store their data in databases in systems such as MySQL or XML data files, rather than coding the data directly into HTML files. In these sites, when the user's browser requests a Web page, a server side script runs on the server computer that is hosting the site. The script may carry out various processes, including querying a data source. The server side script takes the data it has retrieved and builds it into HTML structures, sending these to the user's browser to be rendered there are they would be with a standard HTML page.
If you want to continue learning Web development skills once you have a good grasp of client side development, you can try learning a server side scripting language such as PHP or ASP, as well as data technologies such as SQL and XML.
Conclusion
Web development involves many different skills, with new and emerging areas including HTML5, advanced JavaScript topics such as jQuery and mobile development. If you're new to the area this can all seem pretty intimidating, but in reality most of the technologies are accessible enough for you to teach yourself with the help of the many free Internet tutorials.
There are lots of websites for learning these skills, with W3Schools the main starting point for most people hoping to teach themselves. If you do want to get stuck into Web development, it's best to focus on one skill at a time and not worry too much about how fast your skills are progressing.
Links:
HTML
The first area to get to grips with is HTML. HTML is known as a markup language. The content of most Web pages is structured within HTML markup. This markup consists of elements and attributes, with each content item in a page listed within one or more element structures.
The first step in creating any Web page is working out what the content is going to be, which may include text, images, media such as videos and interactive items. Once you decide on these content items and have them ready, you will structure them within HTML markup.
The HTML dictates the structure of a page, with each item listed within the body section, and information about the page listed in the head section. The head section gives the user's Web browser information it needs to display the page. To learn basic HTML, you should ideally cover: making a page, including text, links, images and HTML attributes. Once you have the basics of HTML mastered, you can look into other client side technologies.
CSS
Cascading Style Sheets determine the styling and appearance of Web pages, in conjunction with HTML code. CSS code for a page can appear along-side the HTML elements, in the page head section or in a separate file saved with ".css" as the extension.
CSS code can instruct the user's Web browser to display page items in particular ways. CSS dictates such display properties as text/ font style, colours, backgrounds, layouts, borders, margins and padding. The CSS declarations identify particular elements within a page by referring to the element type or using ID and class attributes included in the HTML markup.
The basic techniques involved in CSS are not complex, but the tricky part is testing your pages in different Web browsers, as your designs may appear with significant differences between them. Once you've learned basic HTML, learning the essentials of CSS is not difficult.
JavaScript
JavaScript is used to make Web pages dynamic and interactive. JavaScript code appears within the Web page HTML markup, either in the head or body section, or in a separate file saved with ".js" extension. Such scripts can respond to user interaction with a page, for example altering the appearance of a page element when the user hovers their mouse over it.
Writing JavaScript code is a fundamentally different activity to writing markup code. When you write JavaScript, you are effectively writing programs, with instructions for the Web browser to execute one after another. JavaScript areas to get yourself acquainted with for basic Web development include using logical structures such as loops and conditionals, variables, functions and event listeners. Try not to be too overwhelmed by learning JavaScript if you have no programming experience, as most websites only require small excerpts of code anyone can learn.
Server Side
So far we have focused on client side technologies, which are those technologies that operate in the user's Web browser (the client). Web development also involves technologies functioning on the Web server. These include database technologies and server side scripting.
Many websites store their data in databases in systems such as MySQL or XML data files, rather than coding the data directly into HTML files. In these sites, when the user's browser requests a Web page, a server side script runs on the server computer that is hosting the site. The script may carry out various processes, including querying a data source. The server side script takes the data it has retrieved and builds it into HTML structures, sending these to the user's browser to be rendered there are they would be with a standard HTML page.
If you want to continue learning Web development skills once you have a good grasp of client side development, you can try learning a server side scripting language such as PHP or ASP, as well as data technologies such as SQL and XML.
Conclusion
Web development involves many different skills, with new and emerging areas including HTML5, advanced JavaScript topics such as jQuery and mobile development. If you're new to the area this can all seem pretty intimidating, but in reality most of the technologies are accessible enough for you to teach yourself with the help of the many free Internet tutorials.
There are lots of websites for learning these skills, with W3Schools the main starting point for most people hoping to teach themselves. If you do want to get stuck into Web development, it's best to focus on one skill at a time and not worry too much about how fast your skills are progressing.
Links:
Tuesday, 28 August 2012
Web Development Concepts: Client and Server
To put it simply, this is about the relationship between two computers: yours and the server. Client stuff happens on your computer and Server stuff happens on the server. However, although the Client stuff runs on your computer, it's still stored on the server. Make sense? Let's explore it in a bit more detail.
Who's Who
The terms Client and Server are used in Web development contexts. As with all tech terms, these are often used as a concise reference, but are unfortunately also often used when another term would actually be easier to understand. For whatever reason, a lot of geeks seem to love using mystifying language, perhaps to compensate for their crippling social inadequacies (and I include myself in that category) - who knows?
Anyway, Client and Server are fairly easy to get to grips with. They simply refer to where the different functions of a website are run. Server refers (as you might have guessed) to code etc that is executed on the Web server, and Client refers to things that happen within the browser (e.g. Firefox, Internet Explorer, Opera, Safari, Chrome) as it runs on your computer.
The Network
The terms Client and Server are used to reflect the relationship within the computer network (i.e. the Internet). However, you don't need to understand the ins and outs of networking to understand these terms.
The Process
When you browse to a website, a number of things happen. The data and programming code etc for the site are stored on the Web server. The website address identifies the location of the server, and the browser requests the relevant page from this location.
The Web browser receives the HTML content from the server, which it is able to interpret and display as a Web page, together with the text, images, data etc and style rules determining how it should be displayed.
A wide variety of technologies are used in Web development, some running on the server, and some on the client. Your Web browser is basically able to display HTML, but this HTML may be served to it in different ways.
Models
The traditional Web model meant storing HTML pages on the server which are simply sent to the browser and displayed. In this model, the content of a site was all directly written into the HTML files, and had to be manually changed if the information needed changed. However, as sites developed, there became more of a focus on data-driven sites that are said to be 'dynamic'. This simply means that the sites use data and other resources to build the Web pages at the time that they are requested by a browser.
Server side programming is one of the main tools involved in this. Server side languages such as ASP and PHP run on Web servers, creating HTML when they run and sending it to the requesting browser to be displayed. In a typical model, the Web server will have a database on it, plus the other content such as images etc. When someone requests a page, the Server side scripts execute, query the database for any relevant information and write this back to the browser in the form of the HTML page.
Client side programming refers to functionality that is carried out within the browser itself. Many sites try to be interactive in different ways, and one such way is using a Client side language such as JavaScript. This is typically used to achieve things like interactive menus and styles that make the elements in a site change their appearance as you interact with them using your mouse and keyboard - these are generally carried out using CSS (Cascading Style Sheets).
With the emerging techniques in HTML5 and CSS3, websites are becoming even more responsive, interactive and dynamic from both client and server side.
Client and Server Working Together
Some uses of Web technology use the two approaches of client side and server side development in tandem, such as AJAX, as well as many jQuery and HTML5 functions. You'll see examples of these on lots of sites, where an element of the page is updated without the page as a whole being refreshed. In this case a Client side script in JavaScript often sends a request to a server side script (e.g. in PHP), with the returned data displayed in the browser without it having to request a new page. With HTML5, the client side code doesn't even have to request something from the server, the sever can simply push new data for the browser to display.
Usage
If you see someone referring to Client Server Applications or Client Server Development etc, this is really just a reference to the use of a variety of technologies deployed both on the Server and Client. These days, Web development pretty much always involves both so the terms are often redundant. Some developers do specialise and focus on one side or the other, particularly where large Web applications are involved.
Relevance
If you are planning to get involved in Web development yourself, it is vital to understand the process that executes when people view websites. However, if you are only planning on accessing the Web as an end-user, you really don't have to understand these concepts, although they are interesting if you're an utter geek like me.
See also:
What is Dynamic Content?
What is Web Content?
How to Get Started with Web Development
Who's Who
The terms Client and Server are used in Web development contexts. As with all tech terms, these are often used as a concise reference, but are unfortunately also often used when another term would actually be easier to understand. For whatever reason, a lot of geeks seem to love using mystifying language, perhaps to compensate for their crippling social inadequacies (and I include myself in that category) - who knows?
Anyway, Client and Server are fairly easy to get to grips with. They simply refer to where the different functions of a website are run. Server refers (as you might have guessed) to code etc that is executed on the Web server, and Client refers to things that happen within the browser (e.g. Firefox, Internet Explorer, Opera, Safari, Chrome) as it runs on your computer.
The Network
The terms Client and Server are used to reflect the relationship within the computer network (i.e. the Internet). However, you don't need to understand the ins and outs of networking to understand these terms.
The Process
When you browse to a website, a number of things happen. The data and programming code etc for the site are stored on the Web server. The website address identifies the location of the server, and the browser requests the relevant page from this location.
The Web browser receives the HTML content from the server, which it is able to interpret and display as a Web page, together with the text, images, data etc and style rules determining how it should be displayed.
A wide variety of technologies are used in Web development, some running on the server, and some on the client. Your Web browser is basically able to display HTML, but this HTML may be served to it in different ways.
Models
The traditional Web model meant storing HTML pages on the server which are simply sent to the browser and displayed. In this model, the content of a site was all directly written into the HTML files, and had to be manually changed if the information needed changed. However, as sites developed, there became more of a focus on data-driven sites that are said to be 'dynamic'. This simply means that the sites use data and other resources to build the Web pages at the time that they are requested by a browser.
Server side programming is one of the main tools involved in this. Server side languages such as ASP and PHP run on Web servers, creating HTML when they run and sending it to the requesting browser to be displayed. In a typical model, the Web server will have a database on it, plus the other content such as images etc. When someone requests a page, the Server side scripts execute, query the database for any relevant information and write this back to the browser in the form of the HTML page.
Client side programming refers to functionality that is carried out within the browser itself. Many sites try to be interactive in different ways, and one such way is using a Client side language such as JavaScript. This is typically used to achieve things like interactive menus and styles that make the elements in a site change their appearance as you interact with them using your mouse and keyboard - these are generally carried out using CSS (Cascading Style Sheets).
With the emerging techniques in HTML5 and CSS3, websites are becoming even more responsive, interactive and dynamic from both client and server side.
Client and Server Working Together
Some uses of Web technology use the two approaches of client side and server side development in tandem, such as AJAX, as well as many jQuery and HTML5 functions. You'll see examples of these on lots of sites, where an element of the page is updated without the page as a whole being refreshed. In this case a Client side script in JavaScript often sends a request to a server side script (e.g. in PHP), with the returned data displayed in the browser without it having to request a new page. With HTML5, the client side code doesn't even have to request something from the server, the sever can simply push new data for the browser to display.
Usage
If you see someone referring to Client Server Applications or Client Server Development etc, this is really just a reference to the use of a variety of technologies deployed both on the Server and Client. These days, Web development pretty much always involves both so the terms are often redundant. Some developers do specialise and focus on one side or the other, particularly where large Web applications are involved.
Relevance
If you are planning to get involved in Web development yourself, it is vital to understand the process that executes when people view websites. However, if you are only planning on accessing the Web as an end-user, you really don't have to understand these concepts, although they are interesting if you're an utter geek like me.
See also:
What is Dynamic Content?
What is Web Content?
How to Get Started with Web Development
What is Dynamic Content?
When you visit a website, your browser sends a request to the Web server for the content of each page you view. The Web server responds with the page requested and your browser renders it for you to see and interact with. However, what happens between your browser requesting the page and receiving it determines whether the page is dynamic or not. Dynamic content is website content that is delivered in a particular way. In this article we will explain what dynamic content is, how it is achieved and its relative advantages/ disadvantages.
Databases
In most dynamic websites, the content is modelled within a database system. The data comprising the website content in such cases can involve numbers, text and references to media items stored on the Web server. Many businesses use a single database to store their data, which may include retail items, client details and other commercial records. In this case, a company can create more than one system to access and interact with this data.
For example, a company could use a desktop program for their employees, which uses the same database as the website for customer use. Internet newspapers and magazines also store their data in databases, in many cases utilising Content Management Systems (CMSs) to build their sites on top of a data store.
Scripts
With dynamic content, the function of a website involves programming scripts. When the server receives a request from the user's browser for a page on the site, it executes a server side script in a language such as PHP, ASP or Java. This script may do a number of things, but will typically query the database for the page content, then build the resulting data into a page using HTML markup. Finally, the server sends the newly constructed page to the browser that issued the request, also known as the client.
Although dynamic development is a common approach to Web building now, this was not always the case. Before dynamic technologies became so prevalent, static websites were the norm. In a static site, the pages are already built and are stored on the Web server waiting to be sent to the user for viewing.
From the end-user's point of view the process is irrelevant, all they see is the Web page. However, what has happened to deliver the page a user sees is fundamentally different for dynamic content. Essentially, dynamic content is content that is constructed when the client requests it, rather than already being structured as with the static model.
Client Side
Web development is often broadly thought of as comprising two distinct parts, client side and server side. Server side development involves the scripts and databases that execute on the server. Client side development is for those technologies that run within the user's Web browser, including HTML, JavaScript and CSS (Cascading Style Sheets).
Although primarily a matter for server side development, dynamic content can be prompted at client side as well. For example, with JavaScript techniques and tools such as AJAX and jQuery, the user interacting with a page can cause a server side script to execute, returning dynamic content from the server to write into the existing page. With the emerging HTML5 utilities the possibilities are becoming even more dynamic again. For example, with Server Side Events, the server can push dynamic content to the browser without the client side code having to request it.
Advantages to Dynamic Content
Dynamic content offers a number of generic advantages over static content, hence its enormous growth as the Web has evolved. Dynamic sites offer a potentially distinct user experience with each visit, since the page content is fetched anew every time a browser requests it. With a dynamic site, the content, or data, is all stored at a single location. This brings the "single point of change" advantage, meaning that data updates only need to happen in one place, with the entire site fetching the data from the same location, i.e. the database. When combined with interactive technologies at client side, dynamic content can also create sites that are more engaging than their static counterparts.
Disadvantages to Dynamic Content
There is really only one disadvantage to dynamic content, and that relates to the technologies required to deliver it. While most people can pick up basic skills for static development, for dynamic development you really need programming skills. This often means that companies need to hire services from professional developers rather than carrying out the work in-house. The requirement for this expertise also includes maintaining sites in the long run.
Conclusion
You will see dynamic content on almost any website you visit, although you may not be aware of it. Dynamic content is the rule now rather than the exception, and is an essential feature of most successful website projects. By utilising dynamic technologies in association with additional tools such as CMS programs, individuals and organisations can create an efficient, appealing Web presence.
Links:
Databases
In most dynamic websites, the content is modelled within a database system. The data comprising the website content in such cases can involve numbers, text and references to media items stored on the Web server. Many businesses use a single database to store their data, which may include retail items, client details and other commercial records. In this case, a company can create more than one system to access and interact with this data.
For example, a company could use a desktop program for their employees, which uses the same database as the website for customer use. Internet newspapers and magazines also store their data in databases, in many cases utilising Content Management Systems (CMSs) to build their sites on top of a data store.
Scripts
With dynamic content, the function of a website involves programming scripts. When the server receives a request from the user's browser for a page on the site, it executes a server side script in a language such as PHP, ASP or Java. This script may do a number of things, but will typically query the database for the page content, then build the resulting data into a page using HTML markup. Finally, the server sends the newly constructed page to the browser that issued the request, also known as the client.
Although dynamic development is a common approach to Web building now, this was not always the case. Before dynamic technologies became so prevalent, static websites were the norm. In a static site, the pages are already built and are stored on the Web server waiting to be sent to the user for viewing.
From the end-user's point of view the process is irrelevant, all they see is the Web page. However, what has happened to deliver the page a user sees is fundamentally different for dynamic content. Essentially, dynamic content is content that is constructed when the client requests it, rather than already being structured as with the static model.
Client Side
Web development is often broadly thought of as comprising two distinct parts, client side and server side. Server side development involves the scripts and databases that execute on the server. Client side development is for those technologies that run within the user's Web browser, including HTML, JavaScript and CSS (Cascading Style Sheets).
Although primarily a matter for server side development, dynamic content can be prompted at client side as well. For example, with JavaScript techniques and tools such as AJAX and jQuery, the user interacting with a page can cause a server side script to execute, returning dynamic content from the server to write into the existing page. With the emerging HTML5 utilities the possibilities are becoming even more dynamic again. For example, with Server Side Events, the server can push dynamic content to the browser without the client side code having to request it.
Advantages to Dynamic Content
Dynamic content offers a number of generic advantages over static content, hence its enormous growth as the Web has evolved. Dynamic sites offer a potentially distinct user experience with each visit, since the page content is fetched anew every time a browser requests it. With a dynamic site, the content, or data, is all stored at a single location. This brings the "single point of change" advantage, meaning that data updates only need to happen in one place, with the entire site fetching the data from the same location, i.e. the database. When combined with interactive technologies at client side, dynamic content can also create sites that are more engaging than their static counterparts.
Disadvantages to Dynamic Content
There is really only one disadvantage to dynamic content, and that relates to the technologies required to deliver it. While most people can pick up basic skills for static development, for dynamic development you really need programming skills. This often means that companies need to hire services from professional developers rather than carrying out the work in-house. The requirement for this expertise also includes maintaining sites in the long run.
Conclusion
You will see dynamic content on almost any website you visit, although you may not be aware of it. Dynamic content is the rule now rather than the exception, and is an essential feature of most successful website projects. By utilising dynamic technologies in association with additional tools such as CMS programs, individuals and organisations can create an efficient, appealing Web presence.
Links:
Monday, 27 August 2012
What is Web Content?
It goes without saying that Web content is the content of websites. However, the topic is actually a relatively complex one. Despite the importance of Web development technologies and Web design, the single most important aspect of any site is its content. Content makes the difference between a website's success and failure. This is therefore a vital topic for anyone involved in the Web, particularly where business is concerned.
In this article we will run over the different types of Web content, explain the ways in which this content is delivered to website users and overview a couple of the most important associated technologies and techniques.
Text
By far the most common type of content on websites is text. Text content appears on pretty much every website you are likely to come across. The text within a website includes not only the excerpts you see within the page, but also the titles of pages, the domain for the site as a whole and lots of textual items that appear within the markup of each page.
In the past, many webmasters have attempted to manipulate the search engines to drive traffic to sites by targeting keywords and phrases within website text. The aim in this approach is to make a site appear as close to the top of the search engine results pages (SERPs) for those phrases as possible, making it more likely that people searching for those phrases will visit that particular site. However, the search engine algorithms are always growing in complexity and reducing the effectiveness of this technique. For this reason, the best way to make a site perform well is to simply publish textual and other material that is relevant to the purpose of the site and that provides high quality, useful information.
Although there is little point structuring text content to artificially draw search engine traffic, there is a real art to writing successfully for the Web. People read text differently on the Web than on printed media, with more of a tendency to scan content and less tolerance for text excerpts that are lengthy. Successful Web writing typically involves shorter sentences and clauses, rather than long, complex sentences with lots of punctuation. It is also worth bearing in mind that your readers may be reading in a second language, as they could be from literally anywhere in the world.
Media
Web media comes in many forms, including images, audio/ sound, video, animations and interactive variants on each of these. When deploying media items on websites, there are a number of potential issues to consider. These issues relate to the range of users who will be accessing a site. We have all become accustomed to seeing various types of media when we visit websites, and expect a high level of stimulation in general. Media items can make a site very engaging, but bring with them a range of considerations.
Users can be browsing to a site on a vast range of device types, operating systems and Web browsers. This means that for a successful site, developers and webmasters need to choose content items that are as accessible as possible to this range of environments. For example, if a user is browsing on a mobile device such as a smartphone, they may have limited connectivity. For this reason, many developers look to minimise the size of media resources such as graphics and other digital images, to reduce the download time as far as possible.
For interactive media, users with varied types of hardware control also need to be considered. Many sites are designed to facilitate interaction using a mouse and keyboard, but users of mobile and other portable computing devices such as tablet PCs do not have these in the same way as for a desktop PC. In some cases, developers opt to provide alternative content items for users without the required hardware or software. For example, many media items, particularly video and audio, require specific software programs to be installed on the user device in order to play. This can again cause accessibility issues.
Data
Much website content can also be described as data. A typical example of this would be a retail site in which products are listed for sale, each with a name, description, price and so on. In such cases, this data is normally stored within a database system. When the user visits a site, the content of the site is pulled from the database and presented within the pages. If the user makes a purchase, the database is also updated with this new information. Web content data can include text, numerical figures and even media items. Often, the data is arranged in structured ways within these databases, using data modelling techniques.
Static and Dynamic
Web content is delivered to the user's Web browser in more than one way. In the past, websites simply involved a series of HTML files and media files stored on the server. When the user visited the page, these were simply sent to their browser and displayed there. This was described as static. With the advance in Web technologies, dynamic techniques emerged.
The retail website example is a typical one here. With the product information stored within a database, the pages in such a website are actually built when the user visits them, i.e. when their browser requests them. When the user's browser requests a page, instead of simply returning the page, the Web server runs a program which fetches data from the database, builds it into a page structure in HTML and then sends that to the browser where it is presented to the user.
Dynamic Web content allows sites to use one data store which can be queried from multiple site pages. If there is any need to change the data, it only needs to be changed within the database and this change will be reflected throughout the site.
Content Management Systems
Content Management Systems are commonly used throughout the Web. A Content Management System, or CMS, bridges the gap between the data and the resulting Web pages, automating the process of generating one from the other. Most CMS programs are designed to be usable by people who do not have Web development skills. This means that as a user of a CMS, you can build the content of your site without having to write any code at all. Among the most widely used CMS options are Joomla, Wordpress and Drupal.
Uses of Content
Web content is used to serve a variety of purposes. For example, many commercial ventures use content to attract users to their sites, or Web properties. For example, many people publish articles on sites that are separate to their main site for the purposes of driving traffic to that site. Blogs are a common way to achieve this, with content that is related to the purpose of a site linking back to it.
Conclusion
As you can see, Web content is about much more than simply the text and images you place on a website. Content can be a valuable online asset and is frequently used as a marketing tool. Above all else, it doesn't matter how many complex and impressive technical efforts go into the construction of a site, if the content is not up to standard. By focusing on content first and foremost, website owners have a better chance of success, whatever their aims happen to be.
See also:
In this article we will run over the different types of Web content, explain the ways in which this content is delivered to website users and overview a couple of the most important associated technologies and techniques.
Text
By far the most common type of content on websites is text. Text content appears on pretty much every website you are likely to come across. The text within a website includes not only the excerpts you see within the page, but also the titles of pages, the domain for the site as a whole and lots of textual items that appear within the markup of each page.
In the past, many webmasters have attempted to manipulate the search engines to drive traffic to sites by targeting keywords and phrases within website text. The aim in this approach is to make a site appear as close to the top of the search engine results pages (SERPs) for those phrases as possible, making it more likely that people searching for those phrases will visit that particular site. However, the search engine algorithms are always growing in complexity and reducing the effectiveness of this technique. For this reason, the best way to make a site perform well is to simply publish textual and other material that is relevant to the purpose of the site and that provides high quality, useful information.
Although there is little point structuring text content to artificially draw search engine traffic, there is a real art to writing successfully for the Web. People read text differently on the Web than on printed media, with more of a tendency to scan content and less tolerance for text excerpts that are lengthy. Successful Web writing typically involves shorter sentences and clauses, rather than long, complex sentences with lots of punctuation. It is also worth bearing in mind that your readers may be reading in a second language, as they could be from literally anywhere in the world.
Media
Web media comes in many forms, including images, audio/ sound, video, animations and interactive variants on each of these. When deploying media items on websites, there are a number of potential issues to consider. These issues relate to the range of users who will be accessing a site. We have all become accustomed to seeing various types of media when we visit websites, and expect a high level of stimulation in general. Media items can make a site very engaging, but bring with them a range of considerations.
Users can be browsing to a site on a vast range of device types, operating systems and Web browsers. This means that for a successful site, developers and webmasters need to choose content items that are as accessible as possible to this range of environments. For example, if a user is browsing on a mobile device such as a smartphone, they may have limited connectivity. For this reason, many developers look to minimise the size of media resources such as graphics and other digital images, to reduce the download time as far as possible.
For interactive media, users with varied types of hardware control also need to be considered. Many sites are designed to facilitate interaction using a mouse and keyboard, but users of mobile and other portable computing devices such as tablet PCs do not have these in the same way as for a desktop PC. In some cases, developers opt to provide alternative content items for users without the required hardware or software. For example, many media items, particularly video and audio, require specific software programs to be installed on the user device in order to play. This can again cause accessibility issues.
Data
Much website content can also be described as data. A typical example of this would be a retail site in which products are listed for sale, each with a name, description, price and so on. In such cases, this data is normally stored within a database system. When the user visits a site, the content of the site is pulled from the database and presented within the pages. If the user makes a purchase, the database is also updated with this new information. Web content data can include text, numerical figures and even media items. Often, the data is arranged in structured ways within these databases, using data modelling techniques.
Static and Dynamic
Web content is delivered to the user's Web browser in more than one way. In the past, websites simply involved a series of HTML files and media files stored on the server. When the user visited the page, these were simply sent to their browser and displayed there. This was described as static. With the advance in Web technologies, dynamic techniques emerged.
The retail website example is a typical one here. With the product information stored within a database, the pages in such a website are actually built when the user visits them, i.e. when their browser requests them. When the user's browser requests a page, instead of simply returning the page, the Web server runs a program which fetches data from the database, builds it into a page structure in HTML and then sends that to the browser where it is presented to the user.
Dynamic Web content allows sites to use one data store which can be queried from multiple site pages. If there is any need to change the data, it only needs to be changed within the database and this change will be reflected throughout the site.
Content Management Systems
Content Management Systems are commonly used throughout the Web. A Content Management System, or CMS, bridges the gap between the data and the resulting Web pages, automating the process of generating one from the other. Most CMS programs are designed to be usable by people who do not have Web development skills. This means that as a user of a CMS, you can build the content of your site without having to write any code at all. Among the most widely used CMS options are Joomla, Wordpress and Drupal.
Uses of Content
Web content is used to serve a variety of purposes. For example, many commercial ventures use content to attract users to their sites, or Web properties. For example, many people publish articles on sites that are separate to their main site for the purposes of driving traffic to that site. Blogs are a common way to achieve this, with content that is related to the purpose of a site linking back to it.
Conclusion
As you can see, Web content is about much more than simply the text and images you place on a website. Content can be a valuable online asset and is frequently used as a marketing tool. Above all else, it doesn't matter how many complex and impressive technical efforts go into the construction of a site, if the content is not up to standard. By focusing on content first and foremost, website owners have a better chance of success, whatever their aims happen to be.
See also:
Implementing Image Links With JavaScript
Most Web pages link to other pages, within the same site and on other sites. HTML anchor elements are the primary tool used to implement these links. However, JavaScript functions can also implement links between pages. These functions can execute on user interaction with the mouse, such as clicking an image element.
Web pages often include clickable images, particularly in the header area, for example with Web page banners. Using a combination of HTML and JavaScript code, developers can create Web page banner elements that link to other pages. Within the HTML markup for a banner image, the developer can include an event listener attribute to detect user clicks. When the user clicks an image, the JavaScript code can prompt the browser to open a new page. Web page banners can provide visually engaging, interactive elements within sites.
HTML Images
To include images within a Web page banner section, developers can use the HTML image element. The following code demonstrates:
This code includes an image in a dedicated page section. The image element uses a single self-closing tag, with the source attribute indicating the location and name of the image file for the browser to load and display. The "alt" attribute provides text to display if the image file cannot be loaded. The banner for a page may contain multiple different images, linking to different locations.
This markup code demonstrates a basic image element, which instructs the browser to display the image. However, clicking on the image will have no effect. To make the image clickable, the developer must add a click listener.
Click Listener
To implement a link through JavaScript, developers include event listener attributes within their HTML elements. The following extended code demonstrates:
This code specifies a JavaScript function for the browser to execute when the user clicks the image element. The function call includes a text string parameter specifying the page to fetch. The address can be a relative or absolute URL (Uniform Resource Locator).
JavaScript Function
Web pages can include sections for JavaScript functions between the opening and closing head tags. The following code demonstrates a script section with a function outline inside it:
This function is called when the user clicks the image. The parameter passed represents the page to browse to. Inside the function, the developer can include code instructing the browser to load the new page.
Open Page
To instruct the user's Web browser to load a particular page, JavaScript code can use the Window object. The following code demonstrates:
The Window open method allows additional optional parameters. Using these, developers can specify where to open the new page, whether in a new window or in the current one. The "specs" parameter allows developers to indicate details of the browser window when opening the new page, including dimensions. The replace parameter indicates how the new page should be handled in the browser history. Once this code is included in the JavaScript function, users clicking the HTML image element will cause the linked page to load.
Alternatively, JavaScript code can use the Document and Location objects, as follows:
The page address is passed into the function as a parameter when the click event is triggered. The HTML markup for the image lists the actual address to fetch.
See also:
How To: AJAX PHP Functions
Displaying a Substring in JavaScript
Web pages often include clickable images, particularly in the header area, for example with Web page banners. Using a combination of HTML and JavaScript code, developers can create Web page banner elements that link to other pages. Within the HTML markup for a banner image, the developer can include an event listener attribute to detect user clicks. When the user clicks an image, the JavaScript code can prompt the browser to open a new page. Web page banners can provide visually engaging, interactive elements within sites.
HTML Images
To include images within a Web page banner section, developers can use the HTML image element. The following code demonstrates:
This code includes an image in a dedicated page section. The image element uses a single self-closing tag, with the source attribute indicating the location and name of the image file for the browser to load and display. The "alt" attribute provides text to display if the image file cannot be loaded. The banner for a page may contain multiple different images, linking to different locations.
This markup code demonstrates a basic image element, which instructs the browser to display the image. However, clicking on the image will have no effect. To make the image clickable, the developer must add a click listener.
Click Listener
To implement a link through JavaScript, developers include event listener attributes within their HTML elements. The following extended code demonstrates:
This code specifies a JavaScript function for the browser to execute when the user clicks the image element. The function call includes a text string parameter specifying the page to fetch. The address can be a relative or absolute URL (Uniform Resource Locator).
JavaScript Function
Web pages can include sections for JavaScript functions between the opening and closing head tags. The following code demonstrates a script section with a function outline inside it:
This function is called when the user clicks the image. The parameter passed represents the page to browse to. Inside the function, the developer can include code instructing the browser to load the new page.
Open Page
To instruct the user's Web browser to load a particular page, JavaScript code can use the Window object. The following code demonstrates:
window.open(linkPage);
The Window open method allows additional optional parameters. Using these, developers can specify where to open the new page, whether in a new window or in the current one. The "specs" parameter allows developers to indicate details of the browser window when opening the new page, including dimensions. The replace parameter indicates how the new page should be handled in the browser history. Once this code is included in the JavaScript function, users clicking the HTML image element will cause the linked page to load.
Alternatively, JavaScript code can use the Document and Location objects, as follows:
document.location.href = linkPage;
The page address is passed into the function as a parameter when the click event is triggered. The HTML markup for the image lists the actual address to fetch.
See also:
How To: AJAX PHP Functions
Displaying a Substring in JavaScript
Sunday, 26 August 2012
The Vital Components in an Effective Web Page
Creating an effective Web page is not always easy. However, if you pay attention to the key elements for success in Web design and development, you should be able to achieve the task. A Web page design will only be successful if the approach is tailored to its purpose. For this reason, developers need to consider the aims and objectives for any website project before and while developing it.
Content
The content of a Web page is the most important aspect of it. All other steps and techniques involved in Web design and development are ultimately aimed at serving the content, presenting it to best effect. The content of your Web page is the reason people will visit it, so it's vital to ensure it is created to a high standard.
For text content, an effective page will only include well written language. For the purposes of SEO (Search Engine Optimisation) your content needs to be structured to perform well in the search engine listings for the key phrases potential visitors will be searching for. Regularly updating page content also helps with SEO performance.
Media
Depending on the purpose of your Web page, you may wish to include multiple different media types, including text, data, images, video, audio and interactive animations using Flash or JavaScript. In a successful Web page, the media items will be selectively chosen to suit the aims of the site. While people now expect a good level of sophistication and engagement with a website, it's also important not to overwhelm your visitors with too much media content or to distract them from their purpose in visiting your site.
Navigation
Navigation in Web design operates both at the level of the website as a whole and within the individual pages. If you have a long page with lots of information and sections within it, you can use HTML anchors to provide shortcuts to these areas, allowing users to focus on those elements they are most interested in. Within an entire site, clear and simple navigation structures using menu elements allow users to achieve their goals quickly and effectively.
Style
Most websites use a combination of HTML, CSS (Cascading Style Sheet) code and images to create an effective visual design. The visual design of a successful Web page will be focused on presenting the content to users, in a way that encourages them to carry out whatever tasks you want them to, while they're on your page. Many developers create design mock-ups using graphic design programs before implementing these in Web page markup and style code.
Interaction
Web pages are not static objects like paper documents. Users expect to be able to interact with a Web page, using their mouse and keyboard. If you are tailoring your website to mobile users you may also need to handle interaction using touchscreen components. Many website elements can be interactive, including user controls such as buttons and menus. Interaction within a successful Web page will also be tailored to website aims, often implemented using JavaScript code.
Links:
Tech Interpreter Links:
Content
The content of a Web page is the most important aspect of it. All other steps and techniques involved in Web design and development are ultimately aimed at serving the content, presenting it to best effect. The content of your Web page is the reason people will visit it, so it's vital to ensure it is created to a high standard.
For text content, an effective page will only include well written language. For the purposes of SEO (Search Engine Optimisation) your content needs to be structured to perform well in the search engine listings for the key phrases potential visitors will be searching for. Regularly updating page content also helps with SEO performance.
Media
Depending on the purpose of your Web page, you may wish to include multiple different media types, including text, data, images, video, audio and interactive animations using Flash or JavaScript. In a successful Web page, the media items will be selectively chosen to suit the aims of the site. While people now expect a good level of sophistication and engagement with a website, it's also important not to overwhelm your visitors with too much media content or to distract them from their purpose in visiting your site.
Navigation
Navigation in Web design operates both at the level of the website as a whole and within the individual pages. If you have a long page with lots of information and sections within it, you can use HTML anchors to provide shortcuts to these areas, allowing users to focus on those elements they are most interested in. Within an entire site, clear and simple navigation structures using menu elements allow users to achieve their goals quickly and effectively.
Style
Most websites use a combination of HTML, CSS (Cascading Style Sheet) code and images to create an effective visual design. The visual design of a successful Web page will be focused on presenting the content to users, in a way that encourages them to carry out whatever tasks you want them to, while they're on your page. Many developers create design mock-ups using graphic design programs before implementing these in Web page markup and style code.
Interaction
Web pages are not static objects like paper documents. Users expect to be able to interact with a Web page, using their mouse and keyboard. If you are tailoring your website to mobile users you may also need to handle interaction using touchscreen components. Many website elements can be interactive, including user controls such as buttons and menus. Interaction within a successful Web page will also be tailored to website aims, often implemented using JavaScript code.
Links:
- Top 10 Mistakes in Web Design (Jakob Nielsen's Alertbox)
- Usability 101: Definition and Fundamentals - What, Why, How (Jakob Nielsen's Alertbox)
- Web Design Tips - Entheos
- 10 Principles Of Effective Web Design - Smashing Magazine
Tech Interpreter Links:
Monday, 23 July 2012
Why Web Developers are Excited About HTML5 and CSS3
If you are involved in Web design, development or just the Web itself in any way, you will almost certainly have become aware of the excitement about the emerging developments in HTML5 and CSS3. This article will attempt to explain some of the reasons for this excitement. HTML5 and CSS3 represent more than a normal update of the languages in question, as they include a number of substantial changes that promise to fundamentally alter the way developers create pages and sites.
OK, so what are HTML5 and CSS3 anyway?
HTML is the main markup language (Hypertext Markup Language) used in Web pages. When you visit a website, the content items you see (text, images, media etc) are included in HTML markup code. HTML uses tagged code to define the overall structure of a page, with elements enclosing the content items. When your browser receives the HTML markup code for a page, it interprets it and presents it to you accordingly.
While HTML defines page structure, CSS (Cascading Style Sheet) code determines the styling of a page, including layout and various other visual aspects of what you see. The way the content of a page is displayed is therefore determined by both HTML and CSS code. HTML5 and CSS3 are the most recent versions of these two specifications. Essentially, with HTML5 and CSS3, developers have new techniques to choose from when building pages.
Most websites use client side scripting in JavaScript in conjunction with HTML and CSS. This allows developers to deliver interactive components. HTML5 and CSS3 include new options for such interactive sites, including the ability to build advanced media items such as animation and drawing functions.
Fine, what does HTML5 offer over previous versions then?
HTML5 introduces a range of new elements that developers can utilise. The most notable new elements are the structural elements, media elements including canvas, and new input elements for capturing user information through website forms. The structural tags include "header", "footer", "article", "section", "nav" and "aside". These allow developers to define sections of a page in a more logical, meaningful way than before. HTML5 also includes new tags for embedding media items such as audio and video in a much more straightforward way. The canvas element is one of the most interesting additions, as Web pages can create graphics using JavaScript drawing functions, building these graphic items while the user is viewing the page.
And CSS3, what does it bring to the table?
CSS3 includes a variety of new properties and functions, allowing developers to create a greater level of interaction than before. The transform and transition functions create interactive animations in both 2D and 3D, while the "keyframes" rule defines animated sequences that elapse over time. CSS3 also introduces advanced user interface styling and the ability to use fonts without the user having them installed on their own computer.
What does semantics have to do with this?
You will see people referring to emerging techniques in Web design as being semantic. This basically means that the actual markup for a page will include an indication of semantics, or meaning, by letting the browser know something about the content of an element. For example, in the past many HTML elements simply grouped a chunk of Web page content in a meaningless way. The HTML defined the content and the CSS styled it, with only the developer and user interpreting the meaning of the content in any way. With the new structural elements in particular, HTML5 markup indicates a level of meaning that the browser can interpret and use to make the page more accessible to the user, whatever their environment happens to be.
How do HTML5 and CSS3 relate to Flash?
Many people are also making claims about the impact that HTML5 and CSS3 will have on other technologies such as Flash. It's certainly still a bit early to make huge claims about how much longer Flash will last. However, with HTML5 and CSS3, developers can achieve the kinds of interactive multimedia component that was previously mainly done in Flash. By using these new specifications instead, developers can create the same results in a way that is more accessible to different users.
Sounds good, why isn't this stuff all over the Web already?
The main factor delaying the adoption of HTML5 and CSS3 is browser support. The main browsers are all working on increasing support of these new standards, some faster than others, but full support is still a long way off. For this reason developers cannot assume that users will be able to engage with new effects created using the most recent specifications, and must provide alternatives for users with older browsers.
See also:
An Introduction to HTML5 Features
How To: HTML5 Local Storage
Using CSS3 Fonts
How to Get Started with Web Development
OK, so what are HTML5 and CSS3 anyway?
HTML is the main markup language (Hypertext Markup Language) used in Web pages. When you visit a website, the content items you see (text, images, media etc) are included in HTML markup code. HTML uses tagged code to define the overall structure of a page, with elements enclosing the content items. When your browser receives the HTML markup code for a page, it interprets it and presents it to you accordingly.
While HTML defines page structure, CSS (Cascading Style Sheet) code determines the styling of a page, including layout and various other visual aspects of what you see. The way the content of a page is displayed is therefore determined by both HTML and CSS code. HTML5 and CSS3 are the most recent versions of these two specifications. Essentially, with HTML5 and CSS3, developers have new techniques to choose from when building pages.
Most websites use client side scripting in JavaScript in conjunction with HTML and CSS. This allows developers to deliver interactive components. HTML5 and CSS3 include new options for such interactive sites, including the ability to build advanced media items such as animation and drawing functions.
Fine, what does HTML5 offer over previous versions then?
HTML5 introduces a range of new elements that developers can utilise. The most notable new elements are the structural elements, media elements including canvas, and new input elements for capturing user information through website forms. The structural tags include "header", "footer", "article", "section", "nav" and "aside". These allow developers to define sections of a page in a more logical, meaningful way than before. HTML5 also includes new tags for embedding media items such as audio and video in a much more straightforward way. The canvas element is one of the most interesting additions, as Web pages can create graphics using JavaScript drawing functions, building these graphic items while the user is viewing the page.
And CSS3, what does it bring to the table?
CSS3 includes a variety of new properties and functions, allowing developers to create a greater level of interaction than before. The transform and transition functions create interactive animations in both 2D and 3D, while the "keyframes" rule defines animated sequences that elapse over time. CSS3 also introduces advanced user interface styling and the ability to use fonts without the user having them installed on their own computer.
What does semantics have to do with this?
You will see people referring to emerging techniques in Web design as being semantic. This basically means that the actual markup for a page will include an indication of semantics, or meaning, by letting the browser know something about the content of an element. For example, in the past many HTML elements simply grouped a chunk of Web page content in a meaningless way. The HTML defined the content and the CSS styled it, with only the developer and user interpreting the meaning of the content in any way. With the new structural elements in particular, HTML5 markup indicates a level of meaning that the browser can interpret and use to make the page more accessible to the user, whatever their environment happens to be.
How do HTML5 and CSS3 relate to Flash?
Many people are also making claims about the impact that HTML5 and CSS3 will have on other technologies such as Flash. It's certainly still a bit early to make huge claims about how much longer Flash will last. However, with HTML5 and CSS3, developers can achieve the kinds of interactive multimedia component that was previously mainly done in Flash. By using these new specifications instead, developers can create the same results in a way that is more accessible to different users.
Sounds good, why isn't this stuff all over the Web already?
The main factor delaying the adoption of HTML5 and CSS3 is browser support. The main browsers are all working on increasing support of these new standards, some faster than others, but full support is still a long way off. For this reason developers cannot assume that users will be able to engage with new effects created using the most recent specifications, and must provide alternatives for users with older browsers.
See also:
An Introduction to HTML5 Features
How To: HTML5 Local Storage
Using CSS3 Fonts
How to Get Started with Web Development
Web Development Concepts: Static Versus Dynamic
What is the difference between a static and dynamic Web page?
Essentially, whether a Web page is static or dynamic depends on what happens between the user making a request to see it, and the server sending the requested content to their browser. It makes no difference to users whether a page is static or dynamic, but is relevant to developers, as each model uses different techniques and technologies.
Essentially a static page is one whose content is stored in static, unchanging form in a document on the Web server, while the content of a dynamic page is only created when it is requested for viewing.
What happens when someone browses to a page?
When you browse to a Web page, for example by clicking a link or typing its URL into your browser address bar, your computer sends a request message to the Web server on which the requested page is hosted.
With a static page, the content is simply sitting in a file, typically in HTML, and the content of this file is returned by the server to your computer, where it is displayed in your browser window. For example, if you had a file saved as "page.html" on your server in the root directory, and browsed to it as follows:
The server would respond by sending the content of the file.
For dynamic pages, the process is different. Dynamic pages use programming languages such as PHP. In this case you would save your script on the server, for example using the name "page.php", and it would contain programming code as well as HTML code.
When the page is browsed to this time:
The code within the script file is executed (run) on the server. The server side program may do many different things, but typically one of them will be to build a Web page with HTML content and send this to the user's browser. The browser displays this HTML the same way it would have if the page had been static - the difference lies in what happens on the server, and makes no difference at the user (or "client") end.
How exactly is this different?
Static and dynamic pages don't just use different file formats, they use a fundamentally different technique. Static pages typically contain only markup code, whereas dynamic pages also contain programming code.
The content of an HTML file is basically text, images etc contained within a tree structure, with each element delineated by tags, each pair of opening and closing tags comprising an element as in the following example paragraph:
This is HTML markup, and its structure, together with formatting such as CSS, tells the browser how the content of each element should be laid out and displayed.
With a dynamic page containing server side code, a different process takes place. The page script is executed according to its own logical structure, and as it goes it builds HTML structures and writes them out. This example PHP performs a simple calculation and writes the result out in HTML:
A typical PHP script will also do other things such as connecting to a database and querying it for data to write out as part of the HTML.
What are the advantages to using dynamic pages?
There are many advantages to using dynamic pages, the main one being the fact that they contain dynamic data. By connecting to a database, a dynamic page can potentially offer different content each time it is viewed. Static page content remains the same unless the page files themselves are manually changed, whereas dynamic pages populate their content at the time of viewing, according to what happens to be in the data store at that particular time.
It is often the case that many pages within a site will contain the same, or similar content. If this content needs to be changed, in a static site each page on which it occurs will need to be changed in turn. However, using dynamic scripting, the piece of content can be contained in a single, dedicated script, and this script can then be called from each page on which the content item appears. If the content needs to be changed, it only has to be changed in one place, i.e. the dedicated script, or the database if this is where it comes from.
Dynamic sites are therefore easier to maintain and to make changes to, while still keeping a consistent appearance and behaviour. If a site is being built for commercial purposes, being able to store the data in a database is also an advantage in itself.
Are there disadvantages to using dynamic pages?
The only potential disadvantage to using dynamic pages is the fact that a greater range of technologies, and therefore skills, are involved. A certain amount of programming expertise is necessary, and in most cases database development as well. However, if you're thinking about trying dynamic Web page development, don't be put off even if you have no programming experience, as these skills are actually relatively easy to pick up. There are lots of online tutorials and guides, so you really can teach yourself.
Do I need to use dynamic pages?
No! Using dynamic pages is not obligatory. However, depending on the purpose and nature of your site, it may be a real advantage. Setting your dynamic site up may seem an intimidating prospect, but once this is done the site will become much easier to amend and maintain. If your site only contains a small amount of simple information that does not need to be updated very often, there's probably no need to learn Web programming if it isn't something you're interested in.
How do I get started creating dynamic pages?
The first thing is to make sure you have a sound enough grasp of the basic Web technologies that are used in both static and dynamic pages, including the initial skills for making a Web page using HTML, CSS and JavaScript. You don't need to be at an advanced level, just make sure you understand the basic principles and practices.
Next is learning a server side language. I would recommend PHP, which is available on most Web hosting platforms. Start with the basics and build your knowledge incrementally, this is the only way to do it, and don't worry if you feel you're making slow progress, it will all fall into place eventually!
If you're building a dynamic site, you'll probably want to use a database. MySQL is available for free on many Web hosting packages and is a good system to start with. You can learn SQL if you like, but if your host provides phpMyAdmin, you can carry out most common tasks using the browser interface. If you're unsure about how to structure your database, it may be worth finding out a bit about relational database modelling.
Related Links
MySQL :: Developer Zone
MySQL Tutorial - Introduction
phpMyAdmin
PhpMyAdmin Tutorial
PHP: PHP Manual - Manual
PHP Tutorial
SQL Tutorial
Tech Interpreter Links:
Why Web Developers are Excited About HTML5 and CSS3
Using Scripts in HTML Pages
What is Web Content?
What is Dynamic Content?
Web Development Concepts: Client and Server
How to Get Started with Web Development
Essentially, whether a Web page is static or dynamic depends on what happens between the user making a request to see it, and the server sending the requested content to their browser. It makes no difference to users whether a page is static or dynamic, but is relevant to developers, as each model uses different techniques and technologies.
Essentially a static page is one whose content is stored in static, unchanging form in a document on the Web server, while the content of a dynamic page is only created when it is requested for viewing.
What happens when someone browses to a page?
When you browse to a Web page, for example by clicking a link or typing its URL into your browser address bar, your computer sends a request message to the Web server on which the requested page is hosted.
With a static page, the content is simply sitting in a file, typically in HTML, and the content of this file is returned by the server to your computer, where it is displayed in your browser window. For example, if you had a file saved as "page.html" on your server in the root directory, and browsed to it as follows:
http://exampledomain.com/page.html
The server would respond by sending the content of the file.
For dynamic pages, the process is different. Dynamic pages use programming languages such as PHP. In this case you would save your script on the server, for example using the name "page.php", and it would contain programming code as well as HTML code.
When the page is browsed to this time:
http://exampledomain.com/page.php
The code within the script file is executed (run) on the server. The server side program may do many different things, but typically one of them will be to build a Web page with HTML content and send this to the user's browser. The browser displays this HTML the same way it would have if the page had been static - the difference lies in what happens on the server, and makes no difference at the user (or "client") end.
How exactly is this different?
Static and dynamic pages don't just use different file formats, they use a fundamentally different technique. Static pages typically contain only markup code, whereas dynamic pages also contain programming code.
The content of an HTML file is basically text, images etc contained within a tree structure, with each element delineated by tags, each pair of opening and closing tags comprising an element as in the following example paragraph:
Some text...
This is HTML markup, and its structure, together with formatting such as CSS, tells the browser how the content of each element should be laid out and displayed.
With a dynamic page containing server side code, a different process takes place. The page script is executed according to its own logical structure, and as it goes it builds HTML structures and writes them out. This example PHP performs a simple calculation and writes the result out in HTML:
<?php $answer=3*2; echo "<p>".$answer."<p>"; ?>
A typical PHP script will also do other things such as connecting to a database and querying it for data to write out as part of the HTML.
What are the advantages to using dynamic pages?
There are many advantages to using dynamic pages, the main one being the fact that they contain dynamic data. By connecting to a database, a dynamic page can potentially offer different content each time it is viewed. Static page content remains the same unless the page files themselves are manually changed, whereas dynamic pages populate their content at the time of viewing, according to what happens to be in the data store at that particular time.
It is often the case that many pages within a site will contain the same, or similar content. If this content needs to be changed, in a static site each page on which it occurs will need to be changed in turn. However, using dynamic scripting, the piece of content can be contained in a single, dedicated script, and this script can then be called from each page on which the content item appears. If the content needs to be changed, it only has to be changed in one place, i.e. the dedicated script, or the database if this is where it comes from.
Dynamic sites are therefore easier to maintain and to make changes to, while still keeping a consistent appearance and behaviour. If a site is being built for commercial purposes, being able to store the data in a database is also an advantage in itself.
Are there disadvantages to using dynamic pages?
The only potential disadvantage to using dynamic pages is the fact that a greater range of technologies, and therefore skills, are involved. A certain amount of programming expertise is necessary, and in most cases database development as well. However, if you're thinking about trying dynamic Web page development, don't be put off even if you have no programming experience, as these skills are actually relatively easy to pick up. There are lots of online tutorials and guides, so you really can teach yourself.
Do I need to use dynamic pages?
No! Using dynamic pages is not obligatory. However, depending on the purpose and nature of your site, it may be a real advantage. Setting your dynamic site up may seem an intimidating prospect, but once this is done the site will become much easier to amend and maintain. If your site only contains a small amount of simple information that does not need to be updated very often, there's probably no need to learn Web programming if it isn't something you're interested in.
How do I get started creating dynamic pages?
The first thing is to make sure you have a sound enough grasp of the basic Web technologies that are used in both static and dynamic pages, including the initial skills for making a Web page using HTML, CSS and JavaScript. You don't need to be at an advanced level, just make sure you understand the basic principles and practices.
Next is learning a server side language. I would recommend PHP, which is available on most Web hosting platforms. Start with the basics and build your knowledge incrementally, this is the only way to do it, and don't worry if you feel you're making slow progress, it will all fall into place eventually!
If you're building a dynamic site, you'll probably want to use a database. MySQL is available for free on many Web hosting packages and is a good system to start with. You can learn SQL if you like, but if your host provides phpMyAdmin, you can carry out most common tasks using the browser interface. If you're unsure about how to structure your database, it may be worth finding out a bit about relational database modelling.
Related Links
MySQL :: Developer Zone
MySQL Tutorial - Introduction
phpMyAdmin
PhpMyAdmin Tutorial
PHP: PHP Manual - Manual
PHP Tutorial
SQL Tutorial
Tech Interpreter Links:
Why Web Developers are Excited About HTML5 and CSS3
Using Scripts in HTML Pages
What is Web Content?
What is Dynamic Content?
Web Development Concepts: Client and Server
How to Get Started with Web Development
Good Web Page Characteristics
The Web is populated by a huge variety of sites, with content in various types of digital media. A good design depends partly on the purpose of a site. However, there are a set of broad principles that apply to most websites, and the characteristics of good site design tend to be similar regardless of content type. Good webpage design is not necessarily complicated, nor does it require significant amounts of expert knowledge.
Top 10 Mistakes in Web Design (Jakob Nielsen's Alertbox)
10 Principles Of Effective Web Design - Smashing Magazine
Website design tips, what makes a good web site
Web Building Design - W3Schools
CSS Tutorial - W3Schools
JavaScript Tutorial - W3Schools
The Vital Components in an Effective Web Page
An Introduction to HTML5 Features
The Characteristics of a Successful Web Page
Content
It is often considered separate to design, but the content of a webpage plays a key role in whether or not the design is successful. The type, size and layout of webpage content needs to be figured out when the design is being created. The purpose of a webpage design is to present the content to best effect, so it is impossible to come up with a good design without considering this content. In general, minimizing the amount of text that appears on a page makes it more usable, as does breaking this text into small chunks.Layout and Design Elements
The two main factors in a webpage design are the layout and any design elements you create, such as graphics and images. For a successful design, these need to strike a balance between being attractive and not distracting users from the page content, which is likely to be their main reason for visiting the page. Graphic elements that are consistent in colour and style throughout a site help to create a lasting impression of it in the minds of visitors.Media
Most webpages now contain many different types of media. This can include text, images, video, audio and animation. Many sites also contain elements such as RSS feeds, interactive components and links to other sites. Because the typical webpage is busy, with many different elements within it, it becomes even more important to present the content well, encouraging users to focus on it in spite of the many distractions. The most successful webpage designs tend to be minimalist while also being memorable.Accessibility
Websites are visited by varied people in varied contexts, and it is the task of designers to ensure that Web content is made accessible to as many of these people as possible. Accessibility in webpage design involves numerous techniques. Within CSS (Cascading Style Sheets), pages tend to be more accessible if they use relative sizes and layouts, as these degrade "gracefully" across Web browsers, meaning that pages are better able to adapt to different browsing contexts. Using "alt" attributes within HTML also allows people to find out about content that they cannot access, for example due to problems with vision.Interaction
Webpages are interactive, rather than just presenting information to be viewed. CSS and JavaScript are used to enhance this interaction, providing different behaviours when the user interacts with a page using their mouse and keyboard, or the fingers if they are browsing on a touchscreen device such as a phone or tablet PC. Using interaction can provide a deeper and more intuitive level of dialogue with a webpage, as well as a more enjoyable one.Related Links
What Makes a Great Web Site?Top 10 Mistakes in Web Design (Jakob Nielsen's Alertbox)
10 Principles Of Effective Web Design - Smashing Magazine
Website design tips, what makes a good web site
Web Building Design - W3Schools
CSS Tutorial - W3Schools
JavaScript Tutorial - W3Schools
Tech Interpreter Links
Why Web Developers are Excited About HTML5 and CSS3The Vital Components in an Effective Web Page
An Introduction to HTML5 Features
The Characteristics of a Successful Web Page
Tuesday, 10 July 2012
The Characteristics of a Successful Web Page
While there is no one recipe for success with Web design and development, there is a basic set of characteristics that tends to be observed in the most successful sites. Development projects are extremely varied, with different aims and objectives. These should be the guiding principles for a project in any case, but it's also worth learning about the properties that might stand your sites in better stead for success whatever their purpose or context.
The Internet is overflowing with sites offering all sorts of information and services. Web design and development are complex activities involving a variety of skills. When it comes to measuring the success of a Web project, you naturally need to refer to its original brief. However, there is a series of common areas for determining the success, failure or relative quality of any single page. In this article we'll go over the basic aspects to consider when trying to establish whether or not a page is well constructed and to bear in mind when building pages yourself.
For example, if you browse to a page by following a link from a search engine or other site, you will have certain expectations about what it should contain, normally determined by the information in the link you followed. A successful page fulfils the user's expectation based on the page and site title, with information and media content that is relevant, good quality and detailed enough to give the user what they're looking for.
In a successful page, how to interact with and use the page will be intuitively clear to the user. The interaction will of course need to function reliably and do what the user expects it to. Many sites rely on JavaScript for interactivity, which requires substantial testing to ensure it works in different Web browsers.
Accessibility is the major issue for formatting in Web pages. As well as ensuring that a page appears correctly in different browsers, on different operating systems and on different types of device (for example mobile phones and tablet PCs), developers need to consider the range of possible users who may be accessing their pages. You cannot make any assumptions about the user or their computing equipment when creating Web page. Successful pages are those that function equally well for the full range of users accessing them.
It is hugely important that developers choose the right tools to deliver particular Web pages. By making use of server technologies, developers can create sites with dynamic data as well as sites with a stimulating level of user interaction. Unfortunately, developers often use technologies simply because they can, rather than because they are ideally suited to a project. When deciding whether to use a particular tool, it's best to ask whether or not it will best serve the purpose and content of the site, which it will do in a successful case.
See also:
An Introduction to HTML5 Features
Web Development Concepts: Client and Server
The Vital Components in an Effective Web Page
Good Web Page Characteristics
The Internet is overflowing with sites offering all sorts of information and services. Web design and development are complex activities involving a variety of skills. When it comes to measuring the success of a Web project, you naturally need to refer to its original brief. However, there is a series of common areas for determining the success, failure or relative quality of any single page. In this article we'll go over the basic aspects to consider when trying to establish whether or not a page is well constructed and to bear in mind when building pages yourself.
Information and Media
You might think it would go without saying that the most important element in a Web page is its content, but sadly many developers tend to forget this. When approaching the construction of a Web page, the first step should ideally be establishing what the content will be. This includes data, text and media, for example images, audio, video and even animation items. A successful Web page presents the content users expect and need it to.For example, if you browse to a page by following a link from a search engine or other site, you will have certain expectations about what it should contain, normally determined by the information in the link you followed. A successful page fulfils the user's expectation based on the page and site title, with information and media content that is relevant, good quality and detailed enough to give the user what they're looking for.
User Interactivity
Most modern Web pages do not simply display static information for users to read. A typical page will also give the user an interactive experience of some kind. Naturally this depends on the purpose of a particular page. For example, a page with a form in which users enter information needs a reliable interaction process in order to do the job it is designed to do. At the other end of the spectrum, a page on a wiki site merely needs to display the information along with some links to other resources, so the interaction level does not need to be sophisticated in this case.In a successful page, how to interact with and use the page will be intuitively clear to the user. The interaction will of course need to function reliably and do what the user expects it to. Many sites rely on JavaScript for interactivity, which requires substantial testing to ensure it works in different Web browsers.
Formatting and Style
Web pages are basically comprised of content and formatting. It is generally considered good practice to keep the content of a site well separated from its formatting code. Typically, the content is defined using HTML markup, with Cascading Style Sheets (CSS) providing the formatting rules, including layout, colours, backgrounds and more. Keeping the styling separate from the markup content makes a page more amenable to user preferences.Accessibility is the major issue for formatting in Web pages. As well as ensuring that a page appears correctly in different browsers, on different operating systems and on different types of device (for example mobile phones and tablet PCs), developers need to consider the range of possible users who may be accessing their pages. You cannot make any assumptions about the user or their computing equipment when creating Web page. Successful pages are those that function equally well for the full range of users accessing them.
Technologies
Web developers have a host of technologies to choose from when building pages. This includes client side markup and scripting languages such as HTML, CSS and JavaScript. It also includes server technologies such as database and programming languages, with SQL, MySQL, XML, Java, PHP and ASP among the most common.It is hugely important that developers choose the right tools to deliver particular Web pages. By making use of server technologies, developers can create sites with dynamic data as well as sites with a stimulating level of user interaction. Unfortunately, developers often use technologies simply because they can, rather than because they are ideally suited to a project. When deciding whether to use a particular tool, it's best to ask whether or not it will best serve the purpose and content of the site, which it will do in a successful case.
Pitfalls and Tips
There are lots of common pitfalls and mistakes in Web design and development. Being mindful of these is a great way to avoid making them in your own sites. Many websites publish useful guides from experienced developers detailing what not to do. It's also a good idea to validate your Web page code to maintain a good level of quality.See also:
An Introduction to HTML5 Features
Web Development Concepts: Client and Server
The Vital Components in an Effective Web Page
Good Web Page Characteristics
Subscribe to:
Posts (Atom)