I’m trying to create a web based welcome display for a building entrance. The project would include:
1) A wmv movie play constantly on the digital display until some visitors touch the screen (this can be played either locally or on the internet, but it has to be able to go to number 2 when visitors touch the screen)
2) A couple of buttons with department names show up for visitors to choose who they are here to see
3) After the visitor touch on one button, an email is sent to the department
4) Thank you page, the site should go back to the number 1) again
My experience is html, css, php, javascript, and some Flash, but I’m open to learn new skills. Can someone please suggest some good ways to build this site? Is there any tutorials or good sites I can learn from, that would be a bonus.
Thanks very much.
Sam 🙂
Edit:
Thanks very much Vigrond and Lloyd! You guys’ answers are equally helpful, so I’ll use html5 and javascript.
I have a couple of further questions, I hope you guys or someone can help me. (Any part of questions’ help is appreciated)
-
Since this is going to be a kiosk, the same movie is going to be played constantly, everytime after the customer has contacted us, the ‘thank you’ page is going to show briefly and go back to the first movie page. My question is how can I not let the movie load again and again everytime when there is a customer? Because the local data space for the display is going to be limited.
-
I’ve been thinking if I just create one page for the whole process and use a javascript slide to make each page as a div, so the movie div is going to be hiden so it doesn’t need to be reloaded again, would that fix number 1) data space concern?
-
I’m thinking of using a horizontal slide like http://www.queness.com/post/356/create-a-vertical-horizontal-and-diagonal-sliding-content-website-with-jquery How can I make the last div (thank you) to show about 5 secs and go to the first div (movie) again?
Thanks very much! 🙂
This can be purely done using html5/javascript (+php for the email sending). Google Chrome also has a -kiosk mode, that will enable fullscreen.
I would probably use HTML5 video, along with something like the jQuery cycle plugin. On the video onclick handler, I would just cycle() to the next ‘slide’. You can put in effects such as fadein, fadeout, slide, etc.
If you wanna get fancy, a mobile framework such as jQuery mobile or Sencha mobile may be right up your ally as well, (with aesthetic familiar interfaces and cool transitions)