1 / 9

Tea Exploratorium: Engaging Science Journey

Dive into the science of tea production from leaf to cup in a captivating way! Ideal for secondary science students and tea enthusiasts, this horizontally scrolling website features layered content, animations, and interactive elements. HTML5, jQuery, Flash, and plugins are utilized for a dynamic learning experience. Though challenges exist with older browsers and Flash, the future looks promising. Stay tuned as the site nears completion for a memorable exploration of tea science.

mead
Download Presentation

Tea Exploratorium: Engaging Science Journey

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web DesignJuan Casasbuenas

  2. (revised) Aim of the website • Allow users to explore the underlying science behind the production process of tea in a highly engaging way… from leaf to cup. • Target audience: Secondary science students and (tea enthusiasts.)  a little hard to do both properly.

  3. A reminder…

  4. One page, horizontally scrolling

  5. How I’ve tried to achieve my aim? • Horizontal scrolling website • Minimalist approach • ‘Layered content’: Slide show  Question  Content  Extra content • Use of animation to make learning easier

  6. Techniques used: • HTML5 to embed videos without controls • JQuery(javascript) plugins for mouse-over effects • Flash animations for educational content (made in Toon Boom studio) • QTips2 for tooltip mouse-over effect • Fancybox plugin for iFrame content boxes.

  7. Personal critique • HTML5 does not work on old browsers, but does on smartphones, all new browsers… just a matter of time? • Flash a bit clunky, maybe website should either be ALL flash, or ALL HTML5? • Most people have asked, “Any interactive games? Quizzes?”  simple quiz probably achievable but Flash based games probably a step too far within time frame.

  8. Revised Timeline WC 11/06 – Complete basic code to make sure website does everything I want it to (almost there) WC 18/06 and WC 25/06 – Content development in separate HTML files – almost there… WC 02/07 – Trial website, adjustments, finishing touches and upload.

  9. Blog • goodhouses.wordpress.com

More Related