Difference between revisions of "Team:SKLBC-DGSYZX/Design"
(Prototype team page) |
ZifengHuang (Talk | contribs) |
||
Line 1: | Line 1: | ||
− | |||
<html> | <html> | ||
+ | <head> | ||
+ | <title>Home</title> | ||
+ | <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> | ||
+ | <meta charset="utf-8"> | ||
+ | <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | ||
+ | <title>Home</title> | ||
+ | <link rel="shortcut icon" href="http://snapsvg.io/assets/favicon.ico?v=1"> | ||
+ | <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"> | ||
+ | <script type="text/javascript" async="" src="./Snap.svg - Home_files/ga.js"></script><script src="http://use.edgefonts.net/source-sans-pro:n2,i2,n3,i3,n4,i4,n6,i6,n7,i7,n9,i9:all.js"></script> | ||
+ | <link rel="stylesheet" href="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/css/master.css"> | ||
+ | <script src="./Snap.svg - Home_files/snap.svg-min.js"></script> | ||
+ | <script type="text/javascript"> | ||
+ | var _gaq = _gaq || []; | ||
+ | _gaq.push(['_setAccount', 'UA-44948757-1']); | ||
+ | _gaq.push(['_trackPageview']); | ||
− | < | + | (function() { |
+ | var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; | ||
+ | ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; | ||
+ | var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); | ||
+ | })(); | ||
+ | |||
+ | function trackOutboundLink(link, category, action) { | ||
+ | try { | ||
+ | _gaq.push(['_trackEvent', category , action]); | ||
+ | } catch(err){} | ||
+ | |||
+ | setTimeout(function() { | ||
+ | document.location.href = link.href; | ||
+ | }, 100); | ||
+ | } | ||
+ | </script> | ||
+ | <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
+ | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | ||
+ | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> | ||
+ | <a href="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/index.html"></a></p> | ||
+ | <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script> | ||
+ | <link href="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/css/bootstrap.css" rel='stylesheet' type='text/css' /> | ||
+ | <link rel="stylesheet" type="text/css" href="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/css/wiki.css"> | ||
+ | <link href="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/css/teamwiki.css" rel='stylesheet' type='text/css' /> | ||
+ | <link href="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/css/ionicons.css" rel='stylesheet' type='text/css' /> | ||
+ | <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> | ||
+ | <!-- Custom Theme files --> | ||
+ | <link href="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/css/style.css" rel='stylesheet' type='text/css' /> | ||
+ | <!-- Custom Theme files --> | ||
+ | <!--webfont--> | ||
+ | <link href='http://fonts.useso.com/css?family=Quicksand:300,400,700' rel='stylesheet' type='text/css'> | ||
+ | <link href='http://fonts.useso.com/css?family=Exo+2:100,200,300,400,500,600,700,800,900' rel='stylesheet' type='text/css'> | ||
+ | <script type="text/javascript" src="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/js/jquery-1.11.1.min.js"></script> | ||
+ | <script type="text/javascript" src="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/js/jquery.min.js"></script> | ||
+ | <script type="text/javascript"> | ||
+ | $(document).ready(function(){ | ||
+ | $("#goToTop").hide()//隐藏go to top按钮 | ||
+ | $(function(){ | ||
+ | $(window).scroll(function(){ | ||
+ | if($(this).scrollTop()>1){//当window的scrolltop距离大于1时,go to top按钮淡出,反之淡入 | ||
+ | $("#goToTop").fadeIn(); | ||
+ | } else { | ||
+ | $("#goToTop").fadeOut(); | ||
+ | } | ||
+ | }); | ||
+ | }); | ||
+ | |||
− | + | // 给go to top按钮一个点击事件 | |
− | + | $("#goToTop a").click(function(){ | |
− | </ | + | $("html,body").animate({scrollTop:0},800);//点击go to top按钮时,以800的速度回到顶部,这里的800可以根据你的需求修改 |
+ | return false; | ||
+ | }); | ||
+ | }); | ||
+ | </script> | ||
+ | <!------ Light Box ------> | ||
+ | <link rel="stylesheet" href="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/css/swipebox.css"> | ||
+ | <script src="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/js/jquery.swipebox.min.js"></script> | ||
+ | <script type="text/javascript"> | ||
+ | jQuery(function($) { | ||
+ | $(".swipebox").swipebox(); | ||
+ | }); | ||
+ | </script> | ||
+ | <!------ Eng Light Box ------> | ||
+ | <!-- Prettify --> | ||
+ | <link href="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/css/owl.carousel.css" rel="stylesheet"> | ||
+ | <script src="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/js/owl.carousel.js"></script> | ||
+ | <script> | ||
+ | $(document).ready(function() { | ||
+ | $("#owl-demo3").owlCarousel({ | ||
+ | items : 4, | ||
+ | lazyLoad : true, | ||
+ | autoPlay : true, | ||
+ | navigation: false, | ||
+ | pagination: false, | ||
+ | }); | ||
+ | }); | ||
+ | </script> | ||
+ | <!----- //End-Share-instantly-slider----> | ||
+ | <!----font-Awesome-----> | ||
+ | <link rel="stylesheet" href="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/fonts/css/font-awesome.min.css"> | ||
+ | <!----font-Awesome-----> | ||
+ | </head> | ||
− | <div class=" | + | <body style="background-color:white"> |
− | < | + | <header id="header" style="height: inherit;"> |
− | < | + | <div class="wrap"> |
+ | <a href="./Snap.svg - Home_files/Snap.svg - Home.html" class="logo"> | ||
+ | <img src="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/images/synn.jpg" alt=""> | ||
+ | <span class="header">Synsketch</span> | ||
+ | </a> | ||
+ | <nav> | ||
+ | |||
+ | <a href="https://2015.igem.org/Team:SKLBC-DGSYZX" class=" selected">Home</a> | ||
+ | |||
+ | <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Project" class="">Project</a> | ||
+ | |||
+ | <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Notebook" class="">Notebook</a> | ||
+ | |||
+ | <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Attributions" class="">Attributions</a> | ||
+ | |||
+ | <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Collaborations" class="">Collaborations</a> | ||
+ | |||
+ | <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Pratices" class="">Human Pratices</a> | ||
+ | |||
+ | <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Parts" class="">Parts</a> | ||
+ | |||
+ | <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Safety" class="">Safety</a> | ||
+ | |||
+ | <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Software" class="">Software</a> | ||
+ | |||
+ | <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Entrepreneurship" class="">Entrepreneurship</a> | ||
+ | |||
+ | <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Team" class="">Team</a> | ||
+ | |||
+ | <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Medals" class="">Medals and Prizes</a> | ||
+ | </nav> | ||
+ | </div> | ||
+ | </header> | ||
+ | <br><br> | ||
+ | <div class="header_bottom about"> | ||
+ | <div class="container"> | ||
+ | <h1 style="color:white">design</a></h1> | ||
+ | </div> | ||
</div> | </div> | ||
− | |||
− | |||
− | |||
− | |||
+ | <div class="about_box3 title" style="background-color:#ccffff" id="background"> | ||
+ | <h3 class="m_1"><span>Software design</span></h3> | ||
+ | <div class="container"> | ||
+ | <div class="grid_3"> | ||
+ | <p>The group for programming takes charge of our website and forum’s construction, administration and maintenance. They use JavaScript and GoJS to build up the skeleton of our project and the carry on the further improvement of the project.</p> | ||
+ | </div> | ||
+ | <div class="clearfix"> </div> | ||
+ | </div> | ||
</div> | </div> | ||
− | + | <div class="about_box3 title" style="background-color:#ff6699" id="background"> | |
+ | <h3 class="m_1"><span>Visual effect</span></h3> | ||
+ | <div class="container"> | ||
+ | <div class="grid_3"> | ||
+ | <p>The group for design is in charge of the whole design process of the website, from the size of the words and the color of the page, to the design of the team mascot and poster. It works as the artist to make sure that all work is on display at the best visual effect</p> | ||
+ | </div> | ||
+ | <div class="clearfix"> </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="about_box3 title" style="background-color:#66cccc"> | ||
+ | <h3 class="m_1"><span>Tutorial</span></h3> | ||
+ | <div class="container"> | ||
+ | <div class="grid_3"> | ||
+ | <p>In order to make it easier from learner to master the use of Synsketch, we design a tutorial for the users. Actually, it’s a brilliant idea which helps us learn synthetic biology easily and save time at the same time. With the help of tutorial, users can learn how to use the software tool within 15mins, only the time to make a cup of coffee. And teachers will also have materials to expand the usage of Synsketch among high school and university students who show an interest in synthetic biology and who want to participate in iGEM competitions.</p> | ||
+ | </div> | ||
+ | <div class="clearfix"> </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="about_box3 title" style="background-color:#ccffff" id="syn"> | ||
+ | <h3 class="m_1"><span>Step4</span></h3> | ||
+ | <div class="container"> | ||
+ | <div class="grid_3 syn"> | ||
+ | <h1>pitched our idea to investors and received money</h1> | ||
+ | <p >We have received 80,000RMB from Guangzhou APP Education Information Consultancy Company and 20,000RMB from Education International Cooperation Group.</p> </div> | ||
+ | <div class="clearfix"> </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="footer"> | ||
+ | <div class="container"> | ||
+ | <div class="copy"> | ||
+ | <p>Copyright © 2015 SKLBC-GDSYZX. All rights reserved.</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div id="goToTop"><a href="#">top</a></div> | ||
+ | </body> | ||
</html> | </html> |
Revision as of 06:02, 17 September 2015
design
Software design
The group for programming takes charge of our website and forum’s construction, administration and maintenance. They use JavaScript and GoJS to build up the skeleton of our project and the carry on the further improvement of the project.
Visual effect
The group for design is in charge of the whole design process of the website, from the size of the words and the color of the page, to the design of the team mascot and poster. It works as the artist to make sure that all work is on display at the best visual effect
Tutorial
In order to make it easier from learner to master the use of Synsketch, we design a tutorial for the users. Actually, it’s a brilliant idea which helps us learn synthetic biology easily and save time at the same time. With the help of tutorial, users can learn how to use the software tool within 15mins, only the time to make a cup of coffee. And teachers will also have materials to expand the usage of Synsketch among high school and university students who show an interest in synthetic biology and who want to participate in iGEM competitions.
Step4
pitched our idea to investors and received money
We have received 80,000RMB from Guangzhou APP Education Information Consultancy Company and 20,000RMB from Education International Cooperation Group.