WEB DEVELOPMENT (2)

Eng. Mohamed Adam Isak

PH.D Candidate, Asiae University, Malaysia
Lecturer in Mogadishu University and University of Somalia and Imam Shafii university
Engmaisak@hotmail.com
www.engmaisak.blogspot.com
Tell:0615648915
February to July 2015

ADVANCED CSS
HOW TO DESIGN WEB PAGES EFFECTIVELY USING CSS

USING DIFFERENT TYPES OF CSS SELECTORS

ID SELECTOR
CLASS SELECTOR
INLINE SELECTOR
PRACTICE
DREAMWEAVER (DESIGNER AND CODER)

USING DIFFERENT TYPES OF CSS SELECTORS

HEADER
MAIN CONTENT
FOOTER
RIGHT SIDE
LEFT SIDE
PRACTICE
DREAMWAVER (DESIGNER AND CODER)

USING DIFFERENT TYPES OF CSS SELECTORS

Box model

 Content
Text & web page
elements in the
container

The Box Model

Padding
Area between the
content and the border

Border
Between the padding
and the margin

Margin
Determines the empty
space between the
element and adjacent
elements

Configure Margin with CSS

The margin property
Related properties:
margin-top, margin-right, margin-left, margin-bottom

Configures empty space between the element and adjacent

elements
Syntax examples

h1 { margin: 0; }
h1 { margin: 20px 10px; }
h1 { margin: 10px 30px 20px; }
h1 { margin: 20px 30px 0 30px; }

Configure Padding with CSS

The padding property
Related properties:
padding-top, padding-right, padding-left,
padding-bottom

Configures empty space between the content of the HTML

element (such as text) and the border
Syntax examples

h1 { padding: 0; }
h1 { padding : 20px 10px; }
h1 { padding : 10px 30px 20px; }
h1 { padding : 20px 30px 0 30px; }

The CSS border Property

Configures a border on the top, right, bottom,
and left sides of an element
Consists of
border-width
border-style
border-color

