homy electronics mega storehomy.com.sa/homystore/website structure/homy... · lightbox is a...

Homy Electronics Mega Store

14

Website Structure v1.3.1

jQuery, API, JAVA & iFrame Informational, References, Products, Inquiry, Social

Medias, Newsletter and Promotion Sale

Site Structure Author: Alex Fortes (MTC Webmaster)

http://alexfortes.byethost7.com/

2 | P a g e

TABLE OF CONTENTS

Introduction of Structure ………………………………………………………………………… 3

Containing of Structure ………………………………………………………………………… 3

Website Objectives ………………………………………………………………………… 3

Website File Structure ………………………………………………………………………… 4

Page Header ………………………………………………………………………… 5

Home Page ………………………………………………………………………… 5

Product Page ………………………………………………………………………… 6

Product Inquiry Page ………………………………………………………………………… 7

Social Media Icon ………………………………………………………………………… 8

News and Event Page ………………………………………………………………………… 8

About Page ………………………………………………………………………… 9

Contact Us Page ………………………………………………………………………… 9

Privacy Policy Page ………………………………………………………………………… 10

Page Footer ………………………………………………………………………… 11

Lightbox and iFrame ………………………………………………………………………… 11

Displaying of iFrame ………………………………………………………………………… 12

Newsletter Subscription ………………………………………………………………………… 12

Search Engine Optimizer ………………………………………………………………………… 13

Search Engine Output ………………………………………………………………………… 13

Page File Navigation Wireframe ……………………………………………………………….. 14

Page Legends ………………………………………………………………………………… 14

HTML5 and JAVA Coding ………………………………………………………………………… 15

jQuery, CSS, API, and I Frame Coding ……………………………………………………… 15

META NAME, META TAGS, KEYWORDS and ROBOTXT Coding ……………………………. 16

Tools ………………………………………………………………………………………………….. 16

3 | P a g e

HOMY ELECTRONICS MEGA STORE WEBSITE CONTENT

Webmaster has design a new interface of Homy Electronics Mega Store website that can present a

good impression about the store and showroom, providing professional simply, elegant and dynamic

clean look, organized information and visitor friendly design. This structure is one of the creativity

designed of Webmaster by using HTML5 consist of API, jQuery, CSS, JAVA and iFrame

This structure represents company showroom profile and history, list of product categories, customer

services, products identity and technical services, sales and promotion, social media icon, latest

news and events that gather- in an easiest way for visitors such as customers and supplier.

This structure is containing the following:

Modern professional design with flash slider

Content organizing and styling

Contact Mailing

Sign up for sending newsletter.

Product Inquiry

Compatible with new browser update

Floating Social Media Icon with Homy Icon

Facebook like hit button

Static Visitors counter

API: application programming interface - In its simplest form, an object API is a prescription

of how objects work in a given object-oriented language – usually it is expressed as a set of

classes with an associated list of class methods. (Credit to Wikipedia)

iFrame: An <iframe> used for containing (X)HTML documents in other (X)HTML documents.

This enables updates of parts of a website while the user browses, without making them

reload the whole thing. (Credit to Wikipedia)

The main objectives of the Homy Electronics Mega Store website are:

To provide relevant and current information to a wide audience base on strategic objectives

are placing more emphasis on our wider audience, including company history, online

newsletter, business, sales and promotional and knowledge transfer and research

interests. The redesigned website now provides easily navigable channels for our wider

audience. The redesigning was a useful exercise in rationalize the information provided

online and created simple and, in some cases, more obvious routes to that information for

our all target audiences. The website team works with departments across the company to

ensure information is timely and relevant.

To emphasis all new products arrival, new prices, and promo sales.

Distinguish to the other store or showroom

To ensure information is provided in an accessible and usable manner

To promote and maintain the corporate image of the Company.

4 | P a g e

Homy Electronics Mega Store Site File Structure

KEYWORDS: This website structure should correspond with highly profitable keywords that

can bring targeted traffic and/or are often searched for, but still not so competitive as to make

a top ranking next to impossible.

ROBOTXT AND META TAGS & META NAME: are tags used in HTML or XHTML

documents to provide structured metadata about a Web page. They are part of a web page's

head section. Multiple Meta elements with different attributes can be used on the same page.

Meta elements can be used to specify page description, keywords and any other metadata

not provided through the other head elements and attributes.

UNDERSTANDING: This current team will benefit from careful, consistent, plain-language

site nomenclature.

FLEXIBILITY: This site has a name, everything can be found, styled, and programmatically

manipulated much more easily.

ACCESIBILITY: These site structures are more accessible to programmatic and style sheet

control across all media types and give flexibility in implementing universal accessibility

features.

SEO: Website provide careful site nomenclature or call makes it much easier to optimize a

site for search engine visibility.

PAGE RANKING: Google ranks every website it indexes and gives prominence to those who

