       |
Introduction: The main objective of this project is to bring the religious image of mosque in the website's form. The secondary goal of this project is to expose to the user(s), the potential customer(s) and the stakeholder(s) the programmer’s capability of understanding complexity, coding-quality and his technical-expertise, so he can attract future opportunities that require same kind of initiative, creativity, dedication, reliabilities, completeness, detailed-orientation, and personal qualities. The design:The goal is to create a website that resembles an orbs-like image (or crystal glass or glassy spherical and bottle-within-bottle look) which appear as a mosque's window to the world. The idea of this website is being developed through collaboration, research, and creative effort that combine hystorical, spiritual, technical and social aspects of our society, and at the same time utilizing contemporary technologies such as graphic animation, adobe phtoshops images, transparent-colors, lights effects etc., real time user interaction and animation, and perfect coordination among animated-components. The Structure: |
Background:
The background description and detail:
Background contain three parts. The First layer or body background contains circular design pattern wall that remain visible all the time for entire website from top to bottom. The body background also exposes gradient colors from dark black to lighter (toward greyish white) and is transparent. The width and height of this background is equal to 100% size of the user’s screen’s width and heights.
The second background of the website resembles mosque’s dome and arc structure with its body. The main body of the arc embeds five arcs within giving bottle within bottle effect that are transparent and visible. There are at least five arcs that are separate from each other by opacity of the layers, and this set of arcs is separated from the main body background by color and opacity. This background also contains light effect using gradient background sheet. The color change from bright to darker or vice versa on mouse over and mouse out movements. The maximum width of this website is 800 pixels and the height is 1100 pixels which is sufficient to fit an ordinary desktop monitor screen and eliminate the need to scroll up and down to see a complete view.
The third background component is top cover that provides light effect that changes on mouse over and out. Which is not only transparent but also provide a blurry effect around the background of the website. The body cover is also mouse sensitive to each pixel of the website interface, for example, menu and submenu items are identified by a separate function to show messages to users.
Circular Main menu:
The feature for main menu contains:
1) Circular Background.
2) Sets of coloured spheres (orbs).
3) Alternating Circular design containing Main menu items.
4) Clock and its dial.
5) Top Cover (with spherical movement).
6) Menu Description (pop ups)
Circular Background:
The circular background provide brightness to this portion’s elements through its metallic gradient that is a circular layer. It is a 380 px by 380 px circular layer located at the bottom( as first layer) not clearly visible to the users. The purpose to this layer is to provide light support to the foreground components that sits upon it.
Sets of coloured spheres (orbs):
There are two sets of circular and transparent orb like sets of spheres that alternate periodically. The first forms a 90 degree direction and the other 45 degree direction. They both alternate in perfect coordination forming a circular motion illusion. Each set contain six spheres and there are fourteen sets that display different colors, images, lights, blurs, glow, opacity, transparency, etc. All sphere maintains spherical orb and glassy look image all the time. All spheres and orbs were created using Photoshop software, HTML filter options, css and JavaScript language DHTML capabilities. The Coordination between sets of spheres intervals and physical arrangement is achieved using java script’s time and recursive function codes. More than two sets illuminate on the screen at the same time filling the entire portion of the circles and making the screen active all the time. Each sets turns on and turns off alternatively and together in good coordination. The animation of the sphere alternating behaviour gives sufficient time interval to keep object visible on the screen, and same time span is given to each iterating set regularly. The shadow and the glow of spheres are created using html filter command that portrait a mirror or glassy image.
Alternating Circular design containing Main menu items:
Two alternating sets of circles on the top of sphere movement, the first appears in 90 degree direction and the second 45 degree, visible through a light black stroke, appear in perfect coordination. Forming a resemblance of a lotus flower’s petals. The two sets of petals alternate periodically, animating an overall revolving and circular motion in constant orbit. At the same time the central circles of each set displays a six revolving petals that move in clockwise direction. Each petal contains a menu item name to displays a new pop-up menu description upon mouse over. As the set of circle alternate the petal items move in circular direction generating an illusion of an orbit of menu items around the central point. Each item revolves in circles sequentially generating an illusion constant of circular motion within a motions.
Top Cover (with spherical movement):
Top cover of Circular display has two properties: one it contains transparent watch like cover and second it displays revolving motion of outer sphere through moving text ‘This Mosque’ or ‘Mosque name‘ moving text from right to left. This layer’s color and transparency can be changed to darker or brighter as per needed. This top layers completes this portion of the website producing an effect of multiple circular motions within circular movements that are performing several function simultaneously in excellent coordination.
Menu Description (Mouseover pop ups):
Clock and its dial:
A set of visible clock’s hands traversing a circular path parallel to a clock dial displaying an active clock image on the screen. This third layer that display a real clock and giving accurate clock functionality and it motion. Each movement of the clock’s hands are achieved getting computer clock time( second, hour, minute, day, month, year) using JavaScript language. The clock’s hands and dial are copied from internet sites and perfected using Photoshop. More than one hundred forty six files are created for seconds, minutes and hours hands that contain different direction of clock’s hands movements around the circles. At this time it is necessary to mention that all the animated functions (1) spherical movement (2) circular movement (3) petal item circular motion and alternating behaviour (4) clock function (second, minute, hours) (5) mouseover over capabilities (pixel monitoring) light on off, etc., are done simultaneously and continuously in perfect coordination. Plus the program responds to all menus and submenus choices instantly and flawlessly. At the same time the program is capable of handling mission critical input output flawlessly.
The central circle of each group contains six petals. Each petal contains one menu items that changes six time in perfect coordination that makes each item orbits the center of the circle repeatedly and in perfect sequence, this generates an illusion of a constant circular motion around its central point. Upon mouse over on any item’s name there pops up a description of menu or sheet. This happens for all items and all the times in the same manner . Each emerging menu background resembles the website background, for example, it contains five transparent mosque arcs layers, and each layer contains within the other layers plus a sheet of content is embedded between menu layers explaining menu description. This page also contains two elliptical spherical button showing topic and exit sign.
