site development associate v2 - okaloosa schools...an initial web site plan • site plan is a rough...

Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Copyright © 2012 Certification Partners, LLC -- All Rights Reserved

Site Development Associate v2.0


Lesson 1: Markup Language and

Site Development Essentials

Copyright © 2012 Certification Partners, LLC -- All Rights Reserved

Lesson 1 Objectives

•  Discuss Web page creation •  Discuss mobile and cloud issues •  Introduce text editors and markup languages •  Introduce graphical user interface (GUI) editors •  Discuss the history of markup languages •  Introduce the HTML Web development trifecta •  Discuss Web site development principles •  Introduce hosting and Web service providers •  Introduce the Habitat for Humanity Web site


Creating Web Pages

•  Web page authoring is becoming a standard skill set for many careers

•  You must know: –  Hypertext Markup Language (HTML) –  Cascading Style Sheets (CSS)

•  Additional technologies include: –  Flash –  Java –  ActiveX –  Microsoft Silverlight


Mobile and Cloud Issues

•  Web site development has been impacted by: –  Smartphones, tablets and other mobile devices –  The cloud

•  Cloud services –  Do not require knowledge of HTML to create Web

pages –  Users simply "point and click" the available Web site

tools to design a personalized page


Text Editors and Markup Languages

•  You do not need to use a special editor application to create markup –  You can use a simple text editor (e.g., Notepad

or Vi) •  When creating HTML files, you must:

–  Save the text as plaintext –  Save the file using either the .html or .htm file

name extension


Graphical User Interface (GUI) Editors

•  GUI HTML editors: –  Create HTML code for you

•  You type page text as you would with a standard word processor

•  You point and click with a mouse •  Popular GUI HTML editors include:

–  Adobe Dreamweaver –  Microsoft Expression Web –  Mozilla SeaMonkey –  Adobe GoLive –  KompoZer –  Bluefish


Why Learn Markup Languages?

•  GUI HTML editors do not keep pace with the latest improvements in markup language

•  You can add features to pages not supported by the editor

•  You will not be limited by the GUI editor’s capabilities


History of Markup Languages

•  Standard Generalized Markup Language (SGML) –  Originally created by IBM in 1986 –  A metalanguage, meaning it is used to create

other languages –  The basis for HTML, XHTML and XML –  You create your own document rules using a

Document Type Definition (DTD)


