MVC page design using caching for best performance and UX - asp.net

I have a album page (using ASPNET MVC + MongoDB) which has following parts:
#1 List of thumbnails displayed as a grid
Note: I load few fields for each video in the video album: url, length, caption, tags. If user hovers over thumbnail I show some of them.
#2 Then I have related albums
#3 Then I have List details
#4 Then I have current video details (including description which can be 5K characters)
#5 Then all comments of the current video.
As you can see list of thumbnails, related albums, list details are same for all videos.
But video details, video comments are different for each videos.
I NEED TO STREAM VIDEO, GET VIDEO DETAILS & COMMENTS EACH TIME USER CLICKS DIFFERENT THUMBNAIL
WHAT IS THE BEST WAY TO DO IT?
Option 1: url redirect user for each click (will cause reloading of common pieces)
Option 2: ajax to load comments and VIDEO details & update page (more coding)
Is there a way to leverage caching common pieces?
Please share your thoughts.
Thanks

If it is in scope I would probably also look into using one of the many framework for creating a Single Page Application, like Backbone (which I happen to like like a lot).
If it is only a caching solution that you are looking for, MVC has an OutputCache attribute that can be applied to a Controller or to single Actions and allows fine tune and managing of caching behvaiours server side, client side, parameter based etc. etc.

Related

Adopt another site's Open Graph properties

I'm implementing the Open Graph protocol on my site, and I'm curious if it is possible to "adopt" another site's Open Graph properties within my site's web pages.
For example, suppose a user makes a post to my site that contains a link to an article (such as the New York Times). They then share that post on platforms such as Facebook and Twitter, and I want the preview image on those platforms to contain the Open Graph image from the New York Times article web page.
Is this possible?
It's possible, when the user validates the post, you have to check the links inside to target the link of NYT. Then you have to parse yourself the page of the NYT to return the content you want. And finally you use the informations of the OG Tags of the NYT's page.
I think it's a heavy process, and keep in mind that Google penalize heavily the duplicate content from the others websites.

Synchronise 2 youtube videos on Drupal site

I want to allow 1 user to point to a youtube video (possibly upload it through the youtube api) on a Drupal site.
And then other users can add videos linked to that video (separate nodes?).
The difficulty is that the videos should be synchronised. So when a user uploads a video to match the original one, he should be able to somehow indicate how this is synchronised with the original one. For instance 4seconds vid1 = 1second vid2
Any ideas, module suggestions, UI ideas are very much appreciated.
I have found this post on video synchronisation with youtube api, but I need a method that would allow the user to actually easily give in the synchronisation. And then synchronise with different starting times.
Best to create a custom module for that. Give the user a form with the youtube id and a sync time then use the youtube api from there. No need for drupal specific code - tho you could create seperate nodes for each video, relate them with node reference fields and store any data in the variables table - butI'd probably create my own table for this.

Flex 3: Project Architecture & SEO

I've got a Flex 3 project. One of the problems I have is that not very much of its content is indexed by Google. Currently, I pull data from a mySQl database, so the Googlebot doesn't see most of the site.
My goal is to increase the amount of content indexed by Google, improve the SEO, and improve SERPs.
I thought that instead of pulling the data from the database that I would change the project's architecture and create separate "pages". So, in my case, I would compile each puzzle separately and upload it to the server in its own directory. This way the info in each puzzle would get indexed.
The negative is that if I add a puzzle, I'd have to add a link to it in all of the puzzles that are already on the server. I would have to add the link, re-compile each puzzle and upload it to the server. Is there a way to get around this problem? Also, if I wanted to communicate some data from one puzzle to another in the future, I wouldn't be able to do so.
Any suggestions?
Thank you.
-Laxmidi
The usual way to achieve this goal is to develop a hidden parallel site in HTML.
On the first page you will have your flash and, hidden by javascript, a list of links to the other pages. These links will be parsed by the robots. Ideally, the href pages are virtual (look for "url rewriting"). On each "fake" page, your server-side language will print on the page a content or links from your database AND the flash. The flash will be provided with a string explaining where it is and what it's supposed to show.
Ex: http://www.mysite.com/category1/content7 The URL rewriting sends this request to http://www.mysite.com/index.php?uri=category1/content7. The page should display the Flash with FlashVar "uri=category1/content7". The Flash knows which content it has to display so when an user comes from google, following this link, he will find the content he was looking for.
Every linking and content for SEO should be in HTML, don't trust robots capability of reading Flash.
have a look at Adobe's reference on deep-linking.
you can generate a website's sitemap.xml with a cron process (daily), such that the URLs encode the state of the application you need. This URL will encode whatever content you need to retrieve from the db, with just one index.html page.
good luck!

