Web Page Design- Content Analysis

wostinabin2

Week5-Lectureslides-20200617.zip

Home >Information Systems homework help >Web Page Design- Content Analysis

Chapter 05.pptx

WPDD202: Webpage Design & Development

Version 2 – 18th December 2015

Kent Institute Australia Pty. Ltd.

ABN 49 003 577 302 CRICOS Code: 00161E RTO Code: 90458 TEQSA Provider Number: PRV12051

Resource Material

Web Design with HTML & CSS3: Comprehensive, 8th Edition

Jessica Minnick; Lisa Friedrichsen

Cengage Learning Australia

Chapter 5

Responsive Design Part 1: Designing for Mobile Devices

Chapter Objectives

Explain the principles of responsive design

Describe the pros and cons of a mobile website

Explain the design principles of a mobile website

Describe a mobile-first strategy

Define a viewport

Create a fluid layout

Chapter 5: Responsive Design Part 1: Designing for Mobile Devices

Chapter Objectives (continued)

Make images flexible

Use styles for a mobile viewport

Insert and style a span element

Insert a viewport meta tag

Test a responsive site using a device emulator

Chapter 5: Responsive Design Part 1: Designing for Mobile Devices

Exploring Responsive Design

Responsive design

Responsive design is a website development strategy that strives to provide an optimal user experience of a website regardless of the device or browser used

The content in responsive design is easy to read and navigate on devices of three sizes: desktop browser, tablet, and phone

Chapter 5: Creating an Image Map

Exploring Responsive Design (continued 1)

The three concepts of responsive design are:

Fluid layout:

Applies proportional size measurements to the webpage wireframe and content

The viewport is the viewing area for the webpage

Chapter 5: Responsive Design Part 1: Designing for Mobile Devices

Exploring Responsive Design (continued 2)

Media queries

Allow the webpage developer to detect the approximate pixel size of the current viewport

Allow the developer to selectively apply CSS rules that work best for that viewport size

Chapter 5: Responsive Design Part 1: Designing for Mobile Devices

Exploring Responsive Design (continued 3)

Flexible images

They shrink and grow based on the size of the viewport

They do not have height and width attributes or values in the HTML document

They use CSS rules to resize the image relative to the wireframe and viewport

Chapter 5: Responsive Design Part 1: Designing for Mobile Devices

Designing for Mobile Devices

Mobile websites

Techniques emerged to build a completely separate, parallel website optimized for mobile users called a mobile website to address problems with viewports

They are identified with an m. or mo. prefix in the URL

In contrast, responsive design optimizes the viewing experience for a wide range of devices using one website

Chapter 5: Responsive Design Part 1: Designing for Mobile Devices

Designing for Mobile Devices (continued 1)

Mobile-first strategy

Employs responsive design principles

In this, a web developer designs the flexible wireframe and essential content for the smallest viewport first, progressively adding more content as the viewport grows

Then, media queries are used to add styles for progressively larger viewports, progressing from tablet to laptop and desktop

It is a more productive and effective way to build a website from scratch

Chapter 5: Responsive Design Part 1: Designing for Mobile Devices

Designing for Mobile Devices (continued 2)

Implementation of the website development approach depends on many factors, such as:

the current environment

the target audience

available resources

the time available to tackle the project

Chapter 5: Responsive Design Part 1: Designing for Mobile Devices

Using Fluid Layouts

Fluid layout

It is also known as a webpage with a liquid layout

It changes in width based on the size of the viewport

Responsive designs are based on fluid layouts

Chapter 5: Responsive Design Part 1: Designing for Mobile Devices

Using Fluid Layouts (continued 1)

Fixed layouts

They do not change in width based on the size of the viewport

They use fixed measurement units such as pixels to define the width of the areas of the wireframe that “fix” the width of the content regardless of the size of the viewport

It is implemented by measuring the widths of the wireframe elements and content in relative units such as percentages and ems

Chapter 5: Responsive Design Part 1: Designing for Mobile Devices

Using Fluid Layouts (continued 2)

Chapter 5: Responsive Design Part 1: Designing for Mobile Devices

Creating a Fluid Layout

It is created by using percentages to measure the width of each column in a webpage

A webpage can have a liquid layout without using media queries

No matter how small a browser becomes, the content placeholder boxes on the page shrink and grow in response to the size of the viewport

Chapter 5: Responsive Design Part 1: Designing for Mobile Devices

Creating a Fluid Layout (continued 1)

To make the navigation links more appealing on a webpage, they can be formatted so they look like buttons rather than text links

Chapter 5: Responsive Design Part 1: Designing for Mobile Devices

Creating a Fluid Layout (continued 2)

Figure 5–8 shows a webpage with a liquid layout in two widths

