• Welcome to TechPowerUp Forums, Guest! Please check out our forum guidelines for info related to our community.

is this even possible?

Msap14

New Member
Joined
Nov 11, 2008
Messages
156 (0.03/day)
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
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,818 (0.33/day)
Location
Latvia
System Name Personal \\ Work - HP EliteBook 840 G6
Processor 7700X \\ i7-8565U
Motherboard Asrock X670E PG Lightning
Cooling Noctua DH-15
Memory G.SKILL Trident Z5 RGB Black 32GB 6000MHz CL36 \\ 16GB DDR4-2400
Video Card(s) ASUS RoG Strix 1070 Ti \\ Intel UHD Graphics 620
Storage 2x KC3000 2TB, Samsung 970 EVO 512GB \\ OEM 256GB NVMe SSD
Display(s) BenQ XL2411Z \\ FullHD + 2x HP Z24i external screens via docking station
Case Fractal Design Define Arc Midi R2 with window
Audio Device(s) Realtek ALC1150 with Logitech Z533
Power Supply Corsair AX860i
Mouse Logitech G502
Keyboard Corsair K55 RGB PRO
Software Windows 11 \\ Windows 10
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.03/day)
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
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,106 (0.83/day)
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
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.03/day)
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
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.24/day)
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
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.01/day)
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)
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.14/day)
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
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

Freshwater Moderator
Staff member
Joined
Oct 6, 2004
Messages
58,413 (8.21/day)
Location
Oystralia
System Name Rainbow Sparkles (Power efficient, <350W gaming load)
Processor Ryzen R7 5800x3D (Undervolted, 4.45GHz all core)
Motherboard Asus x570-F (BIOS Modded)
Cooling Alphacool Apex UV - Alphacool Eisblock XPX Aurora + EK Quantum ARGB 3090 w/ active backplate
Memory 2x32GB DDR4 3600 Corsair Vengeance RGB @3866 C18-22-22-22-42 TRFC704 (1.4V Hynix MJR - SoC 1.15V)
Video Card(s) Galax RTX 3090 SG 24GB: Underclocked to 1700Mhz 0.750v (375W down to 250W))
Storage 2TB WD SN850 NVME + 1TB Sasmsung 970 Pro NVME + 1TB Intel 6000P NVME USB 3.2
Display(s) Phillips 32 32M1N5800A (4k144), LG 32" (4K60) | Gigabyte G32QC (2k165) | Phillips 328m6fjrmb (2K144)
Case Fractal Design R6
Audio Device(s) Logitech G560 | Corsair Void pro RGB |Blue Yeti mic
Power Supply Fractal Ion+ 2 860W (Platinum) (This thing is God-tier. Silent and TINY)
Mouse Logitech G Pro wireless + Steelseries Prisma XL
Keyboard Razer Huntsman TE ( Sexy white keycaps)
VR HMD Oculus Rift S + Quest 2
Software Windows 11 pro x64 (Yes, it's genuinely a good OS) OpenRGB - ditch the branded bloatware!
Benchmark Scores Nyooom.
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
26,259 (4.65/day)
Location
IA, USA
System Name BY-2021
Processor AMD Ryzen 7 5800X (65w eco profile)
Motherboard MSI B550 Gaming Plus
Cooling Scythe Mugen (rev 5)
Memory 2 x Kingston HyperX DDR4-3200 32 GiB
Video Card(s) AMD Radeon RX 7900 XT
Storage Samsung 980 Pro, Seagate Exos X20 TB 7200 RPM
Display(s) Nixeus NX-EDG274K (3840x2160@144 DP) + Samsung SyncMaster 906BW (1440x900@60 HDMI-DVI)
Case Coolermaster HAF 932 w/ USB 3.0 5.25" bay + USB 3.2 (A+C) 3.5" bay
Audio Device(s) Realtek ALC1150, Micca OriGen+
Power Supply Enermax Platimax 850w
Mouse Nixeus REVEL-X
Keyboard Tesoro Excalibur
Software Windows 10 Home 64-bit
Benchmark Scores Faster than the tortoise; slower than the hare.
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,583 (0.22/day)
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
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.24/day)
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
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
 
Top