Loading web application content through AJAX

I'm about to build a web application(not web presentation) which will load its content through AJAX (jQuery) into a specific div. There will be a menu above the div and when a user clicks on an item from the menu, the appropriate page will be loaded into the main div.
I'd like to know if there are any cons and pros of choosing this pattern for a web application.
So far I'm avare that the browser back button and history/url will be gone.
Two possible downsides are that it could make it difficult for users to bookmark content on your site and difficult for search engines to differentiate pages on your site.
You should probably provide more information on your reasons for taking this approach. You might have good reasons or it might be a case of using a technology (AJAX) because it is cool to use.
If you want to give the users the impression of fast responsiveness, then yes AJAX load your pages, but still have a different url for each page. This will take more code but it will solve both issues that I mentioned.
http://yourdomain.com/home.aspx //loads its own content via AJAX
http://yourdomain.com/contact.aspx //loads its own content via AJAX
etc
This is really only appropriate if you have a lot of content, or where the content involves time-consuming calculations, such as on a financial site. In most cases, it would be less trouble to just load your pages normally or break you content into paged chunks.
The main con of this approach this will make your site very difficult for search engines to crawl. They don't read Javascript, so your content won't get seen or indexed by them. Try to do progressive enhancement so that they (and any users who don't use Javascript, e.g. screen-readers) don't get left behind.
On the other hand, you can keep browser history functionality. This can be done using the URL hash, e.g. http://www.example.com/#home vs http://www.example.com/#about-us. The nicest way to do this is to get Ben Alman's hashchange plugin and then use the hashchange event:
$(window).hashchange(function(){
var location = window.location.hash;
//do your processing here based on the contents of location
});
This will allow your users to use the history function and the bookmarking function of their browsers. See the documentation on his site for more information.

VB.Net application - display a message to the user whilst the application is starting up

I have recently created an application where a lot of data is loaded into objects when the application starts up, and other data as it is required. For example if the user requests the catalogue page then it will load all the top level category data into objects of type Category. This will then stay there to be used by other users (who will therefore not have to load this data into objects) and can be altered by admin if they happen to login during the same application instance. I know this is not the most efficient solution, as pointed out below, but it works and the page load, at the moment, is not too long. It is very quick if most of the required data is already loaded into objects. It is also tailored to the business' needs - unlike other techniques such as Linq-to-SQL.
The problem I am facing is when a page is requested which requires lots of data to be displayed about different types of object. For example when a catalogue page is requested which displays information on a product which can be bought, it then loads all the products and categories (as the products make reference to the category object, not just the category name).
I would like to display a loading symbol with a message whilst all this data is being loaded into objects, so the user knows its not just in a loop or anything. Is there any way to do this? I am open to using JS / jQuery if I need to.
Thanks in advance.
Regards,
Richard
PS I am working on ways to make it more efficient - such as using HashTables or HashMaps. However this is taking time as there are so many different types of item (News, Events, Catalogue Item - Range, Collection, Design, RangeCollection, CollectionDesign, RangeCollectionDesign and RangeDesign - Users, PageViews and the list goes on).
Please correct me if I'm wrong, but I do believe that Javascript is required in order to display a "loading" image... Using server-side scriping alone would typically require an entire page load after all the content loads unless you want to start messing with IFrames.
This is a job for AJAX. A common solution to your problem is to have a small page that displays a loading icon. The page has some JavaScript that makes additional HTTP requests to the server to download the rest of the page. JQuery has a "$.ajax" method that is designed to simplify this process.
I would suggest looking at the documentation to the .ajax method in the jQuery documentation. Unfortunately, it seems to be a rather delicate process to get all the scripting code right and it takes a while to learn it all.

Resources