Chapter 5: Responsive Design Part 1: Designing for Mobile Devices

Making Images Flexible

Flexible image – It resizes itself to accommodate the size of the viewport and is easy to implement

Creating flexible images:

1. Delete the height and width attribute values for the img tags in the HTML files

2. Add styles for the images in the CSS file to provide the desired flexibility such as the following style: max-width: 100%;

Chapter 5: Responsive Design Part 1: Designing for Mobile Devices

Making Images Flexible (continued)

By setting the width of the image to 100%, the image automatically stretches to fill 100% of the width of the container element

Chapter 5: Responsive Design Part 1: Designing for Mobile Devices

Following a Mobile-First Strategy

It is better to use a single-column layout for a mobile display as this prevents scrolling horizontally

Styling content for mobile devices requires that each page be analyzed to determine the most important content on the page, and then style that content to attract users of mobile devices

Chapter 5: Responsive Design Part 1: Designing for Mobile Devices

Following a Mobile-First Strategy (continued 1)

Figure 5–22a depicts a wireframe example for a traditional desktop viewport, while Figure 5–22b depicts all these same areas of content for a mobile design

Chapter 5: Responsive Design Part 1: Designing for Mobile Devices

Following a Mobile-First Strategy (continued 2)

Figure 5–23 shows how to hide some webpage areas to create a revised mobile wireframe

Chapter 5: Responsive Design Part 1: Designing for Mobile Devices

Following a Mobile-First Strategy (continued 3)

Optimize the interface to maximize the mobile user experience

Some of the key best practices when designing for mobile viewports are as follows:

1. Make use of 100% of the screen space

2. Design the navigation to be easy and intuitive

3. Keep load times minimal. Enhance load times by removing bandwidth-intensive content and streamlining your HTML code

Chapter 5: Responsive Design Part 1: Designing for Mobile Devices

Following a Mobile-First Strategy (continued 4)

4. Display essential page content and hide nonessential page content

5. Make the content easy to access and read

6. Design a simple layout

Chapter 5: Responsive Design Part 1: Designing for Mobile Devices

Using the Span Element

span element

Allows the use of CSS to format a span of text separately from its surrounding text

The <span> and </span> are the start and the end tags

As an inline element, it can be applied to text within a block

A class can be added to a span element to style its text

Chapter 5: Responsive Design Part 1: Designing for Mobile Devices

Using the Span Element (continued)

For example, the following code shows a phone number wrapped in span element.

Chapter 5: Responsive Design Part 1: Designing for Mobile Devices

Adding Meta Tags

For responsive sites, add the following meta tag to the head section of each webpage.

This code makes sure that the page initially loads in a layout width that matches the viewport of the device

Chapter 5: Responsive Design Part 1: Designing for Mobile Devices

Testing Webpages in Viewports of Different Sizes

Chapter 5: Responsive Design Part 1: Designing for Mobile Devices

kent.edu.au Kent Institute Australia Pty. Ltd. ABN 49 003 577 302 ● CRICOS Code: 00161E ● RTO Code: 90458 ● TEQSA Provider Number: PRV12051

Chapter E5 Week 5.pptx

WPDD202: Webpage Design & Development

Version 2 – 18th December 2015

Kent Institute Australia Pty. Ltd.

ABN 49 003 577 302 CRICOS Code: 00161E RTO Code: 90458 TEQSA Provider Number: PRV12051

Accessing and manipulating data and databases and ethical considerations

Chapter E5

Data

A necessity for almost any enterprise to carry out its business. Consists of raw facts, and when organized may be transformed into information

Database

A collection of data organized to meet users’ needs

Database management system (DBMS)

A group of programs that manipulate the database and provide an interface between the database and the user of the database or other application programs

Database definitions:

Def 1: A shared collection of logically related data, designed to meet the information needs of multiple users in an organization. The term database is often erroneously referred to as a synonym for a “database management system (DBMS)”. They are not equivalent and it will be explained in the next section.

Def 2: A collection of data: part numbers, product codes, customer information, etc. It usually refers to data organized and stored on a computer that can be searched and retrieved by a computer program.

Def 4: A collection of information organized and presented to serve a specific purpose. (A telephone book is a common database.) A computerized database is an updated, organized file of machine readable information that is rapidly searched and retrieved by computer.

Def 5: An organized collection of information in computerized format.

Def 7: A Computerized representation of any organizations flow of information and storage of data.

Databases and Traditional File Processing Systems

Fig. 1: A typical file processing environment

Duplication of Data Vulnerable to Inconsistency

Fig. 2: Some more problems in File System Environment

Advantages of Databases

Fig. 3: A typical Database System environment

Difference between Data and Information

