SFDDW401: WEBSITE DEVELOPMENT (Develop a website)

REQF Level: 4

Learning hours: 100

Credits: 10

Sector: ICT Sub-sector: Software Development

Learning unit: 1

1.1 Identify the main layout sections according to design specifications

 Types of Web Pages Layouts

Modular Layouts in Web pages

*Reading Behavior on the Web: to Teach and/or Observe. Uses sound/letter relationships,
word parts, and other visual information to figure out new words.

*Adaptive Hypermedia: systems build a model of the goals, preferences and knowledge of each
individual user, and use this model throughout the interaction with the user, in order to adapt the
hypertext to the needs of that user.

*Assistive Technologies: is a generic term that describes tools used by people with disabilities
to accomplish tasks. Can be used to give help: Screen readers: Software used by blind

Page Structure and Site Design

Page headers: is the top section of the web page

Local Navigation: is the set of links on a web page that provide a mechanism for visitors
to navigate a subset of a larger website
Global navigation: is a region of the graphical user interface reserved for buttons, links, search
bars, or any other design element affording movement from one set of content to another.

Search: is the process of enhancing a website to better the chances of it ranking highly in
the search engines.

A web banner or banner ad is a form of advertising on the World Wide Web delivered by an ad
server.( banner can be a flag or other piece of cloth bearing a symbol, logo, slogan or other
message.)

Contact Information: they can help solve their visitors' problems. Include an email and phone
number so visitors can quickly find the right information. Include a short form using fields
that'll help the business understand who's contacting them

Content Area Footer: is an area located at the bottom of every page on a website, below the
main body content

 Key terms related to user interfaces and user interface design and implementation

 Various types of user interfaces:

 Graphical user interfaces (GUI) allows users to directly interact with their devices and
complete certain tasks by manipulating elements like icons and scroll bars, is one way
designers make their digital devices more efficient and usable.( deals with the controls
people use to interact with a website or app, including button displays and gesture
controls.)
And Web-based user interfaces or web user interfaces (WUI): allows the user to
interact with content or software running on a remote server through a Web browser.
 Direct Manipulation Interfaces (Icon interface): s a new interaction technique for
human-computer interaction which has gained considerable relevance in recent years.

Types of computer users and computer use context

A user is a person who utilizes a computer or network service

Types of computer users:

  ADMINISTRATOR USER.
 STANDARD USER
 GUEST USER
 CHILD USER

1.2: Design the web page Layout to match design specifications.

 Document elements

Positioning

 Positioning web page: allows you to take elements out of the normal document layout
flow, and make them behave differently ;( Website promotion to the top places in the
most popular search engines such as Google.pl, Onet.pl, Wp.pl, etc.)
 Style elements: element contains style information for a document, or part of a
document. It contains CSS, which is applied to the contents of the document containing
the <style> element
Example:
<style type="text/css">
p{
color: #26b72b;
}
</style>
<p>This text will be green. Inline styles take precedence over CSS included
externally.</p>
<p style="color: blue">The <code>style</code> attribute can override it, though.</p>

Learning 2. Develop cascading style sheets (CSS)

2.1: Use the appropriate Format, style and layout of the elements on a web page as design
specifications

Layout and style web pages with CSS:

 CSS elements of styles: CSS stands for Cascading Style Sheets, is a style sheet language
used for describing the presentation of a document written in a markup language such as
HTML.
Types of CCS
 Inline: is used to apply a unique style to a single HTML element. An inline
CSS uses the style attribute of an HTML element.an advantage of Inline styles ,it
relates to a specific HTML tag, using a style attribute with a CSS rule to style a
specific page element.
 External: is a standalone. Css file that is linked from a web page. The advantage
of external stylesheets is that it can be created once and the rules applied to multiple
web pages.

External CSS contains separate CSS file which contains only style property with the
help of tag attributes (For example class, id, heading, etc.) CSS property written in a
separate file with

 Internal: is used to define a style for a single HTML page. An internal CSS is
defined in the <head> section of an HTML page, within a <style> element.

