00:00
00:00
Newgrounds Background Image Theme

Jibrail just joined the crew!

We need you on the team, too.

Support Newgrounds and get tons of perks for just $2.99!

Create a Free Account and then..

Become a Supporter!

Psycho's Web Design Questions?

925 Views | 2 Replies
New Topic Respond to this Topic

Psycho's Web Design Questions? 2017-06-08 17:26:22


Hey everyone, it's me Psycho.

I've been trying to design a website lately, I'm...decent at HTML and CSS, and I've yet to learn Javascript--I figured I'd pick it up after I finish designing everything, and then I can make the layout look and perform even better.

I'm making this thread with the hopes that some people could help answer my questions on code along the way. You certainly don't have to, but any advice if much appreciated. I guess the current questions I have are:

1. Hypothetically, if the site was uploaded after it was completed, how/would I even be able to Moderate it similar to how the Newgrounds Staff does this site? The reason I ask is because I would like to update it on a pretty consistent basis to keep people in the know.

2. Kind of asking the same as the first question, but if I wanted to post videos on my website, specifically the home page for now, but I wanted to update the webpage with new videos and archive the new ones; How would I go about uploading that new video and replacing the old one on the webpage?

3. Is there a way to design the buttons (Play/Pause, Volume, etc.) and video time so that they fit the theme of the site better? Is this doable HTML, CSS, or Javascript? Kind of like the Youtube Video Buttons, or the buttons you would find on a Roosterteeth.com video.

4. How would one go about making an updated log for their website? Kind of like the Artist News here on Newgrounds, except for updates that only I can make?

5. I was hoping to do a design for my website where I have pixelated 'ropes' hanging from the the top of the webpage, all in the varying lengths. Would I be able to do something like this in HTML, CSS, and/or Javascript?

Those are the questions I have for now, sorry if they sound kinda dumb, or not in depth enough--I can try to elaborate more if I confused anyone. If anyone (or everyone) can help me out with these it'd be much appreciated!

Psycho's Web Design Questions?


Just call me Psycho for short.

Response to Psycho's Web Design Questions? 2017-06-09 02:39:26


At 6/8/17 10:55 PM, TheOverGhoul wrote:
Split what the site does into multiple .css .html and .js files so you can easily upgrade and mess around with certain parts of the site's code without making a mess out of everything and ending up trying to decipher spaghetti code.
Or did you mean "moderate" like lock threads and delete users? if that's the case, just make a .js file that gives you admin privileges.

Yup, I meant more like the locking threads and delete users abilities--although I may not be doing those things specifically, I just wanted to make sure there was a way no one else could Moderate my site except for me somehow. I'd hate to register and submit it and then find out I can't update it, or that other people can too. And that's interesting; Moderation and Administration abilities come from Javascript code. Does this mean I would have to separate JS files: One for Design functions, and the Second for Moderation functions? Or Would I put both of those on the same document each time for a new webpage?

Trigger a function to change the video into the most recent one at the time that you upload a new video, this could be done by comparing the date of the old video to the date of the new one, and if the old video doesn't match today's date, change the video source file to the new one for example :

if (vid.date != today){
vid.source = "files/videos/something.avi"
};

//Not very sure this would work... but i guess with some modifications it could!

I see! When I start learning the Syntax for JS in the near future I'll definitely test this out and play with it. I'll probably make a few test videos (or use really old ones I made) to try it out in JSFiddle. Also, just to make sure I understand, this code is for embedding original videos that you made and have yet to upload anywhere else? If so, then that's perfect, thank you!

Of course, this could be done using the HTML5 <video tag>
https://www.w3schools.com/tags/tag_video.asp
Also just to quickly point in case you don't know, to turn your html into HTML5, use this line at the top of the html file :

<!DOCTYPE html>

Thanks! Yeah, I'd prefer much cooler button layout than the generic one I see. I also want to get rid of the download option I see there every time, and maybe put something else.

I'd say using a javascript array would be a good thing to use to save your updates, throw the files into an array and whenever you want to publish a new update (With the admin privileges) trigger a javascript function to append a new value to your array.
This page explains how to use arrays :
https://www.w3schools.com/js/js_arrays.asp
And then to log them and make them visible, mess around also with js to make the .html file show these updates by creating new elements in the .html with certain values, such for example "log153.value = logs[most_recent_number]"

Whoa! Looks a little intimidating. I still don't know JS yet, but If I understand correctly, the 'log153.value' part of that code means there are 153 log entries that were made, while the '= logs[most_recent_number]' shows the latest log, but it also means that I could go back to later entries if I wanted to for whatever reason?

I'll definitely look more into this!

HTML and JS yes.
CSS? not very sure.
JS can be used for this by using the <canvas> element, HTML can directly do that with the <img> tag, just mess with the attributes a bit such as <img src="rope.gif" height = "150px" width = "100px">

