Register a SA Forums Account here!
JOINING THE SA FORUMS WILL REMOVE THIS BIG AD, THE ANNOYING UNDERLINED ADS, AND STUPID INTERSTITIAL ADS!!!

You can: log in, read the tech support FAQ, or request your lost password. This dumb message (and those ads) will appear on every screen until you register! Get rid of this crap by registering your own SA Forums Account and joining roughly 150,000 Goons, for the one-time price of $9.95! We charge money because it costs us money per month for bills, and since we don't believe in showing ads to our users, we try to make the money back through forum registrations.
 
  • Post
  • Reply
Null of Undefined
Aug 4, 2010

I have used 41 of 300 characters allowed.

oot posted:

What all do I need to know in order to make a web page with a background, a frame in the center with text you can scroll through, and auto-playing music that browsers won't block automatically?

Please don't auto play music. No one wants it ever, regardless of the usecase.

Adbot
ADBOT LOVES YOU

Cugel the Clever
Apr 5, 2009
I LOVE AMERICA AND CAPITALISM DESPITE BEING POOR AS FUCK. I WILL NEVER RETIRE BUT HERE'S ANOTHER 200$ FOR UKRAINE, SLAVA

Thermopyle posted:

Given a tab (let's call it Tab A) containing multiple different links with target="wtf"...

If the user clicks one of those links Chrome on Android switches to a new tab (let's call it Tab B) and loads the link.

Without closing Tab B, the user can switch back to Tab A, click another link, and Chrome automatically switches to Tab B and loads that link.

Mobile Safari does all of that except the "automatically switches to Tab B" part. This means the user has no idea the link opened in the other tab.

Any thoughts about solutions or a different way to go about this?
Phone posting, but if a JS-only solution is acceptable, you can use window.open() to achieve this easily, with the caveat that the originating window and the target must have the same origin.

Assuming mobile Safari doesn't mishandle window.open(), too, of course.

spacebard
Jan 1, 2007

Football~

oot posted:

What all do I need to know in order to make a web page with a background, a frame in the center with text you can scroll through, and auto-playing music that browsers won't block automatically?

Present a modal with a button. Click butan, play lovely midi.

If they're on Safari, then you can play all the things you want after that first click :devil:
If they're on old Edge, then don't try to preload more than 125 audio elements at once. :eng99:

Null of Undefined posted:

Please don't auto play music. No one wants it ever, regardless of the usecase.

No one wants to play a game without ambient sound effects that aren't triggered by a specific mouse gesture?

There are use cases, and there was a better way to implement autoplay. Browser pops up a thing sort of like the Location API. It wouldn't be hideable, but a site could make a request to play "rich media". This would be sort of like above, but not a deviant gently caress you browsers work around.

oot
Jun 28, 2019

Vincent Valentine posted:

Well the first thing you're going to have to know is that everyone who visits that site hates it, and by extension you, for having autoplaying music.

But in reality not much. A couple of hours on pluralsight.com html5 courses should be enough for you to get by.

Null of Undefined posted:

Please don't auto play music. No one wants it ever, regardless of the usecase.

Well the music is part of the page's content. It's the same deal as Youtube autoplaying videos with sound by default. Nobody gets mad at that.

Volguus
Mar 3, 2009

oot posted:

Well the music is part of the page's content. It's the same deal as Youtube autoplaying videos with sound by default. Nobody gets mad at that.

Ughh ... yes we do. Actually, in my browser I have it setup that no video on any website automatically plays. Firefox has been quite nice with that in the last few releases, before we had addons to help with this (plus rules in ublock for those stubborn websites). And on mobile platforms I believe that browsers by default do not autoplay anything usually for battery and data savings reasons .

Autoplaying music on a web page is around there with eating puppies for breakfast in terms of evilness. Hitler+Trump+Putin+Kim+Mohammad level.

oot
Jun 28, 2019

What about autoplaying when a certain element gets focus, like by clicking into it? Is that possible and acceptable?

oot
Jun 28, 2019

And what about tane.us? It seems like that would have lost something without autoplay.

Nolgthorn
Jan 30, 2001

The pendulum of the mind alternates between sense and nonsense
I love it when websites autoplay something, everyone should do it all the time. I also like peanut butter smeared all over everywhere. Woo

The Dave
Sep 9, 2003

If you’re doing a webpage as like an art installation sure rules are a little different as to expectations.

Generally people hate autoplay but deal with it. Also I don’t know about audio but with video content if it autoplays it needs to have a pause button for accessibility.

oot
Jun 28, 2019

The Dave posted:

If you’re doing a webpage as like an art installation sure rules are a little different as to expectations.

Generally people hate autoplay but deal with it. Also I don’t know about audio but with video content if it autoplays it needs to have a pause button for accessibility.

Yeah it is basically gonna be an art installation and each page will be named after the song that plays. I was planning on having stop/pause and mute/unmute buttons too.

Bruegels Fuckbooks
Sep 14, 2004

Now, listen - I know the two of you are very different from each other in a lot of ways, but you have to understand that as far as Grandpa's concerned, you're both pieces of shit! Yeah. I can prove it mathematically.

Thermopyle posted:

Given a tab (let's call it Tab A) containing multiple different links with target="wtf"...

If the user clicks one of those links Chrome on Android switches to a new tab (let's call it Tab B) and loads the link.

Without closing Tab B, the user can switch back to Tab A, click another link, and Chrome automatically switches to Tab B and loads that link.

Mobile Safari does all of that except the "automatically switches to Tab B" part. This means the user has no idea the link opened in the other tab.

Any thoughts about solutions or a different way to go about this?
I'd check if you can call document.focus in the onload and see if it works in safari.

Tei
Feb 19, 2011
Probation
Can't post for 5 days!
Maybe give people the option to browse the art website with sound off. Many people browse from work or from a library and dont want to distract other people. Sometimes it happens that the volume of a computer is set to the max and you have 40 open tabs and you have in panic to find the one making the sound.

Art or not, the website owner dont control the experience. Is the visitor that control the experience, every time you force the visitor to do something is a big nono. Would you visit a website that automatically print something?

Ola
Jul 19, 2004

Tei posted:

Maybe give people the option to browse the art website with sound off. Many people browse from work or from a library and dont want to distract other people. Sometimes it happens that the volume of a computer is set to the max and you have 40 open tabs and you have in panic to find the one making the sound.

Art or not, the website owner dont control the experience. Is the visitor that control the experience, every time you force the visitor to do something is a big nono. Would you visit a website that automatically print something?

This. If your website is a success, it's going to be shared a lot on social media and lots of people are going to click it not knowing what to expect and get very annoyed. Include a stylish mute button that's easily visible and which is muted by default.

Cugel the Clever
Apr 5, 2009
I LOVE AMERICA AND CAPITALISM DESPITE BEING POOR AS FUCK. I WILL NEVER RETIRE BUT HERE'S ANOTHER 200$ FOR UKRAINE, SLAVA

Cugel the Clever posted:

Phone posting, but if a JS-only solution is acceptable, you can use window.open() to achieve this easily, with the caveat that the originating window and the target must have the same origin.

Assuming mobile Safari doesn't mishandle window.open(), too, of course.
To expand on this, MDN outlines things pretty well:
code:
var windowObjectReference = null; // global variable
var PreviousUrl; /* global variable which will store the
                    url currently in the secondary window */

function openRequestedSinglePopup(strUrl) {
  if(windowObjectReference == null || windowObjectReference.closed) {
    windowObjectReference = window.open(strUrl, "SingleSecondaryWindowName");
  } else if(PreviousUrl != strUrl) {
    windowObjectReference = window.open(strUrl, "SingleSecondaryWindowName");
    /* if the resource to load is different,
       then we load it in the already opened secondary window and then
       we bring such window back on top/in front of its parent window. */
    windowObjectReference.focus();
  } else {
    windowObjectReference.focus();
  };

  PreviousUrl = strUrl;
  /* explanation: we store the current url in order to compare url
     in the event of another call of this function. */
}
Not ideal and not viable for third-party links, but an option :shrug:

kedo
Nov 27, 2007

oot posted:

What all do I need to know in order to make a web page with a background, a frame in the center with text you can scroll through, and auto-playing music that browsers won't block automatically?

Everything about this is a bad idea. Internal scrollbars provide poor UX. Auto-playing music is poor UX.

Ditch the internal scrollbars. As for the music, you should at least warn people there's going to be audio before you send them to a page with it. It's pretty common to see "[icon] Headphones suggested" warnings followed by a "Continue" button on landing pages that are about to play audio.

oot
Jun 28, 2019

Tei posted:

Maybe give people the option to browse the art website with sound off. Many people browse from work or from a library and dont want to distract other people. Sometimes it happens that the volume of a computer is set to the max and you have 40 open tabs and you have in panic to find the one making the sound.

Art or not, the website owner dont control the experience. Is the visitor that control the experience, every time you force the visitor to do something is a big nono. Would you visit a website that automatically print something?

Ola posted:

This. If your website is a success, it's going to be shared a lot on social media and lots of people are going to click it not knowing what to expect and get very annoyed. Include a stylish mute button that's easily visible and which is muted by default.

I'm 100% on board with this except for having it muted by default rather than unmuted by default. I think if I did that a lot of people would never realize there was music, or if I made the unmute really attention grabbing it would be too distracting.

kedo posted:

Everything about this is a bad idea. Internal scrollbars provide poor UX. Auto-playing music is poor UX.

Ditch the internal scrollbars. As for the music, you should at least warn people there's going to be audio before you send them to a page with it. It's pretty common to see "[icon] Headphones suggested" warnings followed by a "Continue" button on landing pages that are about to play audio.

Well the internal scrollbars and frame is because I don't want the background to scroll. Is there a way to have the background always static even as the page itself scrolls? I think I've seen that somewhere.

sunaurus
Feb 13, 2012

Oh great, another bookah.

oot posted:

Is there a way to have the background always static even as the page itself scrolls? I think I've seen that somewhere.

background-attachment

Thermopyle
Jul 1, 2003

...the stupid are cocksure while the intelligent are full of doubt. —Bertrand Russell

Cugel the Clever posted:

Not ideal and not viable for third-party links, but an option :shrug:

Thanks for looking into this.

Unfortunately, this is for third-party links.

I think, I'm just going to detect mobile safari and use target="_blank" there. Kind of a subpar solution for Safari users, but its the best I can do while making client happy(ish).

RadiRoot
Feb 3, 2007

Don't use it, it can cause poor scroll performance and won't work for mobile. You'll need to add the background in a new div or pseudo element as position: fixed with the scrolling elements of the page as position: relative at a positive z-index.

sunaurus
Feb 13, 2012

Oh great, another bookah.

Radirot posted:

Don't use it, it can cause poor scroll performance and won't work for mobile. You'll need to add the background in a new div or pseudo element as position: fixed with the scrolling elements of the page as position: relative at a positive z-index.

Isn't this advice a bit outdated? Works fine on all mobile browsers I've tried.

Edit: Oh I guess it only partially works on iOS, cool

sunaurus fucked around with this message at 18:50 on Jul 25, 2019

The Merkinman
Apr 22, 2007

I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

oot posted:

I'm 100% on board with this except for having it muted by default rather than unmuted by default. I think if I did that a lot of people would never realize there was music, or if I made the unmute really attention grabbing it would be too distracting.


Well the internal scrollbars and frame is because I don't want the background to scroll. Is there a way to have the background always static even as the page itself scrolls? I think I've seen that somewhere.

If you feel having the music is so critical, what about the situation where people just don't have any sort of way to hear? I don't necessarily mean deaf, I just mean their device is on mute.
Would a sort of splash page be ok? "Hey the following page using music, maybe get some headphones for the best experience [OK]"

Cheen
Apr 17, 2005

Dadaist art rebels against usability

kedo
Nov 27, 2007

sunaurus posted:

Isn't this advice a bit outdated? Works fine on all mobile browsers I've tried.

Edit: Oh I guess it only partially works on iOS, cool

I suppose you could always just position: fixed; a 100vw/vh div with a background image as a workaround. The argument against fixed backgrounds is that they have a high repaint cost, but if the only other stuff that's on the page is some text and an autoplaying midi of the Final Fantasy 7 intro I doubt it'll matter much.

e:

Cheen posted:

Dadaist art rebels against usability

Tell that to Duchamp who famously made a sculpture you could both admire as a work of art and pee in. :colbert: If that's not excellent usability I don't know what is.

oot
Jun 28, 2019

The Merkinman posted:

If you feel having the music is so critical, what about the situation where people just don't have any sort of way to hear? I don't necessarily mean deaf, I just mean their device is on mute.
Would a sort of splash page be ok? "Hey the following page using music, maybe get some headphones for the best experience [OK]"

It's still possible to enjoy without sound but the sound is pretty important. To be completely honest, a splash page sounds like a nightmare. I think people will get the idea that there's sound by the fact that there's a speaker icon. Plus don't most browsers show when tabs are playing sound?

Null of Undefined
Aug 4, 2010

I have used 41 of 300 characters allowed.

oot posted:

It's still possible to enjoy without sound but the sound is pretty important. To be completely honest, a splash page sounds like a nightmare. I think people will get the idea that there's sound by the fact that there's a speaker icon. Plus don't most browsers show when tabs are playing sound?

At the end of the day it’s up to you just be aware that if you’re gonna swim upstream you have to be really good to make it work.

Thermopyle
Jul 1, 2003

...the stupid are cocksure while the intelligent are full of doubt. —Bertrand Russell

Null of Undefined posted:

At the end of the day it’s up to you just be aware that if you’re gonna swim upstream you have to be really good to make it work.

Yeah, I think this is the key takeaway.

oot, you'll just get a lot of pushback from web developers because web developers hear from clients over and over and over about how much they need autoplaying music/scrolling text/dancing babies.

That's not to say there is never a valid use for autoplaying music, it's just that 99% of people who think they need it are just caught up in their own bullshit and from our perspective we can't differentiate that 1% from the 99%.

Cheen
Apr 17, 2005

kedo posted:

I suppose you could always just position: fixed; a 100vw/vh div with a background image as a workaround. The argument against fixed backgrounds is that they have a high repaint cost, but if the only other stuff that's on the page is some text and an autoplaying midi of the Final Fantasy 7 intro I doubt it'll matter much.

e:


Tell that to Duchamp who famously made a sculpture you could both admire as a work of art and pee in. :colbert: If that's not excellent usability I don't know what is.

It would have been displayed too high to use properly

The Dave
Sep 9, 2003

I think this kind of model is acceptable for what you're trying to do: http://www.dilladimension.com/

Silent splash page that acts as a loader, gives keyboard shortcuts and provides more information where you can disclose what the site is. With a good call to action there could be expectation that video/audio is about to autoplay.

Null of Undefined
Aug 4, 2010

I have used 41 of 300 characters allowed.

The Dave posted:

I think this kind of model is acceptable for what you're trying to do: http://www.dilladimension.com/

Silent splash page that acts as a loader, gives keyboard shortcuts and provides more information where you can disclose what the site is. With a good call to action there could be expectation that video/audio is about to autoplay.

Yup this is a perfect example of how to warn users that the rest of the site requires sound.

McKilligan
May 13, 2007

Acey Deezy
So the last time I touched code was about 20 years ago in my high school webmastering class, and I'm pretty sure a lot of things have changed since then, so I'm starting out at practically zero.

I spent the last week or two making this mockup - What I want to make is this:


I like to make pixel art. I want the website to look like an old 90s RPG, and be a simple, intuitive way to quickly find the units you want, and generate a printable page for tabletop play. They're organized by type in the tabs on the left, you click the tab to expand the window which you could be able to drag wider/taller as needed. Click a unit from the tab to add it to the stage. Once on the stage they should be able to drag/move the unit around, but this serves no actual purpose except to arrange them aesthetically. When you've selected as many figures as you need, click 'Print' to generate a separate, blank printable page with the units you selected, double-sided and ready for tabletop play. Maybe at some point in the process have a scale option so that players can select slightly larger/smaller tokens as needed.

I want to have it look exactly like the image above - custom UI and all. I'm willing to contract the work out to someone who knows what the gently caress they're doing, since that will probably be easier than the hundred+ hours I'd need to invest to learn on my own, and I'd rather spend that time just making more dudes. But, if it's something relatively simple then I'm also willing to take a crack at it myself, since I'll have to know the code well enough to update the site.

So, would something like this be better handed to a professional, or could it reasonably be built in a decent timeframe by a novice? If so, what resources/code should I look at learning? Would this be something that is better suited to Flash, HTLM5, or some other code?

McKilligan fucked around with this message at 01:18 on Jul 26, 2019

Vincent Valentine
Feb 28, 2006

Murdertime

Drag and drop tech is notoriously frustrating even for experienced devs. Certainly doable, but frustrating

It's a tough call. Smart decision is to contract it out. Problem is, it's not only going to be expensive, it's going to be expensive to get new features added down the line if you can't do it yourself

What does your budget look like? Are you going to try to make a business out of this, or is it just for a hobby?

McKilligan
May 13, 2007

Acey Deezy

Vincent Valentine posted:

Drag and drop tech is notoriously frustrating even for experienced devs. Certainly doable, but frustrating

It's a tough call. Smart decision is to contract it out. Problem is, it's not only going to be expensive, it's going to be expensive to get new features added down the line if you can't do it yourself

What does your budget look like? Are you going to try to make a business out of this, or is it just for a hobby?

If drag and drop is too difficult, then just having it so that you click a unit and it appears in a predetermined location on the stage would also be fine - the ability to move them around is just window dressing and not essential to the function of the site.

As far as budget goes, I could put a couple hundred into it. It's mostly a hobby, but I'd definitely like to try to monetize the site. I'm planning to offer pretty much all of the models for free, but have options for palette swaps or alternate gear for most of the units available to supporters, as well as offer comissions. If the patreon part works out, I'd certainly be willing to split the proceeds.

If I wanted to tackle this on my own, what should I start looking at? HTML5? I used Dreamweaver like a decade ago and that seemed decent, no idea if it still is.

McKilligan fucked around with this message at 05:41 on Jul 26, 2019

Tei
Feb 19, 2011
Probation
Can't post for 5 days!
Theres a few javascript libraries to make games. These deal with resource loading, sound and sprites, they also give a good starting framework to build your game into, and working examples you can study.
Pixel beaty is a dificult subject in the web, is more a float point numbers universe than a integers universe. Sadly flash is completelly phased-out, was a great platform for web games.

Tei
Feb 19, 2011
Probation
Can't post for 5 days!
Javascript is a really bad programming language*. If you write a videogame with it, since in javascript theres 1000 ways to do everything, you can end building something with freaking hard to grasp bugs. It would be a good idea to limit yourself to a clear style that is easy to debug and that do things the same way every time.
The “module” pattern is possibly mandatory.

You must pay much more attention than if you where writing your game in java or c++.

Also, when theres 2 ways to do stuff, one can be 100 times slower. If parte of your code are critical, it would pay to test it.

Javascript execution is very fast, but frezze the whole browser process. Changes on the dom engine are super slow. You want small pieces of javascript executing in a event based way.
If you uses a game making library you will probably already write this style.

When javascript freeze the whole browser theres one thing that is not freezed: css animations, these continue playing.


* I love javascript, but holy smokes, is a minefield of problems that you will never seen until you step on them. The current idiom of the language (how people write javascript in 2019) draw a path through this minefield without stepping on the mines, but somebody writting code with a very different perspective is left alone to navigate the minefield.

Tei fucked around with this message at 07:45 on Jul 26, 2019

Thermopyle
Jul 1, 2003

...the stupid are cocksure while the intelligent are full of doubt. —Bertrand Russell

McKilligan posted:

As far as budget goes, I could put a couple hundred into it. It's mostly a hobby, but I'd definitely like to try to monetize the site. I'm planning to offer pretty much all of the models for free, but have options for palette swaps or alternate gear for most of the units available to supporters, as well as offer comissions. If the patreon part works out, I'd certainly be willing to split the proceeds.

You're not going to get anyone good to help with that low of a budget for any amount of worthwhile time. Also, good developers run screaming from promises to split future proceeds. It is a Thing That Is Known by developers that such things are dangerous.

If you really need help, you'll have to get someone thats excited on working on the project just because it's fun.

prom candy
Dec 16, 2005

Only I may dance

Thermopyle posted:

If you really need help, you'll have to get someone thats excited on working on the project just because it's fun.

Which again is difficult if you want someone good because it's not that hard if you're experienced to find a project that's fun and also pays a regular salary.

blaise rascal
May 16, 2012

"Duke, Duke, Duke, Duke of Pearl...."
Now that the design critique thread is archived, is there a place for people to review my dumb wordpress.com site?

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

blaise rascal posted:

Now that the design critique thread is archived, is there a place for people to review my dumb wordpress.com site?

The post below this one would probably do nicely....

Null of Undefined
Aug 4, 2010

I have used 41 of 300 characters allowed.

McKilligan posted:

If drag and drop is too difficult, then just having it so that you click a unit and it appears in a predetermined location on the stage would also be fine - the ability to move them around is just window dressing and not essential to the function of the site.

As far as budget goes, I could put a couple hundred into it. It's mostly a hobby, but I'd definitely like to try to monetize the site. I'm planning to offer pretty much all of the models for free, but have options for palette swaps or alternate gear for most of the units available to supporters, as well as offer comissions. If the patreon part works out, I'd certainly be willing to split the proceeds.

If I wanted to tackle this on my own, what should I start looking at? HTML5? I used Dreamweaver like a decade ago and that seemed decent, no idea if it still is.

For a couple hundred dollars you can get a couple hours of junior dev time. If it's a hobby your best bet is to learn yourself and just try to have fun.

Adbot
ADBOT LOVES YOU

blaise rascal
May 16, 2012

"Duke, Duke, Duke, Duke of Pearl...."

Lumpy posted:

The post below this one would probably do nicely....
Okay, here it is - website for a local coffee shop & restaurant. Do your worst.

https://collegehillcoffeecompany.wordpress.com/

Just curious, how much do y'all think a website like this is worth? (taking into account the fact that yes, it was built from a wordpress.com template by someone with no webdev knowledge, but the template was modified to fit the client's specifications in just about every way)

  • 1
  • 2
  • 3
  • 4
  • 5
  • Post
  • Reply