Aplikacja Webowa - wyświetlanie zdjęć bez przeładowania strony.

Chciałbym zrobić aplikację webową która ogólnie mówiąc będzie działać tak:

• kilka osób otwiera określoną stronę (na której jest lista plików - zdjęć z określonego folderu na dysku) i panel do wyświetlania tego zdjęcia
• jedna z osób oznacza się jako "gospodarz"
• "gospodarz" ma możliwość zmiany zdjęcia - gdy wybierze któreś zdjęcie z listy zostaje ono wyświetlono w panelu zdjęcia u niego i u wszystkich pozostałych

Pytanie do Was:
W jakiej technologii (a raczej technologiach bo pewnie front i back) będzie to najłatwiej wykonać?
Znam C#, więc danej technologi i tak będę musiał uczyć się od zera.

Dziękuję z góry za pomoc.

Pliki ze zdjęciami mogą być też na serwerze - to w sumie bez znaczenia.

pytanie - czy ma być twarde "rozdzielenie" na front-end i back-end.
twarde rozdzielenie da ci taką możliwość, że później możesz np. appkę zapakować jako PhoneGap i wrzucić na google Play

twarde rozdzielenie to jakby robisz 2 oddzielne appki:

1. część kliencka, wykonana w JS+HTML+CSS+oprawa-graficzna+AJAX/jQuery
2. część serwerowa, wykonana w technologii serwerowej zdolnej do komunikacji na zasadzie AJAX, najpopularniejsze jest PHP, baza danych i sesje uzytkowników

Jeżeli "miękkie", to cały index.html jest tak naprawdę index.php a więc układasz obiekty DOM na zasadzie języka back-endowego, a wszyscy wchodzą na serwer, a HTML jest generowany, a nie statyczny.

Twarde wygląda na pewno tak:
Klient, aplikacja z ktorej korzysta bezposrednio (np. na komórce):

• front-end robisz sobie HTML+CSS+JS
• jezeli aplikacja ma byc responsywna, to trzeba pomyslec o ukladzie elastycznym (najpopularniejsze sa bootstrap oraz jQuery-mobile)
• można dodać funkcje drag-and-drop, a więc przeciągania do aplikacji
• potrzebujesz do odswierzania JavaScript timing events : http://www.w3schools.com/js/js_timing.asp
  czyli puszczasz skrypt w interwałach, a więc sekwencjach czasowych
• potrzebujesz dobre opanowanie AJAX, a więc zaprogramowanej komunikacji na linii klient-serwer
• polecam dołożyć do ajaxa jakąś bibliotekę kryptograficzną JS: https://gist.github.com/jo/8619441
  nie jest to konieczne, ale zwiększa twoje bezpieczenstwo

a na serwerze wygląda to tak:

• php, prawdopodobnie z bazą danych, bo ma być system logowania i podział na użytkowników
• musi być folder na te multimedia, z ustawionymi uprawnieniami
• PHP ogólnie musi ten folder skanować i albo wysyłać z powrotem do Klienta, albo usuwać niepotrzebne multimedia
  możliwe, że tutaj będzie jakiś php-worker
• jezeli podzial na uzytkowników, to kazdy ma swój folder
• jakby ci się aplikacja rozrosła, to możesz pomyśleć o jakiejś formie kompresji tych plików
• łatwe do zaimplementowania są funkcje:
  wysyłka na email, przerobienie obrazków na PDF

Znasz C# więc napisz backend w C#. Jak będzie chciał zrobić SPA (tak jak to opisywał @NieGooglujMnie) to możesz zrobić serwer RESTowy w http://www.asp.net/web-api

Dziękuję za odpowiedzi.

To co napisaliście jest dla mnie czarną magią, więc ogarnięcie trochę zajmie...

Póki co pomyślałem o takim rozwiązaniu:
Mamy trzy elementy:

• "gospodarza"
• bazę danych
• klientów (maksymalnie 4)

Gdy gospodarz wybierze dany plik informacja o tym zapisywana jest w tabelce w bazie.

Klienci regularnie odpytują bazę i jeżeli wpis z informacją o aktualnie wyświetlanej grafice się zmienił, zmieniają ją również u siebie.

Czy coś takiego zadziała?
Zakładam że jest dużo prostsze w realizacji niż to o czym napisaliście :)

W sumie jeśli to ma być real-time to możesz użyć websocketów. Na serwerze dla C# możesz użyć do tego ASP.NET SignalR lub czegoś innego. WebSockety to komunikacja w obie strony. Gospodarz wybiera obrazek -> JavaScriptem wysyłasz informację do serwera po WebSockecie -> serwer wysyła informacje do wszystkich klientów o zmianie obrazka -> u klientów JavaScriptem (też WebSocketem oczywiście) odbierasz informację z serwera i zmieniasz grafikę w przeglądarce. Nic skomplikowanego.

Tak na marginesie - jesteś pewny, że trzeba do tego bazy danych? Informacje o tych zdjęciach muszą być zapisane na stałe?

@Wizzie niczego nie jestem pewny ;)
O bazie pomyślałem jako miejscu do wymiany informacji między gospodarzem a klientami ;).

To co teraz zaproponowałeś wydaje się prostsze, poszukam informacji jak to się robi i spróbuję coś naklepać :)

Mam taką aplikację zrealizowaną w C# i opiera się własnie na komunikacji sieciowej (tylko że gospodarz wysyła informację o zmianie obrazka po UDP na broadcast a klienci nasłuchują i gdy coś dostaną zmieniają obrazek u siebie).

WebSockety są oparte na TCP (przy tym nie dodając praktycznie żadnego narzutu).

Z bazą to zależy jaki "czas życia" chcesz aby miała jedna taka "sesja". To znaczy - jeśli chcesz, żeby jak wszyscy wyjdą (gospodarz i klienci), dany obrazek, lista klientów itd. (ogólnie cała "sesja") była zapamiętana, to będziesz potrzebował bazy danych. Jeśli to jest tymczasowe i nie wymaga zapisu to nie trzeba ci bazy.

Pobrałem przykład użycia WebSockets w ASP.NET i nie działa :P.

Tzn strona się włącza i po wpisaniu czegoś i kliknięcia send pokazuje się pod spodem, lecz jeśli otworzę drugą zakładkę to już tego nie widać...

Możecie sprawdzić czy u Was to zadziała (na dole jest link do pobrania)?

Zapomniałem o linku: http://weblogs.asp.net/dwahlin/building-an-html5-web-sockets-server-with-asp-net-4-5

Praca wre :)

Mm już prostą aplikację, ale co najważniejsza działa w oparciu o WebSockets i ładnie się synchronizuje :).

Mam jednak problem z przeniesieniem jej na serwer.
Lokalnie wszystko działa jak należy, ale gdy przeniosę na serwer dostaję informację o błędzie:
Firefox nie może nawiązać połączenia z serwerem ws://localhost/WebSocketsServer2.ashx?name=NieWazne

Kod odpowiedzialny za stworzenie połączenia wygląda tak:

var url = 'ws:/localhost:5707/WebSocketsServer2.ashx?name=John Doe';
ws = new WebSocket(url);

Próbowałem w miejsce localhost:5707 wstawiać adres swojej strony lecz też nie zadziałało.

Moja strona dostępna jest póki co pod adresem w tym stylu: http://94.2XX.27.1XX:8011/ASP/

Jak powinien wyglądać ten adres WebSocket?