TL;DR - Javascript is your friend.

I see. So with the <canvas> element in JS, I wouldn't have to use any images or gifs that I had to design beforehand in order to make that same effect I'm looking for? Kind of like the the fireworks effect in this example?

If so, I'm definitely up for doing as much code as needed in JS, I just don't want to use images, or gifs for this effect like I would have to in the HTML way.

At 6/8/17 11:53 PM, FireFoxxy wrote:
Most content on NewGrounds is generated by php as many of the functions are run on the server the site is hosted on. With that being said I believe that certain accounts have special privileges or rights to delete and change text. From a administrator standpoint he can do anything server related or related with the direct code itself. It would be a huge security risk to allow even mods access to server and database files so I assume Tom has special accounts on the website set in place.

I'm unfamiliar with php. By any chance, could I merge any potential code I do with that program in the future with the HTML, CSS and (later) JS code I would have? For the time being, I'll think I'll use JS for Moderation as the other generous person mentioned, but if php makes it 'easier' or provides more Moderation features, it could be worth learning in the future.

You can change the code directly or make a administrator/moderator/supervisor toolset for your webpage.

Correct me if I'm wrong, but I'm assuming that can be done in JS for my current situation right now? I believe the poster above always alluded to that.

Also thank you both very much @TheOverGhoul and @FireFoxxy
I don't usually ask for help on the forums or in general really, probably because I'm afraid of sounding stupid. But Your help means a lot to me!


Just call me Psycho for short.


At 6/8/17 05:26 PM, The-Psycho-Ragdoller wrote: 1. Hypothetically, if the site was uploaded after it was completed, how/would I even be able to Moderate it similar to how the Newgrounds Staff does this site? The reason I ask is because I would like to update it on a pretty consistent basis to keep people in the know.

For this you will need some sort of content management system (CMS). You can either roll your own if its something basic (or if you're feeling froggy) or you can go with an existing solution like django-cms.

The CMS is a program that runs on your server and generates the content on your site dynamically (as in, not from a static HTML file, but rather a running program that outputs HTML to the client). The server lets you log in as a privileged user through some sort of auth system which lets you control the content.

Alternatively you could implement something ghetto without resorting to server side scripts using HTTP auth, or just do it the old fashioned way and manually edit your html files directly over SSH or something. It's a lot easier to just get a proper CMS, though.

2. Kind of asking the same as the first question, but if I wanted to post videos on my website, specifically the home page for now, but I wanted to update the webpage with new videos and archive the new ones; How would I go about uploading that new video and replacing the old one on the webpage?

You can upload the video directly to your server in a streamable, low-filesize format (i.e compressed mp4) or to a video streaming site like youtube and embed the player widget in your page (using a 3rd party site like youtube to host your video will reduce load on your server significantly).

As far as updating the page goes, that's the CMS's job. Again, the CMS generates the HTML dynamically rather than it coming from a static file, so whatever HTML it sends back to people going to your site is dependent on what content it is set to display rather than being hard-coded into a flat file.

3. Is there a way to design the buttons (Play/Pause, Volume, etc.) and video time so that they fit the theme of the site better? Is this doable HTML, CSS, or Javascript? Kind of like the Youtube Video Buttons, or the buttons you would find on a Roosterteeth.com video.

Yes, you can make your own video player widget using HTML5/JS. You might want to consider using SVGs for the graphics as these are lightweight and scale better than traditional image formats.

4. How would one go about making an updated log for their website? Kind of like the Artist News here on Newgrounds, except for updates that only I can make?

That can be a feature of your CMS. If you're rolling your own you'll probably want to make some HTML templates for all the different pages that tell the CMS where to put things, and then the CMS will actually handle the rest in terms of populating the content. Y

ou can also make the entire site a single HTML page and have javascript on that page making AJAX requests in the background to retrieve content without the overhead of the UI in every request. This is known as a "single-page app" and has become an increasingly popular approach with the advent of HTML5.

5. I was hoping to do a design for my website where I have pixelated 'ropes' hanging from the the top of the webpage, all in the varying lengths. Would I be able to do something like this in HTML, CSS, and/or Javascript?

You will probably need HTML, CSS _and_ Javascript to do this.

Also I noticed several people in this thread are recommending that you use PHP. Please, don't use PHP. PHP is an objectively shitty language and its being rapidly phased out in favor of modern and well-designed languages like Python. If you're just getting started in web development, I strongly recommend going with Python instead. PHP is the COBOL of the web and the only reason NG runs on PHP is because it was built in a time when better alternatives weren't available and its too much work to recode everything in a modern platform (although I would personally still do it if it was up to me)

More information on why PHP sucks can be found here: https://eev.ee/blog/2012/04/09/php-a-fractal-of-bad-design/