It holds CSS rules for the page in the head section of the HTML file. The rules only apply to
that page, but you can configure CSS classes and IDs that can be used to style multiple
elements in the page code.

 The style attributes: specifies an inline style for an element. The style attribute will
override any style set globally, e.g. styles specified in the <style> tag or in an
external style sheet.
 Document-level style sheets: require the enclosing <style> tag, while external style
sheets always omit the <style> tag. External style sheets and document-level style
 sheets use the same syntax for specifying the tags, properties and values, but the
external style sheet omits the beginning and ending <style> tags.
 The type attributes :
 Simple: Simple attributes are atomic values, which cannot be divided further. For
example, a student's phone number is an atomic value of 10 digits.
 Composite: Composite attributes are made of more than one simple attribute. For
example, a student's complete name may have first name and last-named.
 Single-valued: is an attribute that can have only a single value. For example, a
person can have only one Social Security number
 Multi-valued: is an attribute that can have more than one value associated with the
key of the entity. For example, a large company could have many divisions, some of
them possibly in different cities.
 and Derived attribute: is an mental ideas that represent a specific entity property

The media attribute: specifies what media/device the CSS style is optimized for.

This attribute is used to specify that the style is for special devices (like iPhone), speech or print
media.

Example

Specify the style to use for print:

<style media="print">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}
</style>

 The dir attribute: s used to set the base direction of text for display. It is essential for
enabling HTML in right-to-left scripts such as Arabic, Hebrew, Syriac, and Thaana.
Lang attribute: attribute specifies the natural language of the content of a web page and the title
attribute: the title attribute specifies extra information about an element. Example

Use of the title attribute in an HTML document:

<p><abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

<p title="Free Web tutorials">W3Schools.com</p>

 External style sheets: is a standalone. Css file that is linked from a web page.
 Linked external style sheets: is a separate CSS file that can be accessed by creating
a link within the head section of the webpage. Multiple webpages can use the
same link to access the stylesheet.

Imported external style sheets:

We can import additional CSS files inside another CSS declaration. The @import rule is used for
this purpose as it links a stylesheet in a document. This is generally used when one stylesheet is
dependent upon another.

Syntax

The syntax of @import rule is as follows

@import /*url or list-of-media-queries*/

The media queries can be compound statements which may specify the behavior of the document
in different media.

Example

The following examples implement the @import rule −

HTML document −

<!DOCTYPE html>
<html>

<head>

<style type="text/css">

@import url(style.css);

