I am developing an HTML5 web app that is mostly being used on mobile devices. It's basically a link discovery app: It shows the user some hopefully interesing links, which the user then can visit. I would like to keep the user in our app though, so that our menu bar always remains at top.
Standard links of course take the users away from our page completely, with no option to return:
The Cheshire Cheese Cat
frames and iframes are discouraged in HTML5. What other options are there?
(What we try to achieve is similar to what Facebook or Twitter are doing. Lots of links are being passed around there, which the user can visit. But he alsway can go back to his news feed, with the Facebook or Twitter menu bar.
If you just want to make links open in a new tab (which is what I would recommend), you can simply use target="_blank":
<!-- opens in a new tab/window (depending on the user's browser) -->
The Cheshire Cheese Cat
Man I think you have to make a good research about HTML5
Html 5 is only a upgrade (in quotes) to the existence html and javascript, iframes are totally valid element and frame you are right they are deprecated. But for at least you dont want to use them or other, iframe are a good way to go for what you want to achieve. If you are going in the iOS or Android plataform I dont sure but I guess should exist some kind of browser object which is what use facebook.
I think you have problems with the cross domain control policy and not because the iframe tag
take a look to this answer
Alternative to iFrames with HTML5
best
And HTML5 is no a new framework is just html and javascript.
Related
I installed some browser SEO tools for Chrome, and they all detect some iframes which I can not find in my HTML.
Could I get some help in detecting them? As far as I know, I dont use any iframes.
The website is: Firstidea.gr
The home page shows 1 iframe, while for example the contact page shows 4 iframes!
Any help to understand the reason behind that, would be greatly appreciated.
As i was searching on your website i saw you use jx_ui_Widget to make contact via chat widget. I know this widget as i used it myself. Well this widget is creating iframes for you.
On the contact page you have the widget and on your homepage you don't.
This widget also creates iframes on other pages to track visitors so you can talk to them live. 1 frame (like the one on your homepage) is for tracking the visitors. The other 3 (or more) is for creating the widget on your page
I want to implement the header as like twitter has. I have observed couple of things like when i click on home link, the url has changed but still page header is not loaded and the content of the page is changed. Can anybody give me some suggestion so that i can put that design on my site?
UPDATE
I have seen this site : 1, 2
I am wondering that how twitter manages offline site. Because I have tried couple of example for application caching, and i have got warning on my firefox browser about page storing. While I am opening twitter site on firefox this warning dosen't appear. What could be the reason. I have also observe that twitter is using locaStorage first time. What is the concept behind twitter offline site caching?
As Cyberfox already mentioned - it's called browser state. The JS-framework BackboneJS implements this method for you: http://documentcloud.github.com/backbone/.
More specific: http://documentcloud.github.com/backbone/#History-start
As Twitter is a mix of good CSS and very much of AJAX, jQuery is probably what you're looking for. (http://jquery.com/)
You want the history methods (pushState, popState) in HTML5, or the hash-bang operations in HTML4.
Here's a comprehensive overview of the state of the art in history munging, and browser state: https://github.com/browserstate/history.js/wiki/Intelligent-State-Handling
...along with a library (history.js) to help.
I'd like to use HTML5 and CSS3 to make a magazine like asidemag.com but how can I enable the horizontal scrolling like that?
You may want to begin considering how people define the sideways swiping, an important first step in how these things get put together. Horizontal scrolling is not really something that is 'enabled', but an integral part of the magazine that is 'built'. You can contact them to find out how they did it, should you like.
Your steps are to read the touch events of the user, understand how they are working (direction) and then how the visible items on the web page are handled to integrate the swiping behaviour. This will depend on your proficiency with javascript, css and html5, and willingness to build the system itself.
I have been working on an engine for this, but the asidemag.com concept handles the data differently from mine. They use ajax to load each page as needed, which allows for a larger magazine, and mine just loaded an entire web page and 'built' it to read like a magazine. Theirs only works on the iPad, and mine works on most devices, including ie7.
How much effort do you want to invest in building a magazine? You can contact asidemag to find out how to do it on their system if you want it easier, or you can poke around on the net to find out how to do it yourself if you have more time to devote to it.
Check out treesaverjs.com it's a framework for creating magazine style web sites.
I have a site that's running WordPress.
The main page has an embedded Flash player and an imbedded iframe, and for some reason, all the configuration info from the Flash player is showing up on Google for my site, and nothing else.
How can I have the main site information show up on Google, without having that Flash player config info show up?
And can I customize what shows up at all?
If there's some way to tag the info I don't want to show up, or tag the info I want to show up, I can probably do most ofthe edits myself, I just don't know where to start...
EDIT: I tried most of the suggestions below, and I didn't get anywhere...
Any other ideas?
Thanks a lot!
If you don't want Google, or other crawler to access certain parts of your website you should use a robots.txt file. Inside you specify which parts are accessible and which aren't, when the crawlers get to your website will always look for this file for instructions.
You can check some documentation on how to do it here and here
In order to influence what text is used on the google search result try putting this within your head tags
<meta name="description" content="WHATEVER YOU WANT DISPLAYED ON GOOGLE">
Source: http://static.googleusercontent.com/external_content/untrusted_dlcp/www.google.com/en/us/webmasters/docs/search-engine-optimization-starter-guide.pdf
Some more information from google on controling parts of a page. Apparently there are google off/google on tags.
http://perishablepress.com/press/2009/08/23/tell-google-to-not-index-certain-parts-of-your-page/
Hope this helps.
If you want Google to index only part of your pages, you can't follow normal SEO routines. You should provide a mechanism to understand whether the current client (requester) is a robot or not. If yes, then don't render that part. This is the only way. Otherwise, a robot either gets the whole rendered content, or doesn't have access based on robots.txt file (Robot Exclusion Protocol).
Another way (which is not really smart, and can't be guaranteed to work) is to dynamically inject your content into the page via JavaScript. Because AMAIK, robots don't run JavaScript.
As search spiders won't render javascript generated markup (JS is not run as it is client-side in the browser), a quick fix would be to don't output any of flash / markup initially in the HTML document and then use JS to add the flash stuff on load.
Note: as far as I'm aware, Google is currently testing a JS reading spider so this may not work long term.
Google is returning this data because it simply can't find any content where it normally would. Search engines require content - they're not advanced enough to process your multimedia to determine what it's all about.
Google will IGNORE your meta description if it doesn't feel that it reflects your page content (of which there is only iframes and JS)
Use SWFObject to provide alternate content for users without flash (including search engines) - ensure it's not some dinky text like "download flash here" - but a lengthy descriptive content piece about your site or media that they would normally experience if they could experience.
Use robots.txt or <meta name="robots" content="noindex,follow"> for the iframe content to prevent it from being indexed.
For the love of all things holy, please look at reducing the number of JS files and inline JS on your site (i'd recommend WP-minify since it's so obvious that you love plugins)
HTML has had frames from early days, but they are deprecated in the latest version. Many browsers (I have tried with Internet Explorer) don't even display frames properly.
Why has this been done? What was the drawback in frames?
Jakob Nielsen wrote a 1996 column that criticized frames. Some key points:
Frames prevent users from properly bookmarking pages. When a bookmarked frameset page is loaded, users' previous mouse clicks inside the frames do not matter. Only the outer URL is saved, and users have to navigate to where they were manually.
Frames present challenges for printing web pages. Printing all the frames at once is not suited to the different dimensions of paper (and users can get only the first pageful that way). Users generally have to right-click the frame they want and choose the appropriate context menu option.
Users coming from search engines may not have access to navigational elements if they are located in another frame — they are directed to only that frame the search engine found the text in.
While "framesets" (the most common type used on late 1990s/early 2000s web pages) are dying, the iframe (short for inline frame) remains alive and well. In fact, recently iframes have been found useful in today's "mashup" web applications, and extensions to the iframe are currently proposed in the HTML5 specification.
For example, Facebook, in its API for app developers, uses them to seamlessly integrate third-party apps with their own site while minimizing the security risk. (In this model, all third-party code remains on a separate domain, which is good for security reasons.)
Frames are not deprecated in HTML. They are obsolete in HTML 5, and just discouraged before this version. This has been clearly mentioned in the specified links.
Not to answer the OP but rather balance the bashing of framesets.
I find them great and nothing comes close to them when you want your menu intact and still:
Visually incorporate 3-rd party pages/apps (phpmyadmin or similar)
Viewing doctypes other than html (pdf's or images).
Due to its width="x,*" you get a simple "responsive" behaviour.
Also, you can provide smooth menu-animations while fetching main contents.
Used with sense, they're super.