History of Markup Languages (cont'd)

•  Hypertext Markup Language (HTML) –  Based on SGML, invented by Tim Berners-Lee –  Allows hyperlinks –  HTML vs. SGML

•  HTML versions include: –  HTML 3.2 –  HTML 4.01 (the most popular version of HTML)

•  HTML 4.01 flavors include: –  4.01 Strict – requires all container tags and does not allow

deprecated tags –  4.01 Transitional – allows deprecated tags, not as strict –  4.01 Frameset – for use with frames



•  Extensible Markup Language (XML) –  A subset of SGML, also a metalanguage –  XML describes data instead of formatting –  HTML or XHTML provides formatting and document

structure •  Extensible Hypertext Markup Language (XHTML)

–  Combines HTML with XML –  XHTML allows HTML to become XML-compliant



•  HTML5 –  The latest version of HTML under development by

the W3C –  Provides modern requirements for the Internet with

fewer plug-ins


Universal Markup Creation

•  Follow W3C standards •  Benefits of following standards include:

–  Code will render as expected in more browsers –  Pages will be more scalable (as you add more

sophisticated content, you will not run into problems)

–  Pages are more likely to be available to disabled users


The HTML Web Development Trifecta: HTML5, CSS and JavaScript

•  The future of Web design lies within three technologies: –  HTML5 –  Cascading Style Sheets (CSS) –  JavaScript

•  These technologies used together provide Web pages that easily adapt to smartphones, tablets, gaming devices and smart TVs, as well as to traditional PCs


Project Management and the Web Development Project Cycle

•  Create and document an initial Web site plan •  Obtain relevant input from stakeholders •  Communicate the Web site plan •  Consider technical and non-technical concerns •  Develop the site •  Publish the site •  Manage the site


Developing Accessible Web Pages

•  Americans with Disabilities Act (ADA) –  Enforced by the U.S. Justice Department –  Requires Web designers to create "reasonable

accommodations" for disabled users: •  Ensuring that all images have text-based

descriptions •  Providing text-based alternatives to all non-text

content (e.g., Java applets and Flash presentations)

•  Providing easy-to-read forms


Developing Accessible Web Pages (cont'd)

•  Web Content Accessibility Guidelines (WCAG) –  Provided by the W3C Web Accessibility Initiative

(WAI) –  A product of worldwide cooperation

•  Section 508 of the Rehabilitation Act –  All federal agencies must ensure that all electronic

and information technology developed, procured, maintained or used by federal agencies be comparably accessible to users with disabilities

–  Based on the WCAG


Verifying Web Page Accessibility

•  Many tools available, including: –  W3C Page Validator –  Total Validator –  Cynthia Says –  Vischeck –  MAGpie

•  Adopt a single W3C standard and apply it consistently throughout your site


General Web Page Accessibility Considerations

•  Visual challenges –  Text readability –  Text support for images –  Screen reader support

•  Audio challenges –  Alternative audio support –  Alternative speech input –  Text support for audio elements

•  Cognitive and technical challenges


Creating and Documenting an Initial Web Site Plan

•  Site plan is a rough outline of planned development –  Site diagram –  Storyboard

•  Wireframing –  The process of developing an outline for a Web

presence •  Determining audience and message •  Validating design issues

–  Consider issues such as central message, fonts, images, colors, ethnic and cultural diversity, and common color schemes


Obtaining Relevant Input from Stakeholders

•  Stakeholders are relevant organization employees or contributors who can provide or help determine: –  The purpose of the Web site –  The services that the audience requires from the site –  Development timelines

•  As you work with stakeholders: –  Remember that non-technical people may be asked to

approve your project –  You must translate technical issues into non-technical

language •  Team members can include representatives from marketing,

IT, sales and other areas of your organization


Documenting and Communicating the Plan

•  Create a storyboard •  Document decisions in meetings and follow up •  Communicate the plan in various ways:

–  Calling relevant parties to ensure that everyone is satisfied

–  Sending e-mail messages –  Sending postal ("snail mail") messages if necessary –  Sending fax messages –  Telephone calls


Communicating the Web Site Plan

•  Use oral presentations and presentation aids, including: –  Presentation software –  Overhead projection –  Whiteboards –  Easel and poster paper –  Charts –  Published handouts


Leading Discussions

•  Strategies leaders use to manage a meeting: –  Make introductions –  Recall past business –  Create a list of action items, including timelines –  Monitor time –  Ensure proper discussion focus –  Handle heated discussions –  Distribute minutes


Considering Technical and Non-Technical Concerns

•  Leaders can ensure communication by: –  Regularly asking if anyone has questions –  Asking team members to summarize their

understanding of decisions –  Asking a third party to deliver a summary of

progress –  Writing regular updates about the project


Developing the Site

•  As your team develops the site, you will be engaged in various activities: –  Creating markup code –  Testing functionality –  Approving the site –  Publishing the site


Testing Pages in Multiple Browsers

•  As you develop Web pages, test them using multiple Web browsers

•  Different generations of the same browser may interpret HTML somewhat differently

•  Browser vendors also implement standards differently •  Browser types include:

–  Microsoft Internet Explorer –  Mozilla Firefox –  Google Chrome –  Opera –  Lynx


Managing the Site

•  When managing a site, you must be prepared to: –  Create new content –  Update dead links –  Remove old sites –  Remove unused pages –  Ensure connectivity –  Report access troubles –  Process feedback from customers and

stakeholders


Obtaining Feedback

•  Your Web team must process various types of feedback

•  Feedback can come from various sources •  Ways to obtain quality feedback

–  Providing Web forms on the site that ask for customer input

–  Conducting surveys in person –  Conducting surveys via e-mail


Intellectual Property

•  A unique product or idea created by an individual or organization –  Generally has commercial value

•  Never "borrow" content without express written consent •  Review copyright and trademark issues (e.g., trade secrets,

licensing, infringement, plagiarism) •  Understand copyright scope, reach and time limits •  Consider ethical issues of copyright and plagiarism •  Avoid copyright infringement, trademark infringement and

plagiarism by: –  Reviewing content –  Obtaining express written consent –  Creating reasonable deadlines


Outsourcing

•  Increasingly, Web development work (including site design) is being outsourced to workers in remote locations –  May save the company money –  May require you to work with remote workers

•  As you use and work with remote teams, you may have to obtain: –  Non-Disclosure Agreements (NDAs) –  Legal consultation


Hosting and Web Service Providers

•  Internet Service Provider (ISP) –  Provides basic services

•  Internet connectivity •  Web server

–  You need your own experts •  Cloud service provider

–  Provides more advanced services •  Software-as-a-service (SaaS) •  Backup services and nearly unlimited hard drive space •  Advanced Web and database connectivity •  Enterprise resource planning (ERP)


Co-Location, Dedicated Hosting and Virtual Servers

•  Co-location •  Dedicated hosting (co-hosting) •  Virtual server


Costs of Using a Cloud Service

•  Costs associated with a cloud service include: –  Database connectivity –  Per-service costs –  Bandwidth –  Customer support –  Security –  Application development


Negotiating Web Services and Communicating Needs

•  Be prepared to detail your needs •  Negotiate prices by providing information:

–  Potential amount of traffic –  Hard drive space needed –  Database and CGI needs –  Additional services (e.g., custom applications)


Information You Need from Your Service Provider

•  Account information •  IP addresses and DNS names of the server •  Instructions about file and directory locations •  Service provider's contact information


The Habitat for Humanity Web Site

•  A not-for-profit, volunteer-driven organization that builds and sells homes for families worldwide

•  Has built more than 150,000 homes worldwide •  A Web site example in this course •  Like any Web site, it targets an audience

–  The site is part of a concerted effort to bring in volunteers

–  People with technical expertise must run the site –  More than technical expertise is required –

the Web design team must also understand the business goals


Lesson 1 Summary

! Discuss Web page creation ! Discuss mobile and cloud issues !  Introduce text editors and markup languages !  Introduce graphical user interface (GUI) editors ! Discuss the history of markup languages !  Introduce the HTML Web development trifecta ! Discuss Web site development principles !  Introduce hosting and Web service providers !  Introduce the Habitat for Humanity Web site


Lesson 2: HTML5 Coding


Lesson 2 Objectives

•  Define elements and markup tags •  Identify HTML5 document structure tags •  Define Web site file structures •  Prepare your development environment •  Use paragraph formatting and block-level

elements •  Use text-level elements •  Use ordered and unordered lists •  Use comments and good coding practices


Elements and Markup Tags

•  Markup tags are element names enclosed in angle brackets, or wickets –  Tags embed the element information in the

document so that a user agent (e.g., browser) will render text as instructed by the associated element

–  The combination of elements, markup tags and standard text is loosely referred to as either "code" or "markup"


Container Tags

•  Container tags contain page text between an opening and a closing tag, as shown

•  Container tags are also known as non-empty tags •  HTML encourages the use of container or non-empty

tags


Empty Tags

•  An empty tag does not use a closing tag •  An empty tag does not directly format a specified block

of text, and therefore one tag can execute the instruction

•  An empty tag can be written with a slash after the element to become a stand-alone non-empty tag (e.g., <br/>)


What Constitutes a Tag?

•  An element – provides the main instruction of the tag

•  An attribute – specifies a quality or describes a certain aspect of the element

•  A value – gives value to the element and its attribute


Document Structure Tags

•  HTML5 documents usually contain most of the following document structure components: –  A <!DOCTYPE> declaration –  The <html> </html> tag –  The <head> </head> tag –  Any <meta/> tags –  A <link/> tag reference to a style sheet

(recommended) –  The <title> </title> tag –  The <body> </body> tag


Are HTML Tags Case-Sensitive?

•  HTML tags are not case-sensitive, but older XHTML tags are case-sensitive

•  It is recommended that you write code in lowercase letters to ensure consistency, compatibility and conformance


Document Type Declaration (<!DOCTYPE>)

•  Describes the markup language and version of your code

•  Placed at the top of the document •  If you do not specify a <!DOCTYPE> declaration,

then two problems may arise: –  You will not be able to control how your code

renders in the future –  You will not be able to use a markup validator

•  Each version and flavor of HTML/XHTML has its own <!DOCTYPE> declaration

•  <!DOCTYPE html> is used for HTML5 files


The <html> and <head> Tags

•  The <html> </html> tags encompass all other HTML elements in the document

•  The <head> </head> tags encompass several document elements, including: –  The <meta/> tag –  The <link/> tag that references a CSS file, if

present –  The <title> </title> tags


The <body> tag

•  All content to be displayed on the page through the user agent must be enclosed between the <body> </body> tags

•  The <body> tag no longer has attributes with HTML5

•  The previous formatting attributes have been replaced by CSS and the inline CSS style attribute


Web Site File Structure

•  When creating a Web page, you must consider the site’s file structure

•  Your HTML and image files will be uploaded to a server eventually, so it is always good practice to organize your files as you create them


Preparing Your Development Environment

•  Obtain a text editor •  Install multiple browsers •  Set file preferences


Paragraph Formatting and Block-Level Elements

•  Block-level elements –  Elements that can affect entire paragraphs or

multiple paragraphs •  The <p> tag •  The <br/> tag

•  Text-level elements –  Elements that can affect as little as a single

character or word •  <strong> or <em>


Heading Levels

•  Block-level element •  Heading levels 1

through 6 –  <h1> </h1> –  <h2> </h2> –  <h3> </h3> –  <h4> </h4> –  <h5> </h5> –  <h6> </h6>


Tag Nesting in Markup

•  Placing one pair of tags between another –  Proper: <h1> <em> ... </em> </h1> –  Improper: <h1> <em> ... </h1> </em>

•  Improper: The <em> tag is opened within the <h1> tags, but closed after the </h1> tag

•  If you fail to properly nest code, your pages may still render in some user agents, but they will not validate and may fail to render in the future


Primitive Formatting with the <pre> Tag

•  The <pre> tag retains formatting on preformatted text

•  Can be used to retain tabular format, spacing •  All text between <pre> </pre> tags will render as

formatted in the HTML file


Indenting and Centering Text

•  Use an inline CSS style attribute in the paragraph tag to: –  Center text –  Justify items to the right or left on a page

•  The <blockquote> tag also centers and indents a block of text


Text-Level Elements

•  Bold and italic text –  <strong> for bold text –  <em> for italic text


Phrase Elements and Font Style Elements

•  The <b> element is a font style element, <strong> is a phrase element; both create boldface text

•  The same is true of <i> and <em>, respectively, which both create italic or emphasized text

•  The difference is that <b> specifically means apply the bold font style, whereas <strong> indicates that the text is to be given a strong appearance

•  In short, <b> represents a font appearance instruction, whereas <strong> represents the weighting of the phrase relative to surrounding text


The <code>, <kbd> and <samp> Tags

•  All make text appear in a fixed-width font in an HTML-compliant browser window

•  Text-level phrase elements, their usage and their appearances:


Lists

•  Ordered –  A numbered list –  Uses the <ol> element and requires a closing tag </

ol> •  Unordered

–  A bulleted list –  Uses the <ul> element and requires a closing tag </

ul>


Lists (cont'd)


Good Coding Practice

•  Write code for forward-compatibility: –  Close all tags –  Use lowercase letters within tags –  Surround attribute values with quotation marks

•  Create universal markup that applies W3C standards consistently and thus renders consistently across most or all browsers

Good Coding Practice (cont’d)

•  Create code that can be easily read by others •  Exceptions:

–  Some code might encounter problems if it includes random spaces

–  Always test your code in multiple browsers and validate it

•  Adding hidden comments:  •  Use comments to annotate code or document

changes


Lesson 2 Summary

! Define elements and markup tags !  Identify HTML5 document structure tags ! Define Web site file structures !  Prepare your development environment ! Use paragraph formatting and block-level elements ! Use text-level elements ! Use ordered and unordered lists ! Use comments and good coding practices


Lesson 3: Cascading Style Sheets (CSS)

and Graphical Elements


Lesson 3 Objectives

•  Discuss Cascading Style Sheets •  Separate content in HTML •  Incorporate images in Web pages •  Discuss HTML entities •  Use the browser-safe color palette •  Use colors and images for page backgrounds •  Specify font information •  Consider Web design issues, including color

combinations and page layout


Cascading Style Sheets

•  A technology that adds formatting and structure to your pages

•  A style sheet is simple text file that contains instructions

•  If all pages on your site are linked to the same style sheet, then one simple change to the style sheet will change all specified elements across the site


Cascading Style Sheets (cont’d)

•  CSS benefits include: –  Consistency –  Easy change management

•  Currently, three standards exist for style sheets: –  Cascading Style Sheets (CSS1) –  Cascading Style Sheets 2 (CSS2) –  Cascading Style Sheets 3 (CSS3)

•  HTML5 adopts CSS as the preferred way to format a page



•  CSS terminology: –  Selector – element to which designated styles are

applied –  Property – changes the way a selector renders in a

browser –  Value – defines a property –  Declaration – consists of a property and value –  Rule – consists of a selector, property and value



•  Proper CSS structure – place the opening and closing curly braces and each declaration on separate lines

•  Inheritance – the style you define will flow, or cascade, throughout the documents, unless another style defined inside of a page specifically overrides it

•  To apply CSS styles to HTML documents, you can: –  Declare an inline CSS style attribute –  Link to an external style sheet –  Create an internal style sheet


Separating Content in HTML

•  Create a horizontal rule using the <hr> tag: –  <h1> Horizontal Rules </h1>

<hr/> Horizontal rules: Lines used to make visual divisions in your document.

•  Use CSS to stylize horizontal rules


Images in Web Pages

•  Use the <img> tag to insert an image file •  The key attributes that are required in this tag are:

–  src (abbreviation for source) –  alt (alternative text for the image if it cannot be

seen) •  Image file formats

–  Graphics Interchange Format (GIF) –  Joint Photographic Experts Group (JPEG) –  Portable Network Graphics (PNG)


Comparing Image File Formats


Using the alt Attribute with Images

•  The alt attribute specifies alternative text to appear while the graphic is loading, or in place of the graphic in non-graphical browsers

•  Every image used in HTML5 is required to contain the alt attribute with a corresponding value


Combining Background Images and Background Colors

•  If you use a style sheet and specify both image and color as a background, then the background image will always render first

•  If the image cannot be found, a background color will then appear


Aligning Images Relative to Text

•  Use CSS to align images to text •  Alignment options include:

–  bottom –  middle –  top –  left –  right


Resizing Images

•  Specify image size using the following attributes: –  height –  width

•  The syntax for these attributes is: <img src="imagename.gif" height="NumberOfPixels" width="NumberOfPixels"/>

•  Specifying both height and width can distort an image; be sure to use proper proportions


HTML Entities

•  Uses code with ampersand (&) and semicolon (;) •  HTML entities include:

–  The "less than" symbol < •  Code: <

–  The "greater than" symbol > •  Code: >

–  The copyright sign © •  Code: © or ©

–  The registered trademark sign ® •  Code: ® or ®

•  Non-breaking space:


Specifying Colors

•  Colors can be specified by name or by Hexadecimal "Red Green Blue (RGB)" value


Browser-Safe Color Palette

•  A set of 216 colors guaranteed to render properly •  Ensures that colors in pages render as expected

–  If you specify a color not supported by the monitor or operating system, the system will approximate the color, a process called dithering

–  Unexpected results may occur as the result of dithering


Page Colors and Backgrounds

•  Specifying color for a page background: –  add the background-color property to the body selector in

an external CSS file

•  Specifying an image for a page background: –  add the background-image property to the body selector

•  Specifying the color of text: –  Add the color property to the body selector

•  Specifying the color of unvisited links: –  Use the <a:link> element

•  Specifying the color of visited links: –  Use the <a:visited> element


Specifying Font Information

•  CSS allows you to change the size, color and typeface of the text

•  CSS supports many font-related selectors and properties, including: –  font-family –  font-size –  color


Web Design Issues

•  Color combinations impose tone and mood •  Consider cultural and audience concerns •  Page layout guidelines:

–  Be succinct –  Make sure that each page focuses on one topic –  Divide the page into three sections –  Include navigation aids –  Place comments in each section of code


Web Design Issues (cont’d)

•  Basic HTML5 structural elements of a Web page:


Web Design Issues (cont’d)

•  Page-layout methods to control the placement of Web page elements when rendered in the browser: –  Fixed-width layout –  Liquid layout

•  Relative path names •  White space, the <img> tag and HTML


Lesson 3 Summary

! Discuss Cascading Style Sheets !  Separate content in HTML !  Incorporate images in Web pages ! Discuss HTML entities ! Use the browser-safe color palette ! Use colors and images for page backgrounds !  Specify font information ! Consider Web design issues, including color

combinations and page layout


Lesson 4: Hyperlinks


Lesson 4 Objectives

•  Define and use the anchor element •  Create local hyperlinks •  Create external hyperlinks •  Use images as hyperlinks •  Create internal hyperlinks •  Manage hyperlinks


The Anchor Element

•  The <a> element creates a hyperlink •  The href attribute is used to specify the link's

hypertext reference, or the target of the link •  The syntax for using the anchor element to create a

link is as follows: <a href="URL"> linked text or image (or both) </a>


The Anchor Element (cont'd)

•  Examples of values for the URL when referencing external links:



•  Various protocols you can specify in a hyperlink URL:



•  Make sure that you: –  Use a closing anchor tag </a> –  Place quotation marks around the value –  Include the closing bracket at the end of the opening

<a> tag •  Various issues to troubleshoot with hyperlinks include:

–  Text and images that disappear –  Successive Web page text that appears as a hyperlink –  Garbled code that appears on screen –  Code that will not validate due to a problem <a> tag


Hyperlinks

•  Types of hyperlinks include: –  Local hyperlink – a link you create from one file on

your local system to another file on your local system

–  External hyperlink – a link you create from a file on your system to a separate file on the Internet

–  Internal link – a link you create to target other areas within the same page

•  You can create a hyperlink from an image by surrounding the image tag with opening and closing anchor tags


Creating Internal Links

•  Creating an internal link requires two steps: –  Use the anchor element, <a>, with the id attribute

to define an area as a target (the bookmark or anchor)

–  In another portion of the page, create the link that points to the bookmark using the anchor element with the hypertext reference (href) attribute


Managing Hyperlinks

•  All hyperlinks need to be verified –  Verify that the URL or other reference is valid –  Verify that the target page or location is accessible

•  Hyperlinks need to be managed –  Over time, URLs (and content) change –  "Dead" links frustrate users

•  Use automated link-checking software to validate hyperlinks

•  Manually check links to verify relevance of linked content


Lesson 4 Summary

! Define and use the anchor element ! Create local hyperlinks ! Create external hyperlinks ! Use images as hyperlinks ! Create internal hyperlinks ! Manage hyperlinks


Lesson 5: HTML Tables


Lesson 5 Objectives

•  Describe HTML table elements and attributes •  Describe CSS properties for tables •  Use table and data alignment options •  Change the height and width of table elements •  Specify column and row spanning •  Compare HTML tables with CSS page structure


Introduction to HTML Tables

•  Present data that lends itself to tabular format •  In HTML, do not use tables to structure entire pages


Table Element Tags


CSS Properties for All Table Elements


Table and Data Alignment Options

•  Defaults for table data: –  Content in table header cells is aligned both

horizontally and vertically to the center of the cell –  Content in table data cells is aligned horizontally to

the left and vertically to the center •  You can change the alignment for an individual cell or

for an entire row by using CSS properties: –  text-align to specify horizontal alignment –  vertical-align for vertical alignment


Height and Width of Table Elements

•  You can change the height or width of the table and individual cells by using the height property of the CSS table rule

•  You can specify: –  Pixel values –  Percentage values


Column and Row Spanning

•  You can specify that a column or row span two or more cells using the following attributes: –  colspan to specify that a column span across

multiple cells –  rowspan to specify that a row span across multiple

cells


HTML Tables vs. CSS Page Structure

•  HTML tables were formerly used to create content structure for entire Web pages

•  The W3C recommends using HTML5 with CSS to structure a Web page

•  HTML5 structural elements of Web page:


Lesson 5 Summary

! Describe HTML table elements and attributes ! Describe CSS properties for tables ! Use table and data alignment options ! Change the height and width of table elements !  Specify column and row spanning ! Compare HTML tables with CSS page structure


Lesson 6: Web Forms


Lesson 6 Objectives

•  Discuss the importance of CGI to Web forms •  Discuss HTML5 and Web forms •  Identify basic Web form tags •  Construct a Web form using Web form fields


Introduction to Web Forms

•  Forms are used to obtain information from users –  Input can include the user’s name, address or credit

card number, for example –  The information that a user submits in the form is

sent to a server, where it is stored and/or processed •  Forms are essential for e-commerce, as well as for

gathering information


Web Forms and CGI

•  To be truly functional, a form requires the use of a Common Gateway Interface (CGI) program to process and organize the user input

•  A CGI script residing on a server performs two important functions: –  Receives data from a Web browser –  Processes and formats the data

•  CGI scripts can also be used to forward data to the proper destination, where it can be processed or stored


Diagramming a CGI Session


Parsing Data

•  A Web form receives submitted user input •  CGI scripting (or an alternative) parses the data •  The browser sends user-submitted information to the

Web server as a raw text string •  The basic element of a raw text string is a name=value

pair •  This raw text string consists of name=value pairs,

delimited by ampersands (&) •  After the server receives this information, a CGI script

can parse and format the raw text string into a human-readable format, or enter the data into a database


Applied Example: FormMail

•  FormMail is popular because: –  It is available free of charge from Matt's Script

Archive (MSA) –  It is written in Perl, which allows developers to use a

free CGI interpreter –  It is easy to customize

•  You install the script onto a Web server and refer to it in your forms


HTML5 and Forms

•  The main differences in form creation in HTML5 vs. HTML 4.01 are: –  Cascading Style Sheets (CSS) are used for all form

styles –  Advanced features are now available, such as new

<form> elements and attributes, and <input> types for better control of validation and input control

•  Many of the new elements and attributes are not supported by most browsers, even the ones that support HTML5


Basic Tags for Creating Web Forms

•  The <form> tag creates a user-input Web form •  Attributes include:

–  method •  "get": not as secure, sends unencrypted text •  "post": encrypts, but can be easily broken

–  action •  Specifies the name and location of the CGI

script used to process the form •  Place the <input>, <select> and <textarea> tags

between <form> </form> tags to create form fields


Web Form Fields

•  User-input form fields include: –  Text box –  Radio button –  Check box –  Single-option select list –  Multiple-option select list –  Scrolling text area box –  Password field –  File upload button –  Submit and Reset buttons


Forms and the name Attribute

•  All form field elements share an attribute: name –  Identifies information you receive from a user

and associates it with a value you specify –  Helps organize user input


Text Boxes

•  Used to collect a single line of data from the user, such as name, e-mail or address information

•  Syntax:

<input type="text" name="FieldName"/>

•  You can enter default text to appear in the form:

<input type="text" name="FieldName" value="DefaultText"/>

In this example, "DefaultText" would appear in the user’s window


File Upload

•  Provides a Browse button and accompanying text box •  Users click the Browse button and navigate to the file

they want to upload •  The path to the file chosen by the user will appear in

the text box

Choose your file here: <input type="file" name="File"/>


Submit and Reset Buttons

•  Submit button –  Sends completed user information from Web form

to server •  Reset button

–  Clears all information entered into form fields, instead of submitting information to server

•  Every form needs a means to submit data <input type="submit"/> <input type="reset"/>


Radio Buttons

•  A group of two or more mutually exclusive options •  Never used as stand-alone items •  Example:

Do you know carpentry? <input type="radio" name="Carpentry" value="yes"/>

•  To present a preselected radio button, add the following attribute and value:

checked="checked"


Check Boxes

•  A group of non-exclusive choices •  Syntax:

<input type="checkbox" name="groupName"/>


Select Lists

•  Drop-down lists of predetermined options •  Created with the <select> tag •  Two types:

–  Single-option select list Multiple-option select list

•  To allow the user to select multiple options, add the multiple attribute in the <select> tag


Scrolling Text Area Box

•  Created by the <textarea> element •  Provides a scrolling text box into which a user can enter

a few sentences, an address, a letter, etc. •  Used to gather more than one line of text from the user •  Attributes include:

–  cols –  rows –  wrap

•  Text between <textarea> tags will appear to users as default text within the box


Web Forms, CAPTCHA and SEO

•  Use CAPTCHA to reduce spam submissions sent to your forms

•  Consider search engine optimization (SEO) issues when developing Web forms


Lesson 6 Summary

! Discuss the importance of CGI to Web forms ! Discuss HTML5 and Web forms !  Identify basic Web form tags ! Construct a Web form using Web form fields


Lesson 7: Video, Audio and

Image Techniques


Lesson 7 Objectives

•  Use the <video> element to embed video in Web pages •  Use the <audio> element to embed audio in Web pages •  Define graphic types •  Create client-side image maps •  Define image transparency •  Define image interlacing •  Use Web-based technologies to create animation •  Explore mobile device issues with animation and plug-ins •  Create and manage images


The <video> Element

•  Video elements and attributes:


The <video> Element (cont’d)

•  HTML5-compliant browser support for HTML5 video formats and codecs:


The <audio> Element

•  The <audio> element allows developers a standard method to embed audio into Web pages

•  The controls attribute identifies the default audio controls: play, pause, volume, etc.

•  Multiple sources can be identified with the <source> element to ensure various audio formats are supported


The <audio> Element (cont’d)

•  HTML5-compliant browser support for HTML5 audio formats:

•  Additional <audio> and <video> attributes:


Graphic Types

•  Vector –  Graphics that use mathematical coordinates with

lines, curves and shapes to create desired images and specify colors

•  Bitmap –  Graphics that use small dots (usually thousands) to

create an image and specify color –  Also known as raster graphics


Image Maps

•  An image that contains hyperlinked, clickable regions, sometimes called "hot spots"

•  Each hot spot is defined by a set of coordinates (indicating its position on the image) and a URL reference

•  Two types of image maps: –  Client-side (the most common) –  Server-side (rarely used)


Defining a Client-Side Image Map

•  Define a map, assign it a name, and provide hot-spot coordinates

•  Refer to the image map by map name: <map name="mapname"> <area shape="shape" coords="coordinates" href="url" alt="description"/> <area shape="shape" coords="coordinates" href="url" alt="description"/> <area shape="shape" coords="coordinates" href="url" alt="description"/> </map>

•  Associate the image file with the map: <img src="imagemap.gif" usemap="#mapname"/>


Defining a Rectangle Hot Spot

•  Any two points can define a rectangle •  Each point is represented by a horizontal (x) coordinate and

a vertical (y) coordinate •  Rectangles are defined by four coordinates representing

the upper-left and bottom-right corners of the rectangle

<area shape="rect" coords="x1,y1,x2,y2" href="url" alt="description"/>


Defining a Circle Hot Spot

•  Circles are defined by two coordinates and a radius

<area shape="circle" coords="x1,y1,radius" href="url " alt="description"/>

•  The pair of coordinates specifies the circle's center

•  A third number specifies the desired radius, or half-width, of the circle


Defining a Polygon Hot Spot

•  Defines an irregular area (neither a circle nor a rectangle)

•  Specify coordinates for each point that defines the polygon, from three to 100 pairs of coordinates

<area shape="poly" coords="x1,y1,x2,y2,...xn,yn" href="url " alt="description"/>


Image Transparency

•  Provides the visual effect of blending in to the background of the Web page

•  Most developers use image transparency to remove the blank image background so it appears to float on the page

•  Web-ready formats that support transparency: –  GIF 89a –  PNG


Image with No Transparency


Transparent PNG Image


Image Interlacing

•  Allows an image to progressively display in a browser while downloading

•  The image appears in stages during download (from top to bottom)

•  The top of a non-interlaced image will appear after the browser has read 50 percent of the image


Image Interlacing (cont'd)


Animation

•  Several images in a sequence, rendered in rapid succession to simulate motion

•  Made possible in several ways: –  Animated GIFs and PNGs

•  The animated image is actually a group of separate, sequenced images

–  Flash •  Scripts, called macros, that manipulate vector images •  Popular, but proprietary technology (Adobe) •  Requires a browser plug-in to view

–  Silverlight – Microsoft's answer to Flash –  Java applets – requires a Java interpreter to view –  Scalable Vector Graphics (SVG) – an open standard


Mobile Device Issues with Animation and Plug-Ins

•  As you create animated images, remember the following issues: –  Animation techniques are often proprietary –  Plug-ins drain system resources –  Animation may seem useful and interesting, but it is

frequently overused –  Animated images can limit accessibility


Creating and Managing Images

•  There are several options you can use to obtain and manage images for use on your Web pages: –  Create original images using image-creation

software –  Scan hard-copy images –  Use stock photographs –  Obtain photos from photo-sharing Web sites –  Use photo management software to organize,

edit and share your images •  Consider search engine optimization (SEO)

issues when creating and using images


Lesson 7 Summary

•  Use the <video> element to embed video in Web pages •  Use the <audio> element to embed audio in Web pages •  Define graphic types •  Create client-side image maps •  Define image transparency •  Define image interlacing •  Use Web-based technologies to create animation •  Explore mobile device issues with animation and plug-ins •  Create and manage images


Lesson 8: Extending HTML


Lesson 8 Objectives

•  Identify client-side and server-side scripting technologies •  Identify the benefits of Dynamic HTML (DHTML) •  Define the function of the Document Object Model (DOM) •  Define HTML5 APIs •  Use the HTML5 canvas API •  Use the HTML5 offline Web application API •  Use the HTML5 geolocation API •  Use the HTML5 drag-and-drop API •  Define Web application frameworks •  Connect Web pages to databases


Server-Side and Client-Side Languages

•  Programming concepts –  Not required knowledge, but essential terminology

is useful to understand •  Programming statements

–  if/then –  if/then/else –  do while –  do until –  break


Server-Side Languages

•  Attributes of server-side language: –  Code is executed by the Web server, not the Web browser –  Code executes because an interpreter has been installed

and activated on the Web server •  Server-side scripts are used for various purposes:

–  Browser detection –  Database connectivity –  Cookie creation and identification –  Logon scripts –  Hit counters –  File uploading and downloading


PHP Hypertext Preprocessor (PHP)

•  An interpreted server-side scripting language for creating dynamic Web pages

•  Embedded in HTML pages but usually executed on a Web server •  Example of PHP code:

<?php $envVars = array("HTTP_USER_AGENT"); foreach($envVars as $var) { print " <html><head><title>PHP CGI Example</title></head><body> <h1>Hello, World!</h1> Your user agent is:<strong>${$var}.</strong> <br/> </body></html> "; } ?>


Practical Extraction and Report Language (Perl)

•  Another server-interpreted language •  Older, but very popular •  Example of Perl code:

#!/usr/bin/perl use CGI qw/:all/; $cgi_object = CGI::new(); print "Content-type: text/html\n\n"; print "<html>\n<head>\n<title>\nPerl CGI Example\n</title>\n<body>\n<h1>Hello, World!</h1>\nYour user agent is: <b>\n"; print $cgi_object->user_agent(); print "</b>.</html>\n";


Active Server Pages (ASP) using VBScript

•  Microsoft’s original server-side scripting solution •  Example of ASP code using VBScript:

<%@ LANGUAGE=vbscript %> <html> <head> <title>ASP CGI Example</title> </head> <body> <h1>Hello, World!</h1> <% path = Request.ServerVariables("PATH_INFO") pagename = Request.ServerVariables("HTTP_HOST") method = Request.ServerVariables("REQUEST_METHOD") browser = Request.ServerVariables("HTTP_USER_AGENT") user = Request.ServerVariables("REMOTE_ADDR")


The C Language

•  A procedural programming language (relies upon subprograms to accomplish a task in an application)

•  C is a time-honored language, usually used to create stand-alone applications and operating systems (e.g., Linux/UNIX)

•  Can also be used for CGI •  Example of C code:

#include <stdio.h> int main() { printf("Hello, World!\n"); return 0; }

•  Note that this code includes a reference to a library called stdio.h


C++

•  Object-oriented programming language –  A style of programming that links data to the

processes that manipulate it –  May include procedural elements, but instead of

using subprograms to accomplish a task, will create an object that can then be manipulated throughout the program

–  Once an object is created, it can be reused •  Platform dependent:

–  Must be compiled to a specific computer type (e.g., IBM-compatible machines that run Windows)


Java

•  Object-oriented programming language •  Compiled •  Platform-independent

–  Marketing: Write once, run anywhere –  Reality: Write once, test everywhere

•  Java can be used to write: –  Stand-alone applications –  Servlets –  JavaServer Pages (JSP)


Visual Basic

•  A compiled programming language developed by Microsoft Corporation

•  Used for stand-alone applications and server-side Web applications

•  Once only procedural, now has object-based elements


C#

•  Pronounced "C sharp" •  Object-oriented programming language •  Compiled •  Platform-dependent


Server Side Includes (SSIs)

•  An instruction inside of an HTML page that directs the Web server to perform an action

•  An alternative to CGI •  SSI instructions are in SGML •  Can be used to:

–  Place the results of a database query into a page –  Execute other programs –  Indicate the last time a document was modified –  Insert footer text at the bottom of a page –  Add the current date as a timestamp to a page


Server Side Includes (SSIs) (cont'd)

•  Standard SSI file name extensions: –  .shtml –  .shtm

•  SSI support in Web servers –  Most Web servers include code that enables SSI –  However, the SSI feature may be disabled

•  You may have to activate the feature •  You may also have to define a MIME type


Client-Side Languages

•  Issues with client-side languages –  Some clients do not support JavaScript or any

other such scripting language –  Users can deactivate script execution in

browsers that normally support it


JavaScript

•  Object-based scripting language •  Adds interactivity to Web pages •  Can also be used on the server side (Server-Side JavaScript

[SSJS]) •  On the client side, can be used to:

–  Detect browsers –  Create cookies –  Create mouse rollovers

•  JavaScript advantages –  Platform-independent –  Vendor-neutral –  Relatively simple


JavaScript (cont'd)

•  Can be placed in an HTML document –  Use the <script> tag

•  Browser detection (using JavaScript or any other scripting technology) is useful for: –  Presenting different versions of a site to different

browsers –  Informing users in a corporate intranet to upgrade

their browsers to a supported version –  Ensuring accessibility to disabled users


JavaScript (cont'd)

•  JavaScript and cookies –  Cookies are stored on the hard drive –  Cookies can be used to:

•  Store passwords •  Store user preferences •  Choose which Web pages will be displayed

based on browser version


VBScript

•  Microsoft’s answer to JavaScript •  Can be used on the client side or the server side •  If used on the client side, only Internet Explorer

can render the script


Dynamic HTML (DHTML)

•  An enhancement that provides animation, interactivity and dynamic updates in pages

•  DHTML capabilities include: –  Automatic adjustment of font sizes and colors –  Absolute positioning –  New document content –  Granular control over animation, audio and

video


Document Object Model (DOM)

•  A vendor-neutral, cross-platform application programming interface (API)

•  Specifies how objects in a document can be referred to and manipulated through scripting languages

•  Describes the elements, or objects, within a document rendered by a user agent (e.g., Web browser)

•  A W3C standard


Document Object Model (DOM) (cont'd)

•  Accessing a browser's DOM –  Use a scripting language

•  JavaScript •  VBScript

–  DOM compliance •  The W3C has created a standard DOM

•  Choosing a DOM-compliant browser •  Undefined object error and the DOM •  HTML, the DOM and browser compatibility


HTML5 APIs

•  HTML5 APIs are the best examples of DHTML •  HTML5 APIs utilize multiple technologies to extend the

functionality of HTML : –  HTML5 –  Cascading Style Sheets (CSS) –  JavaScript access to the Document Object Model

(DOM) •  HTML5 APIs are used to create apps for mobile

devices, not just Web pages


Canvas

•  Provides a place on a Web page (a "canvas") where developers can display graphics, animation, video and games "on the fly" without the need for a plug-in

•  Draw objects on a canvas using JavaScript •  The canvas element is defined in HTML with the

<canvas></canvas> tag •  The canvas element has only two attributes: height and

width


Offline Web Application

•  Allows users to interact with Web sites when a network connection is unavailable

•  Web pages will store data locally within the user’s browser, utilizing the application cache

•  Utilizing a manifest, which tells the browser which files to store locally, is what allows the user to continue working without the connection


Geolocation

•  Used to locate a user’s geographical position •  Geolocation can:

–  Determine a user’s current position –  Monitor the user’s location –  Update any changes to that location

•  Geolocation displays the user’s information in a localized map


Drag-and-Drop Functionality

•  Allows a user to move an item from one place on the page to another by dragging it across the screen and dropping it in a different location

•  The drop zone is the place where dragged items can be placed

•  There are two kinds of drag-and-drop functionality: –  Dragging files from the user’s computer onto a Web

page –  Dragging items to a different location within the

same page


Web Application Frameworks

•  Web application framework – a set of software tools or code that is commonly used in the creation and management of online applications

•  Popular Web application frameworks: –  Django –  Ruby on Rails


Connecting to a Database

•  For a database to work, you must: –  Provide a way for the Web server and database to

recognize each other –  Provide permissions to the database so it can be

read and/or written to


CGI and Permissions

•  Aside from improper coding, CGI scripts usually fail to execute because: –  The Web server does not have the permissions to

execute files and scripts –  The file or script used has incorrect permissions,

which prohibits the server from executing the file


ISPs and CGI

•  If working with an Internet Service Provider (ISP), you generally need to: –  Request CGI services –  Request that the ISP:

•  Enables execute permissions on your scripts •  Creates a directory that contains available CGI

scripts •  Provides user names and passwords with

enough permissions to work the system


N-Tier Applications

•  When discussing databases, three elements are generally involved: –  Data

•  The database file or multiple database files –  Business logic

•  The SQL coding necessary to create relationships with the data stored in the database

–  Presentation •  The way that data and business logic are presented

on the user screen


N-Tier Applications (cont'd)

•  In n-tier, all three database elements are separated


Lesson 8 Summary

•  Identify client-side and server-side scripting technologies •  Identify the benefits of Dynamic HTML (DHTML) •  Define the function of the Document Object Model (DOM) •  Define HTML5 APIs •  Use the HTML5 canvas API •  Use the HTML5 offline Web application API •  Use the HTML5 geolocation API •  Use the HTML5 drag-and-drop API •  Define Web application frameworks •  Connect Web pages to databases


Lesson 9: GUI HTML Editors and

Mobile Web Sites


Lesson 9 Objectives

•  Identify types of GUI editors •  Identify specific features of GUI editors •  Create a Web page using a GUI editor •  Compare HTML text editors with GUI editors •  Preview and validate code for pages created with a GUI editor •  Identify requirements for publishing a Web site to a Web server •  Develop Web pages for mobile devices •  Compare mobile apps with mobile Web sites •  Convert a Web site for mobile users •  Use "Web 2.0" technologies to create Web pages


Introduction to GUI HTML Editors

•  Graphical user interface (GUI) HTML editor •  Automatically generates HTML code •  Developer inputs content as in a standard word

processor •  Also known as WYSIWYG (What You See Is

What You Get) editors


Types of GUI Editors

•  Page editors –  Allow you to create Web pages using your mouse and a

toolbar –  Page editor software include:

•  Virtual Mechanics WebDwarf •  Mozilla SeaMonkey

•  Site management editors –  Allow you to create Web pages and to manage sites –  Site management editor software include:

•  Adobe Dreamweaver •  Microsoft Expression Web


GUI HTML Editor Functionality

•  Features of GUI editors: –  Templates and wizards –  Text style options –  Icon bars –  Image insertion –  Hypertext link creation –  HTML importing –  Table creation –  Spelling check –  Publishing


W3C Authoring Tool Accessibility Guidelines

•  The guidelines mandate: –  The ability of the GUI editor to generate proper

code –  The usability of the GUI editor by a disabled

person creating a Web page •  Seven specific points


Creating Web Pages with a GUI Editor

•  Coursebook labs 9-1 through 9-7 will familiarize you with the toolbar, menus and functions of a GUI Web page editor, KompoZer


HTML Text Editors vs. GUI Editors

•  HTML text editors (e.g., Notepad, WordPad, Vi, Emacs) –  Easily include other code (e.g., JavaScript) –  Readily modify code –  Apply your HTML knowledge and skills

•  Drawbacks: –  Typing code is time-consuming –  People with disabilities may find manual entry

difficult or impossible –  Requires a higher degree of effort to create even a

simple page


HTML Text Editors vs. GUI Editors (cont’d)

•  GUI HTML editors –  Place code into files for you –  Allow you to modify your code manually

•  Drawbacks: –  May alter or ignore any code you enter

manually –  Rarely keep pace with the evolution of HTML

standards –  At the time of this writing, HTML5 was not

supported by any open-source GUI editors


Previewing Pages and Validating Code

•  Most GUI editors make it easy to: –  Preview pages in a browser –  View source code –  Validate code

•  Validating HTML code –  Specify the correct <!DOCTYPE> before validating;

the GUI HTML editor may not do this –  Many tools provide useful validation tools –  Some editors provide tools for disabled users


Web Site Publishing

•  GUI HTML editors usually provide a publishing feature •  FTP is the standard protocol for Web page publishing

–  Stand-alone FTP clients –  FTP client provided by GUI HTML editor


Publishing to a Test Web Server

•  Before publishing pages to a public site, post them to a test server –  Verify that CGI script works as expected –  Locate and repair dead links –  Allow stakeholders to preview the site

•  Test server configuration –  Test server must be identical to production server –  Use the same:

•  Operating system version •  Type and version of Web server software •  CGI interpreter software


Developing Web Pages for Mobile Devices

•  When you develop a Web site for viewing on mobile devices: –  Keep your Web pages simple and uncluttered –  Prioritize your content –  Optimize your site to a smaller screen size


Mobile Apps vs. Mobile Web Sites

•  Mobile apps – stand-alone applications that are downloaded from a vendor's software repository onto a mobile device –  Mobile apps are designed and built for specific

mobile operating systems •  Mobile Web sites – usually stripped-down versions of

traditional Web sites –  Mobile Web sites offer cross-platform usability;

mobile apps do not


Converting a Web site for Mobile Users

•  Many services are available to convert traditional sites to mobile sites

•  Most services support the major types of mobile operating systems used in smartphones and tablets

•  Ensure the service provides support for whatever mobile devices your customers will be using to access your site

•  Test your mobile Web site on as many mobile devices as possible

•  Validate your markup code to HTML5


Working with Web 2.0

•  Web 2.0 – changing trends in the use of WWW technology and Web design that led to the development of information-sharing and collaboration capabilities

•  Ajax – enables Web applications to interact with users in much the same way they do with desktop applications


Browsers as Application Delivery Platforms

•  Access to hosted applications and services on Web sites that enable you to perform computing tasks without the need to download and install any software

•  Cloud computing – a computing paradigm in which users are able to access software and services over the Internet instead of from their desktops

•  Software as a Service (SaaS): –  Another term for cloud computing –  The software cannot be downloaded or owned by the

end user –  The software becomes available as a service either for

free or for a fee


Browsers as Application Delivery Platforms (cont'd)

•  Advantages –  Flexibility –  Scalability –  Cost reduction

•  Disadvantages –  Connectivity –  Speed –  Lockout


Personalizing a Web Page with Third-Party Applications

•  The functionality and usability of your Web page can dramatically increase without the need for you to create programs

•  Adding such applications may slow page rendering speeds and can easily be overused

•  Example: Google Gadgets


Web Feeds

•  Web feed – a data format for delivering Web content that is updated frequently

•  Content syndication –  RSS (Really Simple Syndication, RDF Site

Summary or Rich Site Summary) –  Atom


Podcasts

•  Podcast – the use of audio or video digital-media files that are distributed through Web feeds to subscribed users –  Similar to an RSS feed –  Podcast files can be syndicated, subscribed to

and downloaded automatically


Lesson 9 Summary

•  Identify types of GUI editors •  Identify specific features of GUI editors •  Create a Web page using a GUI editor •  Compare HTML text editors with GUI editors •  Preview and validate code for pages created with a GUI editor •  Identify requirements for publishing a Web site to a Web server •  Develop Web pages for mobile devices •  Compare mobile apps with mobile Web sites •  Convert a Web site for mobile users •  Use advanced "Web 2.0" technologies to create Web pages


Lesson 10: Web Site Development

for Business


Lesson 10 Objectives

•  Develop a business Web site •  Discuss the three e-commerce models •  Identify the relationship between Internet marketing and search

engine optimization (SEO) •  Identify payment models used in e-commerce •  Identify issues related to working in a global environment •  Explore the relationship between databases and Web pages •  Discuss ways to optimize the impact of the Web page •  Identify Web page front-end design issues •  Identify file formats for use in Web pages •  Identify Web page back-end resource issues •  Calculate bandwidth and download time •  Name Web page files


Developing a Business Web Site

•  Web sites can serve as a business's primary means of advertising and marketing

•  Brand – a concept or collection of symbols associated with a product, service or person –  Should be simple –  Should be different –  Should be safe –  Should make a promise –  Should reflect the company's attributes –  Should reflect the company's personality –  Should appeal to the intended audience


Developing a Business Web Site (cont’d)

•  Customers do not read Web pages; they scan them •  Effectively designed pages:

–  Feature crisp, concise text –  Include one idea per paragraph –  Include search engine keywords in the main

portions of text –  Convey the central message using the inverted-

pyramid writing style


E-Commerce Considerations

•  There are three major e-commerce models that are widely implemented: –  Business to consumer (B2C) –  Business to business (B2B) –  Consumer to consumer (C2C)


Internet Marketing and Search Engine Optimization (SEO)

•  Marketing terms •  Internet marketing consists of:

–  Search engine optimization (SEO) –  Pay per click (PPC) –  Web analytics


Search Engine Optimization (SEO)

•  SEO improves the volume and quality of traffic to a Web site by structuring content to improve search engine ranking

•  An SEO expert must: –  Learn about and consider the factors that search

engines take into account as they rank sites –  Try to create and edit Web pages accordingly


Pay Per Click (PPC)

•  PPC – list your site high in search engine rankings by advertising on keywords that describe your product or service

•  You simply pay to have your page listed as highly as possible

•  Most Internet marketing campaigns combine SEO and PPC strategies


Web Analytics

•  Web analytic types: –  On-site analytics

•  Study visitor behavior once that visitor has accessed your site

–  Off-site analytics •  Identify the size of your market •  Identify competitors •  Determine your market penetration •  Conduct surveys •  Consult market research sources


E-Commerce Payment Technologies

•  Payment technologies include: –  Electronic Funds Transfer (EFT) –  Payment gateways –  3-D Secure


Secure Sockets Layer (SSL) / Transport Layer Security (TLS)

•  Not transaction methods •  Used to secure transactions through encryption •  Services provided:

–  Authentication –  Data confidentiality –  Data integrity


SSL/TLS and Public Key Infrastructure (PKI)

•  You need a certificate to enable host authentication before you can begin an SSL session

•  Public Key Infrastructure (PKI) – a collection of individuals, networks and computers that comprise the ability to authoritatively confirm the identity of a person, host or organization

•  PKI involves two elements: –  Digital certificate –  Certificate authority (CA)


Working in a Global Environment

•  By placing your business on the Web, you expand your audience to include anyone in the world with a browser and Internet access

•  Consider the level to which you will accommodate potential customers from countries outside yours –  Issues to consider include:

•  Currency differences •  International shipping •  Language concerns •  Relationship management


Databases and Web Pages

•  Databases can store information about company inventory

•  Databases can store customer information


Web Pages and CGI

•  CGI can be used to help Web pages pass information to and from databases

•  Examples of CGI technology include: –  Perl –  PHP Hypertext Preprocessor (PHP) –  Active Server Pages (ASP) and .NET –  JavaServer Pages (JSP) –  ColdFusion –  Python –  Django –  Ajax –  Ruby


Optimizing the Impact of the Web Page

•  SEO techniques are designed to get Web pages to conform to the expectations of search engine applications

•  Search engine companies consider: –  How many hyperlinks from other sites point to a page –  How informative a page is –  How well a page's code is structured –  How often the content on the page is updated

•  As you optimize pages for SEO, you should: –  Use properly validated HTML code –  Apply Cascading Style Sheets (CSS) –  Structure pages correctly


Front-End Issues

•  A Web page is an interface that should: –  Be accessible by all users –  Incorporate appealing images and graphical elements –  Include constantly updated hyperlinks –  Use tables wisely –  Present carefully designed Web forms –  Connect pages to databases securely –  Use the most current technologies appropriate for the

page –  Use images sparingly –  Be easily navigable and without dead ends –  Include alternative navigation links


Site Maps

•  Allow visitors to view a summary of your Web site's structure

•  A useful site map is the product of proper site planning •  Useful site maps include:

–  Topical hierarchy –  Aptly named site sections –  Search capability


Creative Design and Branding Standards

•  A Web page is often part of a larger marketing and sales strategy –  Creating and ensuring brand recognition (name

recognition) –  Presenting a strong message

•  A Web page allows you to develop: –  A market –  Mind share –  A brand


Creative Design and Branding Standards (cont'd)

•  Design and branding standards meetings focus on the following: –  Target markets –  Market messages –  Media choices –  Color combinations –  Sales strategies –  Technologies to use


Creative Design and Branding Standards (cont'd)

•  Audience development techniques include: –  Flash, Java –  Unique Web site features –  Company logos –  Strategies developed by sales and marketing –  Push and pull technologies –  Visitor tracking


Portals

•  A Web site that acts as a centralized access point for additional Web sites –  Portal types:

•  Vertical •  Horizontal

•  Portal benefits: –  Directs users to the best sites –  Attracts users to products –  Improves brand name


Wiki Site

•  A Web site that allows all visitors to collaborate in its construction –  Wiki software is installed on a Web server –  You can lock down certain pages and leave others open to

editing •  Most wiki pages are written in a simplified markup language

called LaTeX (www.latex-project.org) that accommodates the fast-paced nature of a wiki site

•  The word wiki is coined from the Hawaiian phrase "wiki wiki," which means "very quick"


Documenting Changes

•  Keep a written record of all changes to your Web site •  Documenting change allows you to:

–  Remember which changes have been made to the HTML code and/or pages on the site

–  Ensure that you publish all security updates to the Web server

–  Provide evidence of good-faith efforts to ensure accessibility

–  Verify that you have fulfilled requests from departments in your organization


File Formats and Active Content

•  Your pages will include various content formats, including PDF documents, images and media files

•  Common file formats and MIME types –  HTML: text/html –  JPEG: image/jpeg –  Cascading Style Sheets (CSS): text/css –  MPEG: audio/mpeg –  MP3: audio/mp3

•  Evaluating proprietary formats –  Difficulty/inconvenience –  Cost –  Audience limitation


Back-End Issues

•  Database connectivity –  Databases provide the ability to:

•  Present stored information to customers, and allow them to search and retrieve

•  Receive information from customers and save it for later retrieval

–  Types of databases •  Flat file •  Non-relational •  Relational •  Object-oriented

–  Web servers use relational databases to store data


Back-End Issues (cont’d)

•  Relational databases –  Store information in tables –  Can consist of a single file or can be distributed among

several database servers •  Structured Query Language (SQL)

–  Used to create and maintain professional, high-performance corporate databases

•  Database connection methods –  Open Database Connectivity (ODBC) –  Java Database Connectivity (JDBC)

•  Indexing and cataloging


Bandwidth and Download Time

•  Download time –  Factor in all files –  Consider typical connection speeds

•  Calculate download time for a Web page –  Check the size of the HTML file and all associated images,

files or programs –  Determine the speed of your network

connection –  Convert the connection speed and file

size to common units of measure (e.g., bytes or bits)

–  Divide file size by connection speed


Naming Web Page Files

•  Web servers search for default page names •  Default page names include:

–  index.html –  index.htm –  default.htm –  default.asp

•  Default page names can change from server to server –  Apache Server – usually index.html –  IIS – usually default.htm, default.html or index.html


HTTP 404 – File Not Found Error

•  Indicates that a user has requested a file that does not exist on the specified Web server –  Generated by the server –  Can be customized


Lesson 10 Summary

•  Develop a business Web site •  Discuss the three e-commerce models •  Identify the relationship between Internet marketing and search

engine optimization (SEO) •  Identify payment models used in e-commerce •  Identify issues related to working in a global environment •  Explore the relationship between databases and Web pages •  Discuss ways to optimize the impact of the Web page •  Identify Web page front-end design issues •  Identify file formats for use in Web pages •  Identify Web page back-end resource issues •  Calculate bandwidth and download time •  Name Web page files


Site Development Associate v2.0

!  Markup Language and Site Development Essentials !  HTML5 Coding !  Cascading Style Sheets (CSS) and Graphical Elements !  Hyperlinks !  HTML Tables !  Web Forms !  Video, Audio and Image Techniques !  Extending HTML !  GUI HTML Editors and Mobile Web Sites !  Web Site Development for Business

site development associate v2 - okaloosa schools...an initial web site plan • site plan is a rough...

Documents