ITEC 231 Final

Search Engine Optimization

- Determine keywords - Provide text navigation hyperlinks verify all hyperlinks work - Validate code

Best Practices

-Single column design -Limit scrolling to one direction -Use heading elements -Use lists -Avoid using tables -Provide labels for form controls -Avoid using pixel units in style sheets -Avoid absolute positioning in style sheets -Hide content that is not essential for mobile use

Audio element

<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>

Button

<button type="x">

Check Box

<input type="checkbox">

Image Element

<input type="image">

Password

<input type="password">

Radio Button

<input type="radio">

Reset Button

<input type="reset">

Submit Button

<input type="submit">

Text Box

<input type="x" name="x" id="x">

Image Gallery

<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>

Styling for Print

<link rel="stylesheet" href="flowerprint.css" type="text/css" media="print"> Hide non-essential content Example: #nav { display: none; } Configure font size and color for printing: Use pt font sizes, use dark text color Control page breaks Example: .newpage { page-break-before: always; } Print URLs for hyperlinks Example: #sidebar a:after { content: " (" attr(href) ") "; }

Viewport meta tag (width & scale for smart phones)

<meta name="viewport" content="width=device-width, initial-scale=1.0"> Default action for most mobile devices is to zoom out and scale the web page

Object element

<object type ="application/x-java-applet">

Options of a select list

<option value="x"> </option>

Param element

<param name="x" value="

Script Element

<script type="text/javascript"> </script> a container tag. In head or body section

Select list

<select>

Table Elements

<table> Contains the table <tr> Contains a table row  <td> Contains a table cell <caption> Configures a description of the table <th> table headings

Textarea

<textarea> -name -id -cols -rows

Video element

<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>

Choosing domain name

=Describe your business =Be brief, if possible -Avoid hyphens -TLD (top level domain name) -Brainstorm potential keywords -Avoid trademarked words or phrases -Know the territory (use Google!) -Verify Availability

jQuery

A JavaScript library intended to simplify client-side scripting

Search Engine Components: Database

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

Search Engine Components: Robot

A computer program that follows hyperlinks and "walks" the Web -- accessing and documenting web pages.

Co-Located

A computer that your organization has purchased and configured. Your organization effectively rents space at the web host provider's location. Your server is kept and connected to the Internet at their location. Your organization administers this computer. Needs: Large to Enterprise website

function

A function is a block of one or more JavaScript statements with a specific purpose, which can be run when needed. function showAlert(){ .. } call showAlert();

Fragment Identifiers

A ink to a part of a web page. Ex: 1. The element that identifies the named fragment of a web page. <div id="top"> 2. The anchor tag that inks to the named fragment of a web page. <a href="#top">

Events

Actions taken by the web page visitor

Custom Built Solution

Adobe Dreamweaver, Visual Studio.NET

Off-The-Shelf Shopping Cart Software Solution

Agoracart, osCommerce, ZenCart, Mercantec Softcart

Transform Property

Allows you to rotate, scale, skew, or move an element

Advantages of E-Commerce For Consumers

Convenience Easier Comparison Shopping Wider Selection of Goods

Development Process: Production

Create content construct site

Development Process: Design

Design the solution

Container

Designated by the file extension - contains the media and metadata

Embed element

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

Open page in a new window/tab

Ex: <a href="xxxxx.com" target="_blank"> xxxxx </a>

Media Queries

Example with link tag <link href="lighthousemobile.css" rel="stylesheet"  media="only all and (max-device-width: 480px)"> Example within CSS @media only all and (max-width: 768px) { } Determines the capability of the mobile device, such as screen resolution

Development Process: Maintenance

Fix and Enhance site

Development Process: Analysis

Gather Requirements

Development Process: Conceputalization

Identify Opportunity

3 Column Layout

Left-column navigation: float: left; width:150px;  Right-column content: float: right; width: 200px;  Center column: margin: 0 210px 0 160px; Footer: clear: both;

Risks For Business

Need for a robust, reliable web site Fraudulent transactions Customer reluctance to purchase online Increased competition

Semi-Custom Built Solutions on a Budget

Paypal order processing

Risk for Consumers

Possible Security Issues Possible Privacy Issues Purchasing from photos & descriptions Possible difficulty with returns

Development Process: Launch

Publish Web Site

Advantages of E-Commerce For Business

Reduced costs Increased Customer Satisfaction More Effective Data Management Potentially Higher Sales

Development Process: Evaluation

Review Site

Development Process: Testing

Test site

Usability testing

Testing how actual web page visitors use a website. -use paper and sketches (Early Testing) - Use prototype (Design Testing) - Use actual pages (production testing)

Codec

The algorithm used to compress the media

Dedicated Web Hosting

The exclusive use of a rented computer and connection to the Internet that is housed in the web hosting company's premises. Needs: Large to Enterprise website

Virtual Web 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. Needs: Small to Medium

Ready Event

Triggered when the browser has loaded the Document Object Model(DOM) for the web page $(document).ready(function() { Your JavaScript statements and other jQuery statements go here })

Instant Online Storefront Solution

Yahoo, Google, Shopify

Alert Message

alert("x"); used to get user attention

bg color

background color

Java Applet

byte code, used in HTML5

Client Side Processing

client-side scripts are embedded on the client's web page and processed on the client's internet browser. Client-side scripts are written in some type of scripting language like JavaScript and interact directly with the page's HTML elements like text boxes, buttons, list-boxes and tables.

form element

contains form elements

Prompt

displays a message and accepts a value from a user

Flexible box layout

flex-direction: specifies the direction of the flexible items flex-wrap: specifies whether the flexible items should wrap or not justify content: aligns the flexible container's items when the items do not use all available space on the main-axis flex: specifies the length of the item, relative to the rest of the flexible items inside the same container.

Server Side Processing

is used to interact with permanent storage like databases or files. Processing happens when a page is first requested and when pages are posted back to the server.

Javascript

object-based scripting language. -manipulates objects associated with a web page document

click

onclick

load

onload

mouseout

onmouseout

mouseover

onmouseover

submit

onsubmit

unload

onunload

Variable

placeholder for information, stored in ram var UserName; userName ="Karen";

colspan

spans columns <td colspan="a number">

rowspan

spans row <td rowspan="a number"

border attribute

table will be displayed with borders around the table cells <table border ="1">

Search Engine Components: Search form

the graphical user interface that allows a user to request a word or phrase to search for.