I would like visitors to be able to download my music files, rather than have those files automatically open in their browsers' players, but I don't know how.
I have read that HTML5's download attribute is made for this, but I can't get it to work.
My site's DTD is HTML 4.01 Strict -- would that be affecting it?
The relevant markup is:
<ul>
<li>Test.wav</li>
</ul>
How can I get the audio files to download instead of playing them directly in the browser?
UPDATE:
Some stackoverflow members are trying to educate me as to how this site works. They believe that one of my subsequent discoveries (posted below) isn't an answer to the above question. In my opinion it goes deeper than an answer, because it proved that my question wasn't valid. Here's what I wrote:
Thanks to Sql Surfer and Developer90 for your help.
It turns out that the problem was me: I hadn't realized that, in order for the HTML 5 "download" attribute to work, my files had to be online! I had been testing them via local files on my own desktop!
Once uploaded, "download" did everything it was supposed to do.
As I commented (above), testing showed me that "download" works in files that are HTML 5 doctype as well as those that are HTML 4.01 (strict) doctype.
My apologies for inconveniencing you!
It depends on the browser the user is. As you said, you can add the download attr in the <a></a> html tag like this:
<ul>
<li><a href="Test.wav" download="Test.wav" download>Test.wav</a></li>
</ul>
What you may can use is the target attr. But this is to open a new tab. Example:
<ul>
<li>Test.wav</li>
</ul>
It must be the html4 that is affecting it.
2 Ideas:
A: Keep html 4.01 and use javascript to affect the
"Content-disposition".
B: Use the <!DOCTYPE html> to force html 5
As Devloper90 points out the target tag is relevant. Having no target tag is probably what you want.
Related
I am working with a legacy site that grabs some XML content via AJAX, constructs a block of HTML code with it, and then appends it to a blank div. The XML makes heavy use of Arabic text.
It seems to work fine in all browsers except Chrome. In Chrome, page loading will die at the point of appending the string to the div. When I remove the Arabic text from the XML, the page loads just fine.
The HTML being generated has the following meta tag:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
and the XML has this encoding tag:
<?xml version="1.0" encoding="UTF-8"?>
Here is a sample of the XML that is being passed:
<segment>
<content>السَّلامُ عَلَيْكُم.</content>
<linked>true</linked>
<glossWord>السَّلامُ عَلَيْكُم</glossWord>
<glossTrans>Hello. (Literally "Peace be upon you").</glossTrans>
<glossExpl>This is a very commonly used greeting. It works for any time of the the day. It can also be used to mean 'goodbye'.</glossExpl>
</segment>
Interesting tidbit, when I went to create this question in Chrome, pasting the above into the form ALSO broke Chrome, and the browser froze solid. I had to reopen and submit it in Firefox. If this is a bug in Chrome it would be nice to be able to find a way to work around it, as I don't really like the idea of telling people, "Don't use X browser" to access a site.
Had a similar issue, and it turned out to be Google Translate in Chrome on 10.6.8 having issues when I used multiple languages/characters. I got around this by adding the class "notranslate" onto html elements that I didn't want Google Translate to bomb out on.
To quickly see if this works for you, add the class "notranslate" to your body and see if the page stops hanging. Hope this works for you!
I'm currently building a music based website and I want to build something like this template. It uses ajax and deep linking. (And it makes use of the History.js library - please notice how there's no '#' in the URLs.)
The reason I want to use these 'ajaxy' methods (or maybe use the template altogether) is so that when music is playing, it will remain un-interrupted as the user navigates the site.
My worry is that my site wont be crawlable by Google but I think I can modify code in the page source to fix that. If I look at the source code to the template, in the head I see
<meta name="description" content="">
<meta name="author" content="">
<meta name="keywords" content="">
Now if I add this to the head:
<meta name="fragment" content="!">
will that make the site crawlable? Is there other code I need to add on top of this? Or is it just not possible for this template?
I'm following this guide https://developers.google.com/webmasters/ajax-crawling/docs/getting-started, and I'm on step 3. I will of course have to complete the other steps but I don't know I'm heading in the right direction, or heading towards a dead end!
Any help would be very much appreciated. Many thanks in advance.
From what you said it sounds like your site updates the address bar with clean urls as you navigate via ajax. That's good. The next thing is you want to do is make sure those urls work. If you directly go to a url do you see the specific content it represents. And would a crawler also see the correct content without running javascript. Progressive enhancement works well for that. The final thing is you want to do is make sure bots can pick up those urls.
I've not played with the meta tag for ! But it looks like it is only for the home page and you still need to implement the escaped fragment page. Maybe it does support other pages but the article does not cover that.
I have a question about the <img> tag src attribute.
Is it possible to hide the <img> tag src attribute when viewing the source in a browser?
If it is possible, how? Please tel me if you have any reliable sources.
No, it's not possible.
You can set them dynamically with JS, but you can't hide them. You can store them as base64 encoded strings, and then decode them on the fly which will "hide" them from your page's source.
However, this is still utterly pointless as in the end, the browser still makes an HTTP request to fetch the image.
Simply spoken: This is impossible.
You might try to obfuscate your image src attributes (JS, Base64, etc), but for the browser to be able to show an image, you'll always end up exposing the image URI.
Which, in turn, means that everyone who knows their firebug will be able to see where your cute kitteh image comes from.
Alternative:
Generate One-Time URIs for your images (quite expensive).
Another good feature is to hide the location paths of your important scripts. I found a great npm plugin for this https://www.npmjs.com/package/location-hide
This works also for php href, src, content it will use everything inside src=""
You need only node.js for creating the exported files. It´s easy to use even if you don´t know node.js
It turns
<script src="test/folder/sample.js" type="text/javascript"></script>
<link href="test/stylesheet/perfect-scrollbar.css" rel="stylesheet">
into
<script src="TNANIuTOLZfmLYwaPDIYhcZDVOWKodqYhysaTeQHFPDhYlDLCOtxZqYmkKAhaSwSgbsYOWlpBzVSBtMZKSfwRqvPSqWVlBBuzHR" type="text/javascript"></script>
<link href="gyXeFnOEvZbgTjLvdZRnsyrfhaXqffkDjcdATTouqpIenCalLRXKamuXEtiKbPGCsNrdQIaqTMTNWsLyLFuxygKytaruWzSjKYMq" rel="stylesheet">
And it generate new jquery include codes like this to include your scripts with javascript in a external file
$('[src=\'TNANIuTOLZfmLYwaPDIYhcZDVOWKodqYhysaTeQHFPDhYlDLCOtxZqYmkKAhaSwSgbsYOWlpBzVSBtMZKSfwRqvPSqWVlBBuzHR\']').attr("src", "test/folder/sample.js")
$('[href=\'gyXeFnOEvZbgTjLvdZRnsyrfhaXqffkDjcdATTouqpIenCalLRXKamuXEtiKbPGCsNrdQIaqTMTNWsLyLFuxygKytaruWzSjKYMq\']').attr("src", "test/stylesheet/perfect-scrollbar.css")
Also I would suggest you that you include all of your external javascript codes in 1 single js file. This file you place in the root of your index file that you can make this
<script src="./allinone_external_file.js" type="text/javascript"></script>
Then make right htaccess that nobody can acces this file. You can also make a fake import script for the source code that every body can see. But this file is only a redirect for the real external js file. you make this multiple times as example + use other obfuscation tools. This will protect you from people searching exploits with your javascript codes. I know its no big deal and maybe you can see the jquery include codes if you know how. But anyway its a great protection.
When you share a link on facebook it will automatically find images on the website and randomly picks one as a preview. How can you influence the preview image? When a person shares the website link on his facebook?
1. Include the Open Graph XML namespace extension to your HTML declaration
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:fb="http://ogp.me/ns/fb#">
2. Inside your <head></head> use the following meta tag to define the image you want to use
<meta property="og:image" content="fully_qualified_image_url_here" />
Read more about open graph protocol here.
After doing the above, use the Facebook "Object Debugger" if the image does not show up correctly. Also note the first time shared it still won't show up unless height and width are also specified, see Share on Facebook - Thumbnail not showing for the first time
Note also that if you have wordpress just scroll down to the bottom of the webpage when in edit mode, and select "featured image" (bottom right side of screen).
Years and years pass and this problem with the facebook cache has not yet been solved ...
Why doesn't facebook put a button to totally clear the cache in Debug Tools ???? How difficult is that?
OK ... Now the definitive solution:
Use this on "og:image"....: ?[sequentialNumber] example: ?1 / ?2 / ?3 .....
Example of use:
<meta property="og:image" content="http://example.com/image.jpg?1" />
Did you change the image? Add 1 to the number ...
<meta property="og:image" content="http://example.com/image.jpg?2" />
Each time the image is changed, add 1 to the number
This can be done manually or dynamically, with PHP for example.
It's working really well for me, I hope I helped.
If you're using Weebly, start by viewing the published site and right-clicking the image to Copy Image Address. Then in Weebly, go to Edit Site, Pages, click the page you wish to use, SEO Settings, under Header Code enter the code from Shef's answer:
<meta property="og:image" content="/uploads/..." />
just replacing /uploads/... with the copied image address. Click Publish to apply the change.
You can skip the part of Shef's answer about namespace, because that's already set by default in Weebly.
In order to simply create templates for HTML pages (no PHP, no ASPX etc), I need the ability to build up HTML page-chunks that I could then assemble to form a complete HTML page.
So that when I need adding a new menu item, I can re-assemble all the pages with the changed menu-chunk.
I tried W3C's Amaya, and got it fatal error on 1st attempt! Yes, it's W3C and it's a bug pot lol.
Komposer's outdated version had a templating model, but not in the new version.
Since I can't find any "honest" open source website editor to do that, I think I will try this as a solution:
Use c# of VB .NET to build a database out of all HTML chunks.
Create very simplistic web pages with chunk names as comments, like:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>A title here</title>
</head>
<body>
<!-- menu_chunk12 -->
<!-- body1_chunk -->
<!-- footer3_chunk -->
</body>
</html>
When some chunk is edited, I just click a button and my little app will rebuild all the web pages and I'll re-publish them upload to the server.
What do you guru guys think about that?
This is not a terrible approach, but I would probably use some special notation in the comments like <!-- #include(chunk_name) --> so that these special comments are distinguished from regular comments.
You might also look at something like htp.
It's an interesting idea, but in my opinion, if you want a little more extensibility, look into doing XSLT tranformations into HTML. This would provide you a very homogeneous design, that would work on any platform serving HTML, and provide you with a complexity level you desire (simple or extreme).
Yes. I wrote a very simple but effective preprocesor for html that does this.
I used an extremely simple format where "##" was used to introduce a command. The most useful command was "##include " which caused another file's contents to be inserted in place of the include command.
Other useful commands would allow me to set variables, increment variables, and emit the value from a variable into the HTML output. These allow you to add things like a copyright date on all your pages and simply update it easily in a single ##included location.
It's a trivial program to write, and you have full power over the features.
I used this for about 10 years until I pretty much switched from html to php.