Company: Super Soft Inc. Dept. Sales

Emp. Name	Age	Salary
John Smith	23	5000
Marry Cooper	24	4500
Garry Alan	27	4200
Daniel Pine	28	5200

Database Application:

Database Application is a program or group of programs which is used for performing certain operations on the data stored in the database. These operations may contain insertion of data into a database or extracting some data from the database based on a certain condition, updating data in the database, producing the data as output on any device such as Screen, disk or printer.

Database Management Systems:

Database management system is software of collection of small programs to perform certain operation on data and manage the data. Two basic operations performed by the DBMS are:

• Management of Data in the Database

• Management of Users associated with the database.

Typical Components of a Database Environment:

Fig. 4: DBMS and Database

Database is used to store data and DBMS uses mechanisms to get data from the database

Fig. 5: Application Programs

Application programs talk to DBMS and ask for the data required.

Fig. 6: Database Designers

Database designers design (for large organizations) the database and install the DBMS for use by the users of the database in any specific organization.

Once Database has been installed and is functioning properly in a production environment of an organization the Database Administrator takes over the charge and performs specific DBA related activities including:

Database maintenance

Database Backup

Grant of rights to database users

Monitoring of Running Jobs

Managing Print jobs

Ensuring quality of Service to all users

Fig. 7: Database Administrator

Fig. 8: Database Administration’s interaction with other users

Database Development process

Data Modeling and Database Models

Data model

A map or diagram of entities and their relationships

Enterprise data modeling

Data modeling done at the level of the entire organization

Entity-relationship (ER) diagrams

A data model that uses basic graphical symbols to show the organization of and relationships between data

Example: Entity Relationship (ER) Diagram for a Customer Ordering Database

Order

Customer

Product

1:N one-to-many

relationship

Last name

Colour

Identification number

Name

First

name

Identification number

Attributes

Entities

Hierarchical Database Model

Hierarchical database model

A data model in which data are organized in a top-down, or inverted tree structure

Department C

Employee

Department B

Project 1

Department A

Network Data Model

Network data model

An expansion of the hierarchical database model with an owner-member relationship in which a member may have many owners

Project 1

Project 2

Department A

Department B

Department C

Relational Data Model

Project Number	Description	Dept. Number
155	Payroll	257
498	Widgets	632
226	Sales manager	598

Dept. Number	Dept. Name	Manager SSN
257	Accounting	421-55-99993
632	Manufacturing	765-00-3192
598	Marketing	098-40-1370

SSN	Last Name	First Name	Hire Date	Dept. Number
005-10-6321	Johns	Francine	10-7-65	257
549-77-1001	Buckley	Bill	2-17-79	650
098-40-1370	Fiske	Steven	1-5-85	598

Data Table 1: Project Table

Data Table 2: Department Table

Data Table 3: Manager Table

Data Definition Language

Data Definition Language (DDL)

A collection of instructions and commands used to define and describe data and data relationships in a specific database

Manipulating Data

Concurrency control

A method of dealing with a situation in which two or more people need to access the same record in a database at the same time

Data manipulation language (DML)

The commands that are used to manipulate the data in a database

Structured query language (SQL)

A standardized data manipulation language

On-Line Analytical Processing (OLAP)

On-line analytic processing (OLAP)

Access to multidimensional databases providing managerially useful display techniques

Now used to store and deliver data warehouse information

Data warehouse and OLAP

Provides top-down, query-driven analysis

Data mining

Provides bottom-up, discovery-driven analysis

Open Database Connectivity (ODBC)

Open Database Connectivity (ODBC) is an Application Programming Interface (API) provided by Microsoft for accessing databases

Provides functions to insert, modify and delete data and obtain information from the database

Fig. 9: Open Database Connectivity (ODBC)

Database: Security Issues and Ethical Considerations

Legal and ethical issues regarding the right to access certain information. There are many laws governing privacy of information.

Policy issues at the governmental, institutional, or corporate level as to what kinds of information should not be made publicly available – for example, credit ratings and personal medical records

System-related issues such as the system levels at which various security functions should be enforced-- for example, whether a security function should be handled at the physical H/W, OS, or DBMS levels.

The need in some organizations to identify multiple security levels and to categorize the data and users based on these classified. The security policy of the organization with respect to permitting access to various classifications of data must be enforced.

Threats to Database

Threats to database result in the loss or degradation of some or all of the following security goals: integrity, availability, and confidentially.

Loss of integrity

Loss of availability

Loss of confidentially

kent.edu.au Kent Institute Australia Pty. Ltd. ABN 49 003 577 302 ● CRICOS Code: 00161E ● RTO Code: 90458 ● TEQSA Provider Number: PRV12051