rank higher.

5 | P a g e

HOMY ELECTRONICS MEGA STORE STRONG SITE STRUCTURE

Page Header with SEO (search engine optimization)

The header is the top rectangular shaped area that runs across the top of the web page design on your screen.

(See fig. 1)

Figure 1


Home Page with Facebook like button

The first page that appears upon opening a web browser program, which is also sometimes called the start page. (See fig. 2)

Figure 2

6 | P a g e


Products Page

Representing and displaying all products details and information. (See fig. 3)

Figure 3

7 | P a g e


Product Inquiry consist of API with JAVA (See fig. 4)

Figure 4

8 | P a g e


Dynamically Floating Social Media Icons with interaction link and altering text. (See fig. 5)

Figure 5


News and Events Page consisting of Lightbox, HTML5 and iFrame.

Lightbox is a JavaScript technique used to display images and other web content using modal dialogs where

the image is shown up center filling most of the screen, and the rest of the window is dimmed out. (See fig. 6)

Figure 6

9 | P a g e


About-Us Page consist of iFrame on “ReadMore” Button

iframes are particularly helpful when are using a third party website and you want your website visitors to

interact with it without leaving your website. (See fig. 7)

Figure 7


Contact-Us Page with e-mailing list and link direct in iGoogle Map

A contact form is a great way to offer your readers the ability to get in touch, without giving out your personal

email address. (See fig. 8)

Figure 8

10 | P a g e


Privacy Policy Page

To secure all content, details, information photos, logos and copyrights of this website. (See fig. 9)

Figure 9

11 | P a g e


Page Footer: languages selector both Arabic and UK English consist of Counter and Page Ranking

Web page footer contains information listed at the bottom of the page. The footer is also treated as its own

section of the Web page, separate from the header, content and sidebars. The footer is coded in either CSS

(Cascading Style Sheets) or HTML (Hypertext Markup Language). (See fig. 10)

Figure 10


Lightbox and iFrame Transitional in&out using mouse scroll. (See fig. 11)

Figure 11

12 | P a g e


iFrame consisting other website displayed by visual light. (See fig. 12)

Figure 12


Newsletter Subscription consist of API (Application Programming Interface). (See fig. 13)

Figure 13

13 | P a g e


Search Engine Optimizer active search box. (See fig. 14)

Figure 14


Search Engine Optimizer output indexing in Search Engine Builder V3.3 (See fig. 15)

Figure 15

14 | P a g e

HOMY ELECTRONICS MEGA STORE SITE LINK STRUCTURE CONTENT AREAS

Site Organization on the Web Server / Page File Navigation wireframe

This is how link will work to the other pages. (See fig. 15)

Figure 15

LEGENDS: (See fig. 16)

Home Page

Products page

Product Inquiry

page

News and Events

page

About us page

Contact page

Privacy Policy

page

Subscription

Newsletter

Outside Link

Various page link

Files Storage

15 | P a g e

HOMY ELECTRONICS MEGA STORE CODING STRUCTURE (HTML5 AND JAVA)

HTML5 and JAVA Coding Technique. (See fig. 17)

Figure 17

HOMY ELECTRONICS MEGA STORE CODING STRUCTURE

jQuery, CSS, API and iFrame Coding Technique. (See fig. 18)

Figure 18

16 | P a g e

HOMY ELECTRONICS MEGA STORE CODING STRUCTURE

META NAME, META TAGS, KEYWORDS and ROBOTXT Coding Technique

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Homy Electronics Mega Store | Saudi Appliances | Home Page</title>



<meta name="description" content="Homy Electronics Mega Store, Homy Online store, Saudi

Electronics, Homy Appliances, Homy Gas cooker, Homy Washing Machine, Homy LED TV, Homy

Water Cooler, Homy Water heater, Homy MTC Webmaster Alex Fortes" />

<meta name="keywords" content="The HOMY ELECTRONICS MEGA STORE is the ONE-STOP solution to all your household electronic needs with complete lines of air conditioners, home appliances, electronics and digital products suited to your every needs." /> <meta name="author" content="metatags generator Homy Template is a CSS template provided by Alex Fortes http://alexfortes.byethost7.com/

">

<meta name="robots" content="index, follow">

<meta name="revisit-after" content="3 days">

<title>Homy Electronics Mega Store | Homy Online store</title>



Software Tools:

Macromedia Dreamweaver 2004

PHP Editor

Adobe Photoshop CS4

CorelDraw12

Notepad

Microsoft Office Word 2013

Search Engine Builder Standard

Visual Lightbox Editor

MS Paint “for design drafting”

HTML/PHP Interpreter

AlexFortes 2014 (MTC Webmaster)

***************************************End of Structure***************************************

homy electronics mega storehomy.com.sa/homystore/website structure/homy... · lightbox is a...

Documents