h2 { border: 2px solid #ff0000 }

Configuring Specific
Sides of a Border
Use CSS to configure a line on one or more sides
of an element

border-bottom
border-left
border-right
border-top

h2 { border-bottom: 2px solid #ff0000 }

Font

How to prepare Gallery for the website

Click here to see the gallery designed page

Structuring and defining a site in dreamweaver

Layout of CSS in DREAMWEAVER template

Types of CSS are :

embedded external

CSS Styling for the Mobile

Web and some CSS tips

CSS Styling for Print

Create an external style sheet with the configurations for browser
display.
Create a second external style sheet with the configurations for
printing.

Connect both of the external style sheets to the web page using two
<link> elements.
<link rel="stylesheet" href=lighthouse.css" media="screen">
<link rel="stylesheet" href=lighthouseprint.css" media="print">

17

CSS Styling for the Mobile Web

Configure non-essential content (such as sidebar content to not display (use
display: none; )
Consider replacing images with smaller or cropped graphics
Configure fonts using em units or percentages
Choose colors to maximize contrast
Associate the mobile external style sheet with your web page using a link
element with media=handheld, as shown below:

<link rel="stylesheet" href="lighthousemobile.css" media="handheld">

Mobile Web Limitations

Small Screen Size
Low bandwidth
Limited fonts
Limited color
Awkward controls
Lack of Flash support
Limited processor and memory
Cost per kilobyte

Design Techniques for Mobile Web

One column design

Avoid floats, tables, frames
Descriptive page title
Descriptive heading tags
Optimize images
Descriptive alt text for images
Eliminate unneeded images
Navigation in lists
Provide Skip to Content hyperlink
Provide Back to Top hyperlink
Notice the overlap between these techniques
and designing to provide for accessibility?

CSS Debugging Tips

Manually check syntax errors
Use W3C CSS Validator to check syntax errors
http://jigsaw.w3.org/css-validator/
Configure temporary background colors
Configure temporary borders
Use CSS comments to find the unexpected
/* the browser ignores this code */

Dont expect your pages to look exactly the same in all browsers!
Be patient!

21

Advanced HTML and html 5

Advanced design for the forms

HTML5: Email Text Box

<input>
Accepts text information in
e-mail address format
Common Attributes:

type=email
name
id
size
maxlength
value
placeholder
required

23

HTML5: URL Text Box

<input>
Accepts text information in URL format

Common Attributes:

type=email
name
id
size
maxlength
value
placeholder
required
24

HTML5: URL Text Box

<input>
Accepts text information in URL format

Common Attributes:

type=url
name
id
size
maxlength
value
placeholder
required
25

 Accepts text information

in telephone number format

HTML5: Telephone Number

Text Box
<input>

Common Attributes:

type=tel
name
id
size
maxlength
value
placeholder
required

26

HTML5: Search Text Box

<input>
Accepts search terms
Common Attributes:

type=search
name
id
size
maxlength
value
placeholder
required
27

HTML5: Datalist Control

<label for="color">Favorite Color:</label>
<input type="text" name="color" id="color" list="colors" >
<datalist id="colors">
<option value="red">
<option value="green">
<option value="blue">
<option value="yellow">
<option value="pink">
<option value="black">
</datalist>
28

HTML5: Slider Control

<input>
<label for="myChoice">
Choose a number between 1 and 100:</label><br>
Low <input type="range" name="myChoice" id="myChoice"> High

29

HTML5: Spinner Control

<input>
<label for="myChoice">Choose a number between 1 and 10:</label>
<input type="number" name="myChoice" id="myChoice"
min="1" max="10">

30

HTML5: Calendar Control

<input>
<label for="myDate">Choose a Date</label>
<input type="date" name="myDate" id="myDate">

31

Advanced HTML 5
Working with multimedia

HTML5 Embed Element

<embed type="application/x-shockwave-flash"
src="fall5.swf"
width="640"
height="100"
quality="high
title="Fall Nature Hikes">
33

HTML5 Audio & Source Elements

<audio controls="controls">
<source src="soundloop.mp3" type="audio/mpeg">
<source src="soundloop.ogg" type="audio/ogg">
<a href="soundloop.mp3">Download the Audio File</a>
(MP3)
</audio>
34

HTML5 Video & Source Elements

<video controls="controls" poster="sparky.jpg"

width="160" height="150">
<source src="sparky.m4v" type="video/mp4">
<source src="sparky.ogv" type="video/ogg">
<a href="sparky.mov">Sparky the Dog</a> (.mov)
</video>
35

iframe
Use the iframe element
to embed YouTube Video

<iframe src="http://www.youtube.com/embed/VIDEO_ID" width="640" height="385">

View the
<a href="http://www.youtube.com/watch?v=VIDEO_ID">YouTube Video</a>
</iframe>

36

CSS Image Gallery

Configure each thumbnail image:
<li><a href="photo1.jpg"><img src="photo1thumb.jpg" width="100"
height="75" alt="Golden Gate Bridge">
<span><img src="photo1.jpg" width="400" height="300
alt="Golden Gate Bridge"><br>Golden Gate Bridge </span></a>
</li>
The key CSS:
#gallery span { display: none; }
#gallery a:hover span { display: block;
position: absolute;
top: 10px;
left: 300px;
text-align: center; }

37

Web Publishing
Basics

38

Learning Outcomes
Describe criteria to consider when selecting a web host
Obtain a domain name for your website
Publish a website using FTP
Design web pages that are friendly to search engines
Submit a website for inclusion in a search engine
Determine if a website meets accessibility requirements
Evaluate the usability of a website

39

Domain Names
Establishes a Web presence for your business/
organization
New Business
choose domain name while selecting company name

Established Business
choose a domain name that relates to your established business
presence

Choosing a Domain Name

Describe your business
Be brief, if possible
Avoid hyphens
TLD (top level domain name)

.com, .net, .biz, .us, .mobi and others

.org for non-profits

Brainstorm potential keywords

Avoid trademarked words or phrases
Know the territory (use Google!)
Verify Availability

Registering a Domain Name

There are many domain name registrars, including
http://register.com
http://networksolutions.com
http://godaddy.com

Visit Registrar, choose name, pay with credit card or

Paypal
Private registration additional fee but personal
information is kept private and out of the WHOIS
database

Web Hosting
Some organizations administer a web server in-house
and host their own web site.
Most companies use a web host provider.
A good web hosting service will provide a robust, reliable
home for your web site.
A poor web hosting service will be the source of problems
and complaints.
Do not use free web hosting for a commercial web site.

43

Types of Web Hosting

Hosting Needs: Small to Medium Website
Virtual Hosting

The web host provider's server is divided into a number of virtual domains
and multiple websites are set up on the same computer.

Hosting Needs: Large to Enterprise Web Site

Dedicated Web Server
Co-located Web Server
Consider:

National web host providers

Guaranteed uptime service level agreement (SLA)
Bandwidth of Internet connection
Technical Support

44

Choosing a Virtual Host

See the Web Host Checklist
Operating System

Scripting Support

Web Server Software

Database Support

Bandwidth

E-Commerce Packages

Technical Support

Scalability

Service Agreement

Backups

Disk Space

Site Statistics

E-mail

Domain Name

Uploading Files

Price

Canned Scripts
45

Publish with FTP

FTP, File Transfer Protocol
FTP is utilized to copy and manage files and folders over
the Internet

Popular FTP Applications

Filezilla
SmartFTP
CuteFTP
WS_FTP

46

Popular Search Engines

Google,
Yahoo!, and
Bing the
three most
popular sites
used for
searching the
Web during a
recent
month.

Source: http://blog.nielsen.com/nielsenwire/online_mobile/top-u-s-search-sites-for-june-2010

Search Engine Robot

Also called a spider or bot
A computer program that follows hyperlinks and walks the
Web accessing and documenting Web pages.
Categorizes the pages and stores information in a database.

May access the following components of web pages:

title,
description meta tag
text in headings
other text on the page
hyperlinks

48

Search Engine Database

Database:
A collection of information organized so that its contents can
easily be accessed, managed, and updated.

Database Management Systems (DBMSs)

Configure and manage database
Oracle, MySQL, Microsoft SQL Server, IBM DB2

Search Engine Database

Contains information about web pages

49

Search Engine
Search Form
The part you are most familiar with!
The search form is the graphical user interface that allows a user to
request a word or phrase to search for.
The visitor to the search engine types words (called keywords)
related to their search into the text box.
When the form is submitted, the data typed into the text box is sent
to server-side processing that searches the database using the
keywords you have entered.
The search results (also called a result set) is a list that contains
information such as the URLs for web pages that meet your criteria.

50

Search Engine Results Page (SERP)

A list of items that describe web pages matching the search
terms.
Each item contains a link to a page along with additional information
that might include the page title, a brief description, the first few lines
of text, the size of the page, and so on.

The order the web page items are displayed in the SERP may
depend on:
paid advertisements
alphabetical order
link popularity

Each search engine has their own policy for ordering the search
results.
51

The Meta Element

<meta />
The meta element
A stand-alone tag
Placed in the head section
Attributes:
name
content

<meta name="value" content="value" />

Meta tag used by search engines:
name=description

52

Keywords Meta Tag

Example: Acme Design
<meta name="description" content="Acme Design, a premier
web consulting group that specializes in E-commerce, web
site design, web site development, and web site re-design." />

53

Search Engine Optimization (SEO)

Determine keywords
Page Title
Include the company and/or Web site name
Include selected keywords as approprite

Heading tags
Include keywords

Text on page includes keywords

Search Engine Optimization (SEO) 2

Linking
Provide text navigation hyperlinks
Verify that all hyperlinks are functionig

Page Layout
Avoid nested tables
Use CSS for page layout

Images & Multimedia

Configure meaningful alternate text
Be aware that text and hyperlinks contained within
multimedia may not be accessed by search engine robots

Search Engine Optimization (SEO) 3

Valid Code
Validate XHTML
Validate CSS

Content of Value
Follow Web Design Best Practices
Well-organized
Meaningful & useful to your target audience

Listing in a Search Engine

Wait until your site is finished
Dont submit under construction Web sites!
Visit Search Engine and look for Add URL or Suggest
URL, or Add your Site, etc.
Follow the directions and fill out the form
A robot from the search engine will visit your Web site
and index it
Allow several weeks and test the search engine to see if
your site is listed
57

Link Popularity
A rating determined by a search engine based on:
the number of sites that link to a particular website
the quality of the sites that the links are from

The link popularity of your website can help determine

its order in the SERP

58

Accessibility Testing
Universal Design & Accessibility
Web Accessibility Standards
Section 508
WCAG 2.0

Testing for Accessibility Compliance

Automated Accessibility Testing
Manual Accessibility Testing

Testing Reading Level

59

Usability Testing
Usability
the measure of the quality of a user's experience when
interacting with a website

Usability Testing
Testing how actual web page visitors use a website
Can be done at almost any stage of development
Early use paper and sketches of pages
Design use prototype
Production & Testing use actual pages

60