• We've upgraded our forums. Please post any issues/requests in this thread.

is this even possible?

Msap14

New Member
Joined
Nov 11, 2008
Messages
156 (0.05/day)
Likes
10
Location
US
System Name Piece
Processor Ahtlon 2 X2 3GHz
Motherboard AsRock
Cooling Big sink and fan
Memory 4GB
Video Card(s) 9600
Storage three , don't remember what they are
Display(s) Asus 22" wide
Case Xigmatek
Power Supply a good one
#1
I am self taught with html, and have used that knowledge to build websites for others. I am trying to put together a website, whose design i have no seen before. To help me expalin this, think of a video game UI...

in the top left corner i want a box that will update with facebook status automatically, and in the top right I would like to put a ROUND google map surrounded by buttons for different store locations, and at the bottom have the nav bar with icons for each type of service. Of course, in the middle will be a content box which has overflow: scroll enabled. I want the background image to change every few seconds, the website to adjust itself to the screen resolution size of the user's computer, and the map, nav bar, facebook to stay in the right spot.

An attempt to summarize: video game ui website design with changing background images.

I am trying to think of where i need to start with this. I am thinking it will be heavy on java scripting (which i don't know how to code myself, ive always just looked up tutorials or used a pre made script) but i don't even know if this is even accomplishable.

so can i make this happen? or does it not seem possible?

 
Joined
May 19, 2009
Messages
1,088 (0.35/day)
Likes
232
Location
Latvia
System Name Personal \\ Work - HP EliteBook 840 G1
Processor i7-4790K \\ i7-4600U
Motherboard MSI Z97 Gaming 7
Cooling Intel stock for now
Memory Corsair Vengeance Pro 32GB 2400 MHz \\ 16GB DDR3-1600
Video Card(s) ASUS 290X DirectCU II OC \\ Intel 4400 HD
Storage Samsung 850 Pro 512GB, WD Black 2 TB \\ Micron 256GB SSD
Display(s) BenQ XL2411Z \\ FullHD + 2x HP ZR2440w external screens via docking station
Case Fractal Design Define Arc Midi R2 with window
Audio Device(s) Realtek ALC1150 with Logitech Z323
Power Supply Corsair AX860i
Software Windows 10
#2
Mmmm, i suck at it, yet i think with whole page made of Flash that should be possible. Will be heavy though.
 

Msap14

New Member
Joined
Nov 11, 2008
Messages
156 (0.05/day)
Likes
10
Location
US
System Name Piece
Processor Ahtlon 2 X2 3GHz
Motherboard AsRock
Cooling Big sink and fan
Memory 4GB
Video Card(s) 9600
Storage three , don't remember what they are
Display(s) Asus 22" wide
Case Xigmatek
Power Supply a good one
#3
Flash possible

I'm trying to also make it as search friendly as possible, so i would like to stear away from flash, but flash would for sure work.
 
Joined
Jun 2, 2007
Messages
5,105 (1.33/day)
Likes
1,249
Location
Kansas
Processor Core i5 3570K
Motherboard AsRock z77 Pro4
Cooling Zalman CNPS10X Extreme
Memory 2x4GB GSkill Sniper
Video Card(s) MSI GTX970 Gaming
Storage 240GB OCZ ARC 100, Samsung Spinpoint F3 1TB
Display(s) LG 23" 1920x1080
Case Antec P100
Audio Device(s) Onboard
Power Supply Antec Edge 750W
Software Windows 8.1 Pro 64
#4
Sounds like one of those irritating and overly busy looking sites that drive people bananas. You might go for a cleaner approach.
 

Msap14

New Member
Joined
Nov 11, 2008
Messages
156 (0.05/day)
Likes
10
Location
US
System Name Piece
Processor Ahtlon 2 X2 3GHz
Motherboard AsRock
Cooling Big sink and fan
Memory 4GB
Video Card(s) 9600
Storage three , don't remember what they are
Display(s) Asus 22" wide
Case Xigmatek
Power Supply a good one
#5
Sounds like one of those irritating and overly busy looking sites that drive people bananas. You might go for a cleaner approach.
yea, maybe... ill have to see how it looks if i can get it working.
 

xbonez

New Member
Joined
Nov 29, 2010
Messages
1,182 (0.46/day)
Likes
315
Location
Philly, PA (US)
System Name Winter
Processor AMD Phenom II x4 965 BE @ 4.0Ghz
Motherboard MSI 790FX-GD70
Cooling Corsair H50 Liquid Cooling
Memory 2 x 2Gb Gskill Ripjaws 1600Mhz (7-7-7-24@1.6V)
Video Card(s) Asus GTX 470 @ Stock (Zalman VF3000 cooler)
Storage 2 x Samsung Spinpoint F3 500GB (RAID 0)
Display(s) Hanns G 28" @ 1920x1200
Case Antec 1200
Audio Device(s) Onboard -- TosLink --> Z5500
Power Supply Corsair 850TX 850W PSU
Software Win 7 64-bit Ultimate
#6
I am self taught with html, and have used that knowledge to build websites for others. I am trying to put together a website, whose design i have no seen before. To help me expalin this, think of a video game UI...

An attempt to summarize: video game ui website design with changing background images.

I am trying to think of where i need to start with this. I am thinking it will be heavy on java scripting (which i don't know how to code myself, ive always just looked up tutorials or used a pre made script) but i don't even know if this is even accomplishable.

so can i make this happen? or does it not seem possible?

http://www.exactcomputerrepair.com/dermotts.jpg

Don't go all flash. Your website would be a resource hog, slow down people's browsers and kill little baby seals.

in the top left corner i want a box that will update with facebook status automatically, and in the top right I would like to put a ROUND google map surrounded by buttons for different store locations, and at the bottom have the nav bar with icons for each type of service. Of course, in the middle will be a content box which has overflow: scroll enabled. I want the background image to change every few seconds, the website to adjust itself to the screen resolution size of the user's computer, and the map, nav bar, facebook to stay in the right spot.
You can get the FB status box. Look into FB Like Box.
Similarly, look into the Google Maps Javascript API for the GMaps widget. I have veyr little experience with that.

For the nav bar at the bottom, one way to do it is to have an empty <div> which is used as a spacer to ensure no matter how big the main content div is, the footer stays at the bottom.
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

To ensure the FB and GMap boxes stay at the edges etc, this is how I do it.
Have a javascript function that returns the height and width of the user's browser. Call it using the onload attribute of the body tage.

Code:
<body id="Body" class="body" onload="browserSize()">
</body>
Size the <body> of the page according to the results returned.
Size all divs within the body as percentages. When a percentage is supplied as the size of a div, it will be a percentage of the first parent that has a specific size supplied, in your case, it will be the body which is sized to the browser's resolution.

EDIT
As an alternative to your above design, one thing web designers sometimes do, is develop your site for 1024x768. Very, very rarely do people have resolutions lower than that. For resolutions larger than that, you just get empty spaces on the left and right. It doesn't look bad at all...gives the site a very simplistic and streamlined look. Imdb.com does that.
 

IlluminAce

New Member
Joined
Aug 6, 2011
Messages
46 (0.02/day)
Likes
40
Location
UK
System Name Ace2
Processor Intel i7 2600
Motherboard ASRock Extreme4 Gen3
Cooling Zalman CNPS10x Extreme
Memory Corsair Vengeance LP 16GB (4x4)
Video Card(s) Asus HD 6970 DirectCUII
Storage 4x Samsung 1TB 7.2krpm
Display(s) 1x 24" 16:10, 1x 20" 16:10, 3x 19" 5:4
Case Fractal Design R3
Audio Device(s) TBD
Power Supply Corsair HX850W
Software Debian dom0 (on Xen hypervisor)
#7
All the above is accomplishable with the standard trio of HTML, CSS and JS. To echo the thoughts of xbonez, do not use Flash. There are too many reasons to mention as to why that would be a terrible idea. Rule of thumb: only use Flash where you absolutely need to use Flash, and even then restrict its use to the smallest section of content possible. Never, under any circumstance, design the main components of your site in Flash, let alone the whole thing.

Finally, be careful with the changing background. That could be terribly annoying for end users - to make that bearable, you'd want to use smooth transitions, keep a reasonably long time gap between changes, and ensure the images don't contrast too much. Even so, for those with very large resolutions, poor onboard graphics, and slow CPUs, ... personally I'd push back against that requirement.
 
Joined
Nov 8, 2008
Messages
779 (0.23/day)
Likes
77
Location
Sydney, Australia
System Name Gearbox || Server
Processor i5 3570K @ 4.0Ghz || E8400 @ Stock 3Ghz
Motherboard Gigabyte Z68XP-UD3 || Gigabyte EP41-UD3L
Cooling Stock || Stock
Memory 8GB G.Skill RipjawX DDR3 @ 1600mhz || 4GB Kingston Value DDR2 800Mhz
Video Card(s) ASUS R9 270X Direct CU II TOP @ 1120/1500 || N/A
Storage Samsung 840 EVO 250GB || 1TB WD Green, 2TB WD Green, 3TB WD Red
Display(s) HP x23 LED 23" Full HD Panel
Case Corsair 200R || Open-Air
Audio Device(s) Audioengine D1 + Logitech Z623/Audio Technica ATH-M50 || N/A
Power Supply Antec EarthWatts Platinum 650 W || Antec Neo Eco 450 W
Software Windows 8.1 Update 3 Pro 64 || Ubuntu Server 14.04 64
#8
Don't go all flash. Your website would be a resource hog, slow down people's browsers and kill little baby seals.
Sigged'

But back on topic. Could you incorporate (just throwing it out there) a moving .gif image for the background with the images already in there? Also for the Facebook you would have to set it to reset at a certain interval, not when new posts appear. I believe you can do this through java script by updating the Facebook app every whatever seconds/minutes. Unfortunately I'm not a web coder but i can only suggest logical ideas from a desktop programmers POV. Could you use a more powerful language? vb .net sounds like a suitable option as it is easy to pickup :D
 

Mussels

Moderprator
Staff member
Joined
Oct 6, 2004
Messages
46,119 (9.57/day)
Likes
13,547
Location
Australalalalalaia.
System Name Daddy Long Legs
Processor Ryzen R7 1700, 3.9GHz 1.375v
Motherboard MSI X370 Gaming PRO carbon
Cooling Fractal Celsius S24 (Silent fans, meh pump)
Memory 16GB 2133 generic @ 2800
Video Card(s) MSI GTX 1080 Gaming X (BIOS modded to Gaming Z - faster and solved black screen bugs!)
Storage 1TB Intel SSD Pro 6000p (60TB USB3 storage)
Display(s) Samsung 4K 40" HDTV (UA40KU6000WXXY) / 27" Qnix 2K 110Hz
Case Fractal Design R5. So much room, so quiet...
Audio Device(s) Pioneer VSX-519V + Yamaha YHT-270 / sennheiser HD595/518 + bob marley zion's
Power Supply Corsair HX 750i (Platinum, fan off til 300W)
Mouse Logitech G403 + KKmoon desk-sized mousepad
Keyboard Corsair K65 Rapidfire
Software Windows 10 pro x64 (all systems)
Benchmark Scores Laptops: i7-4510U + 840M 2GB (touchscreen) 275GB SSD + 16GB i7-2630QM + GT 540M + 8GB
#9
this aint my thing, but i can honestly tell you websites like this will be bandwidth heavy, and complex. you'll have to test it out on every browser out there because some of them will not like whatever method you end up using.

(thats not counting the whole tablet/phone market as well, which will complicate things)
 

FordGT90Concept

"I go fast!1!11!1!"
Joined
Oct 13, 2008
Messages
20,921 (6.24/day)
Likes
10,022
Location
IA, USA
System Name BY-2015
Processor Intel Core i7-6700K (4 x 4.00 GHz) w/ HT and Turbo on
Motherboard MSI Z170A GAMING M7
Cooling Scythe Kotetsu
Memory 2 x Kingston HyperX DDR4-2133 8 GiB
Video Card(s) PowerColor PCS+ 390 8 GiB DVI + HDMI
Storage Crucial MX300 275 GB, Seagate 6 TB 7200 RPM
Display(s) Samsung SyncMaster T240 24" LCD (1920x1200 HDMI) + Samsung SyncMaster 906BW 19" LCD (1440x900 DVI)
Case Coolermaster HAF 932 w/ USB 3.0 5.25" bay
Audio Device(s) Realtek Onboard, Micca OriGen+
Power Supply Enermax Platimax 850w
Mouse SteelSeries Sensei RAW
Keyboard Tesoro Excalibur
Software Windows 10 Pro 64-bit
Benchmark Scores Faster than the tortoise; slower than the hare.
#10
I think I would use Silverlight to accomplish all that. It would work so long as Silverlight has somewhere to pull the Facebook and Google Maps data from. Hell, you might be able to use some Bing Maps module Microsoft already has released.

You'd have to make a basic version of it for users who have scripting disabled.
 
Joined
Sep 15, 2004
Messages
1,561 (0.32/day)
Likes
207
Location
Poland,Slask
System Name HAL
Processor Core i5 2500K
Motherboard Asus P8P67 Pro Rev3.1
Cooling stock
Memory 2x4GB Kingston 1600Mhz Blu
Video Card(s) Asus 560Ti DirectCuII TOP
Storage Kingston 120 3K SSD,WD Black WD1502FAEX
Display(s) LG 1440x900
Case Chieftec Mesh Midi
Audio Device(s) onboard
Power Supply Corsair TX750V2
Software w8
#11
Theres just one huge problem with Silverlight and we all know what it is.
 

xbonez

New Member
Joined
Nov 29, 2010
Messages
1,182 (0.46/day)
Likes
315
Location
Philly, PA (US)
System Name Winter
Processor AMD Phenom II x4 965 BE @ 4.0Ghz
Motherboard MSI 790FX-GD70
Cooling Corsair H50 Liquid Cooling
Memory 2 x 2Gb Gskill Ripjaws 1600Mhz (7-7-7-24@1.6V)
Video Card(s) Asus GTX 470 @ Stock (Zalman VF3000 cooler)
Storage 2 x Samsung Spinpoint F3 500GB (RAID 0)
Display(s) Hanns G 28" @ 1920x1200
Case Antec 1200
Audio Device(s) Onboard -- TosLink --> Z5500
Power Supply Corsair 850TX 850W PSU
Software Win 7 64-bit Ultimate
#12
I honestly would not recommend you to look at anything beyond HTML/CSS/JS for the frontt end. Everything u need done can be achieved by those three. They are light, standard and carry across browsers pretty well. Also, most mobile browsers will render the page as well.

For the back end, its really up to you whether you want PHP, ASP.NET or something else