I am currently building an asp.net c# Website for a client of mine to promote their band, on there they would like to have a Webplayer which continues to play music as people are browsing the site. The player is located on the Master page so it is included on every site, but it stops playing every time the site does a postback or refreshes in any way.
I think it is possible to achive this using Iframes or Ajax, although i dont have alot of knowledge in either.The site is only about 6 pages with mainly static information on there, so the only postbacks/refreshes will be done by using the navigation menu to load each page.
My question to you is:
how can I achive this?
what would be the easiest method and what are the pros and cons?
are there any other/better ways of achiving this other than using Iframes or Ajax?
I can provide some code if needed.
Thanks,
Seb
The easiest way to achieve this would probably be to have your site put itself into a frame, where another (very small) frame on the page hosts the media player. That way when people switch pages, the frame with the media player is left alone. However, this will probably come out feeling pretty clunky at best.
The best way is probably to use AJAX. All of your page navigation would happen as AJAX requests, so the user never technically leaves the original page. An iframe will probably be necessary for tracking history so the user can click "back" and have the browser do what they expect, but you can find libraries that will take care of that aspect for you. The media player should probably use a different subdomain for its source than the rest of the site content, because most browsers max out at two simultaneous connections to the same domain--your site could feel sluggish if one of these two connections is being used for the music stream at all times.
Related
I was just about to upload my new, redesigned website when I realised "crap, it's just like every other website."
Then I had an idea. And I've spent the past 2 weeks planning. I have but one thing left to do, and it's proving a little difficult to figure out how I can have my website for PC's, and a whole different site for an iPad (or just larger touch based computers in general) and another for Touch-based phones, and then one for regular phones with web browsing capabilities.
Is this possible? I want separation. I don't want a bunch of javascript files with commands for everything inside them. I want to separate each 'website' and serve it based on the platform requesting the document. How can we achieve this?
If you are to recommend any libraries that may help, note that I will not use jQuery (but list jQuery anyway as others who face this problem might not mind using jQuery)
You can use Asp.net MVC and switch your views depending on the device.
This way you can reuse all your controllers and have different views for each device you want.
Scott Hanselman wrote an article a while ago about this kind of development:
http://www.hanselman.com/blog/MakingASwitchableDesktopAndMobileSiteWithASPNETMVC4AndJQueryMobile.aspx
I would recommend jQuery Mobile to use in mobile devices. I also recommend Kendo UI Mobile, it really looks amazing but the mobile version is not free..
I also suggest to take a look at SPA (Single Page Applications). With SPA you could have a rich javascript application ready for any device. Combining it with Asp.Net WebApi looks very promising.
Jonh Papa made a course on Pluralsight that is completely worth it:
http://www.johnpapa.net/building-single-page-apps-with-knockout-jquery-and-web-api-ndash-the-story-begins/
It's all about thinking about what you really need and how much effort you can put in.
long answer short, i think what you are looking for is Request.Browser to do redirects. You can Access things like Browser.Browser or Browser.Version, i think even a IsMobileDevice is to be found there.
check out: http://msdn.microsoft.com/de-de/library/system.web.httprequest.browser.aspx
I am currently designing a portfolio website with wordpress. The idea is that it's going to be all in one page, and use js to scroll up and down.
After coding the whole thing in fixed width, I thought of the responsive design. I started reading and I think I got the idea. Before doing anything else I am going back to photoshop and re-editing the design for mobile - to quickly see what I want for mobile (almost mobile first, at least on photoshop, kind of ignoring what I already have)
In my current design I display my work examples in slideshow. I am using this plugin http://css-tricks.com/3412-anythingslider-jquery-plugin/. my first instinct is to remove these slideshows when for mobile and use only one image for one each work. is that good idea?
Also I seen some responsive design tutorials which use the same images for all resolutions and then scale them down with css. Should I have different (sized) images for mobile? for example
#media screen and (max-device-width: 480px) {
.img {
background:url(site-small.jpg)
}
}
#media screen and (max-device-width: 600px) {
.img {
background:url(site-large.jpg)
}
}
As I said my portfolio site is all in one page, and I use the jquery ScrollTo() feature to get this effect on navigation http://two24studios.com/. For mobile version, should I remove that or not?
I have some decorative images which simply look impressive and adds very little more to the interaction, would it be better if I remove them when screen gets smaller. And on this note (though I didn't look into it yet) if I what to remove some content when on small screen, do I only use display:none or is there a way to prevent the content from loading for no reason.
I am using one embedded font for the design, is it ok to keep that for the mobile version or is there any restriction on that, such as do mobile browsers support #font-face embedding.
And the very final thing, I am planing to create a new page within wordpress, and call it something like "playground" which would have a list of demos on html5, CSS3 and the like just to show off my skills. should I include that in the mobile version or not. As I think a mobile user can't really take advantage of that?
I hope you can help me with any of these uncertainties that I have
Mobile users have more limited bandwidth and slower connection speeds. That's something you want to keep in mind when considering how quickly the page will load as that can greatly impact user experience.
I would avoid using the slideshow for mobile -- or at least doing a slideshow that uses smaller images appropriate to the screen size. You don't need to download an image that's 720px wide when you're on a 360px wide screen, for example.
Scroll to will probably work fine. One consideration you may want to take is to use touch events rather than click events if you're using JavaScript for the "scrollTo" functionality. (A presentation on touch events.)
As for your playground page, that will depend entirely which demos you're planning to put there. I'd test out your examples on mobile to see if they make sense and function properly there; if they do, then display them. If not, either improve them to work on mobile or don't show them on mobile.
I am a student and do my work and projects in c#.. I have not experienced WEB still. The question I wish to ask is that whenever in or near future if I wish to switch onto developing WEB Applications on ASP.Net, will I experience any difference ?? excluding any syntax changes.. I mean in C# the way do Add Update and Delete Records and the calculations, will I be experiencing the same in ASP.Net??
I don't have any concepts of WEB.I want to ask you people that what do you consider the most important to learn before switching onto ASP.Net?
Guide me please.. :/
There are no differences in server-side code.
The main different is in the UI.
While Microsoft tries to maintain a UI experience similar to Windows applications using its custom controls and the designer, you need a good knowledge in HTML and CSS if you want to create complex UI tasks.
Custom controls actually generate client side code such as HTML, CSS and Javascript.
So your main challenge will be the presentation layer and how to create client side code that is well parsed on different browsers. It's more difficult than Windows' "Drag and drop" technique, but it's quite a lot more powerful.
You'll notice that you can't drag and move controls the way you do with Windows apps, changing their coordinates on the screen.
HTML is not about coordinates, it's based on a certain document flow in manually defined layouts.
Don't be tempted by changing Web controls to absolute positioning, just because you think it's "easier". It's a mistake a lot of migrators to ASP.NET do, and it's generally a huge mistake that I suggest you don't fall into.
If you are talking about the difference between Windows apps and Web apps, the most important and hardest thing will be for you to grasp the page life cycle. Check here for Microsofts overview.
I guess the web and desktop applications have considerable difference. The one and most important is that when on Web there are two states of WEB application
On Server side : where we have C# code and stuff.
Client side : Where we have CSS, HTML and JavaScript doing it all for us.
Besides this HTTP which is communication bridge.
This is one big different that desktop application developer face when they switch to the Web Applications.
I will suggest you to take a look at basics of CSS, HTML and JavaScript while swiching on web applications. That really helps in log term.
First, I'd say if you look into web application, make a few quick examles with ASP.NET WebForms, and then a few with ASP.NET MVC, to learn the differences between good design (MVC with AJAX and without postbacks) and bad design (quick and dirty WebForms with postbacks and without AJAX).
Try using JavaScript on pages, and look at how postbacks reset all JS variables, and the impact that has on anything dynamic. Also look at how postbacks exponentially increase the complexity (and bugs, such as session timeouts with label text stored in session) and decrease the debugability of your application.
Take a look at JQuery, JQuery uploadify and JQuery Treeview, and JQuery DataTable, and JQuery Charts.
Add and UpdateRecords imply editing a DataTable and saving the changes.
This is the worst thing you can possibly get your hands in with ASP.NET, that is, if you want to do it properly (with the possible exception of asynchronous data processing).
If you are really passionate to dive into web application development especially ASP.NET, I would recommend the following path for a beginner to kick start with.
Start learning HTML, JavaScript, CSS
Next you could try Classical ASP. Having a know how of classical ASP will definitely be a plus, when moving to ASP.NET because, you will under stand how ASP.NET renders pages and what ASP.NET controls really does etc etc. In my own words ASP.NET is a chocolate coated version of classical ASP, I am telling this from my classical ASP experience.
Next you need to firm understanding of on how the web works and its internals. If you need you could also refresh on How Internet works and How website works (this too).
Finally you could start off with ASP.NET 2.0 and later move to advanved stuff like AJAX, MVC etc.
You could further enhance you skill by learning jQuery and some CMS (Content Management Tools) like DotnetNuke.
It's easy enough to record how long a page takes to load using Events with Google Analytics and I can find plenty of examples of how to do that by searching. The problem is most of these methods record the start time as being the moment the page starts to load so in effect all it tells you is how long the page took to render in a browser. I want to time the full page lifecycle, ie from when the request begins until the browser has completely rendered the page to the user.
Anyone know how to do that with GA?
Is there any way to get from the browser when the request started, rather than having to record a timestamp in javascript?
EDIT: The prior answer was from before Google Analytics released its Site Speed feature; it's far preferable to use the built-in feature, which uses the HTML5 Navigation Timing API.
By default, the Site Speed feature is enabled and samples 1% of traffic.
To increase the sample rate, just add this line before your _trackPageview call, setting the second argument to what percent of your traffic you'd like to track (though Google will only record up to 10,000 visits):
_gaq.push(['_setSiteSpeedSampleRate', 50]); //50%
I want to play an audio file whenever my page gets loaded onto the client browser. And if a user presses a pause button on the web page then the sound gets paused until he leaves the sound and can resume as well. ?
Here's some examples. But as some said before, its not the best idea to have sound. But if yo do at least have a toggle to mute, turn the volume down or disable it totally.
The easy musicplayer for flash is a easy-to-set up MP3 player solution that does what you need. It provides "play" and "pause" buttons.
Until HTML 5, flash is going to be your best solution, this is mostly because it's an intrusion to have a page commandeer control of the user's speakers, and thus why people have recommended not doing this at all or making it so that the user must explicitly click something.
Here's a page with some freebie flash player options:
http://www.premiumbeat.com/flash_resources/free_flash_music_player/
I found this web site helpful for setting up a sound file from within a page. In my case, I only wanted it to play if they clicked something. I would agree with others here who suggested that.
This web site
http://www.phon.ucl.ac.uk/home/mark/audio/play.htm
One problem I have is when I have a number of web pages open and one of them starts making a sound, it is very difficult to find the page to get it to shut up. It is better to have the user launch the sound.
I guess achieving the same with jquery plugins won't be less exciting!
The jquery mediaplayer does the same. Using this jquery plugin, you can play your media player files without the need of windows media player. The limitation is that this works only with the media player type of files.
Further, since mp3 files are highly used in web pages, we could use the bssound jquery plugin to embed mp3 file in our web page.