body {

Background-color: honeydew;

</style>

</head>

<Body>

<p>this is demo paragraph one. </p>

<p class="two">this is demo paragraph two. </p>

<p>this is demo paragraph three</p>

</body>

</html>

 Media specific styles: are useful when you want to modify your site or app depending on
a device's general type (such as print vs. screen) or specific characteristics and parameters
(such as screen resolution or browser viewport width).

Media specific style are used for the following:

  To conditionally apply styles with the CSS @media and @import at-rules.
 To target specific media for the <style>, <link>, <source>, and other HTML elements
with the media= attribute.
 To test and monitor media states using the Window.matchMedia
() and MediaQueryList.addListener () JavaScript methods.
Note: The examples on this page use CSS's @media for illustrative purposes, but the basic syntax
remains the same for all types of media queries.

 Linked versus imported style sheets: Linking is the first method for including an
external style sheet on your web pages. It is intended to link your page with your style
sheet. It is added to the head of your HTML document. Importing allows you
to import one style sheet into another.
 Style comments: is used to add explanatory notes to the code or to prevent the browser
from interpreting specific parts of the style sheet. By design, comments have no effect
on the layout of a document.
 Style elements of a web page using a CSS: is the language for describing the
presentation of Web pages, including colors, layout, and fonts. It allows one to adapt the
presentation to different types of devices, such as large screens, small screens, or
printers. CSS is independent of HTML and can be used with any XML-based markup
language.
 CSS style sheets to multiple pages in a website: Site authors may also offer multiple
style sheets, which can be used to completely change the appearance of the site without
altering any of its content. Most modern web browsers also allow the user to define their
own style sheet, which can include rules that override the author's layout rules.
 elements of document position using CS: Positioning allows you to take elements out of
the normal document layout flow, and make them behave differently; for example sitting
on top of one another, or always remaining in the same place inside the browser viewport.
This article explains the different position values, and how to use them.

2.2: Test and validate the layout with reference to design specifications
Website Tests within various browsers:

 Content Browser-Specific HTML: Browser specific tags (elements)

are HTML elements that only work in a specific browser. For example, the marque set
of HTML tags is specific to Internet Explorer.
 Platform Specific HTML: There are differences not only between browsers, but also
between platforms. This difference is most clear with regard to fonts and font sizes.
 Form submission and Getting Results: When data that has been entered into
HTML forms is submitted, the names and values in the form elements are encoded and
sent to the server in an HTTP request message using GET or POST.
 Files upload to the Website: Uploading is the transmission of a file from one computer
system to another, usually larger computer system. From a network user's point-of-view,
to upload a file is to send it to another computer that is set up to receive it. ... However,
in practice, many people use "upload" to mean "send" and "download" to mean receive.
 Web pages Validation against industry standards: is making your website's code as
clean as possible and testing.

Learning unit 3. Ensure website content meets technical protocols and standards.

3.1: Verify and validate the web content in accordance with required standards.

 Validation of web content:

 HTML/XHTML Validation: An HTML validator is a quality assurance program used

to check Hypertext Markup Language (HTML) markup elements for syntax errors.
A validator can be a useful tool for an HTML user who receives data electronically
from a variety of input sources.
 XHTML stands for Extensible Hypertext Markup Language. XHTML is a stricter, more
XML-based version of HTML. XHTML is HTML defined as an XML
application. XHTML is supported by all major browsers.
 XHTML is a mix of HTML (the Hypertext Markup Language) and XML (extensible
Markup Language). Therefore, the name XHTML is interpreted as the extensible
Hypertext Markup Language.
Examples:
Your Name: <input type="text" name="name “required>
Email Address: <input type="email" name="email" required placeholder="Enter a valid
email address">
 CSS Validation: is the process of checking something against a rule. When you are a
beginner, it is very common that you will commit many mistakes in writing
your CSS rules.
 Section 508 Standards Validation (accessibility): is the practice of making your
websites usable by as many people as possible.
 WAI standards Validation (accessibility) : Web Accessibility Initiative
Web accessibility initiative means that websites, tools, and technologies are designed
and developed so that people with disabilities can use them. More specifically, people
can: perceive, understand, navigate, and interact with the Web. Contribute to the Web.

 Links (check for dead links) Validation: pings the destination of a URL and tests for
errors. This helps avoid broken and invalid links in your published document, and is
especially useful for bloggers.
 Feeds Validation: is used to test an RSS document (also called an RSS feed) to check
your code for errors. RSS: Really Simple Syndication

3.2. Test the content as per standard procedures

 Readability

 Ease of Comprehension
 Legibility
 Reading Enjoyment

Site Navigability

 Information Architecture
  Find ability
 Efficiency of Navigation

 Accessibility

 Cross-Browser/Cross Platform

 Compatibility

 Semantic HTML Markup

 Color Choice
 Use of HTML Accessibility Features

 Website Speed

 Web page Response Time

 Web page Size
 Code Quality
 User Experience
 Fulfillment
 Enjoyment
 Positive Emotions
 Overall Structure

 Validity of Content/Content is accurate

 Wrong information
 Inaccurate graphs or displays
 Errors in spelling or grammar
 Graphics/Illustrations
 Look for clarity in visuals.
 verify that the current size is appropriate
 Check that key content is not covered in small print captions

Learning unit 4.Produce interactive web animations

4.1: Analyze website requirements in accordance with client’s requirements

 Necessary dynamic functionality of the animation to be included inside the web

document
 appropriate language to achieve that functionality
 current requirements for online advertising with major agencies and websites

4.2: Design of web animations and responsiveness according to the design specifications

Web document design and animations to enhance the page

 Advertisements to promote the web page within a website

 Advertisements to promote the web page, on externally hosted paid advertising

 Advertisements that meet current website advertising specifications for size, number or loops
sound and buttons

 Gif replacements for animation as per major advertising agency requirements

 Animations for a website that will add to the overall professionalism, or entertainment value,
of a website

 Scripts Test and debug against the required functionality and reiterate until correct

 Introduction to Bootstrap

Bootstrap:

Front-end framework used to create modern websites and web apps. It's open-source and free to
use, yet features numerous HTML and CSS templates for UI interface elements such as buttons
and forms. Bootstrap also supports JavaScript extensions

 Alert: An alert box is often used if you want to make sure information comes through to
the user. Note: The alert box takes the focus away from the current window, and forces
the browser to read the message.
  Buttons: is any graphic or text box that allows your visitors to interact with
your website.
 Icons: a small picture or symbol that serves as an intuitive representation of the content
of a website.
 List groups: are very useful and flexible component for displaying lists of elements in a
beautiful manner.
 Models: are representations that can aid in defining, analyzing, and communicating a set
of concepts. System models are specifically developed to support analysis,
specification, design, verification, and validation of a system, as well as to communicate
certain information.

4.3: Publish animations

 animations in an acceptable web format

 web animations into a hypertext markup language (HTML) page
 documentation and its submission to the appropriate person for their approval

Learning unit 5. Integrate website with social web technologies

5.1: Identify social web to be integrated with websites

 different popular social network websites:

 Twitter
 Facebook
 LinkedIn
 Google+
 YouTube
 Pinterest
 Instagram
 Tumblr
 benefits of social networking in websites
1. Social networking gives you a chance to connect with people around the
world.
 One of the most obvious advantages of using social networking is the opportunity
these websites provide you to reach people from anywhere in the world.
2. This technology gives us access to easy, instant communication tools.
Social networking gives us the chance to stay connected with one another
wherever we happen to go.
3. Information happens in real-time blocks on social networks.
Before the Internet came around, we all had to wait for the daily newspaper or the
news broadcasts on television to know what was going on in the world that day.
4. Social networking creates brand exposure for businesses.
Any type of professional organization can use their social networking presence to
connect with their current and future customers.
5. Being on a social network is a lot of fun.
The average person in the United States spends between 35 to 45 minutes every
day on their favorite social networks.
6. This tool can help students perform better at school.
About 3 out of every 5 students say that they use social media to discuss
educational topics if they have access to the Internet.
 negative aspects of social network
1. Social networking exposes us to a lot of information.
When social networks first started, the platforms became a place of meaningful
connection. You would share videos, photographs, and letters with the essential
people in your life.

2. There are privacy issues to consider with social networks.

Because there is so much data sharing happening with the modern social network, the
amount of privacy that we have for the average person is shrinking a little bit every day.
The user agreements that you agree to follow when signing up for this service might even
create a license which allows the platform to use your content without attribution –
including your pictures.
 3. Cyberbullying and peer pressure are significant issues.
If you struggle to fit in with your group of peers, then you might feel some pressure to
behave or communicate in specific ways to feel accepted.

4. Some people substitute online interactions for their offline relationships.

Our constant connections with one another create a change in how we approach our
relationships.
5. It can disrupt your sleep cycle.
When you expose your brain to electronics, then it can change the emphasis of your
mind from wanting to go to sleep to staying engaged with social media.
6. . Social networking can spread false or unreliable information quickly.
When traditional media reporters were polled about their use of social media, over
78% of them said that they used their platforms to check for breaking news.
7. It can be more difficult to find a job with your social media presence.
Not only can you lose a job because of what you decide to share on social networks,
but you can also find it more challenging to be offered a position in the first place.
 goals based on the client requirements for successful social network integration
Sites allow users to share ideas, digital photos and videos, posts, and to inform others
about online or real-world activities and events with people in their network.

5.2: Develop the code and documentation of the integration requirements

 pre-existing scripts and tools to integrate a social networking website into a pre-existing
website
 Integration establishment test.