Difference between revisions of "Team:Heidelberg/Sandbox"

(Replaced content with "{{Template_All_Teams}} {{Heidelberg/Header}} {{Heidelberg/navbar}} {{Heidelberg/pages/sandbox/smallintroduction}} {{Heidelberg/pages/sandbox/bigintroduction}} {{Heidelberg...")
Line 10: Line 10:
 
{{Heidelberg/pages/archievments}}
 
{{Heidelberg/pages/archievments}}
 
{{Heidelberg/pages/software/plasmid.js}}
 
{{Heidelberg/pages/software/plasmid.js}}
{{Heidelberg/js/zitator.js}}
 
<html>
 
<head>
 
    <title>Zitator!</title>
 
 
    <script>
 
        $(function() {
 
            zitator = new Zitator(".basicText", "http://igem2015.bioquant.uni-heidelberg.de/refdb.bib");
 
            zitator.zitiere();
 
        });
 
    </script>
 
</head>
 
 
<body>
 
<div
 
<div class="basicText">
 
<p>
 
    Lorem ipsum dolor sit amet<x-ref>Chapman2006</x-ref>, consectetur adipiscing elit<x-ref>Wright2015</x-ref>. Sed at metus in neque pulvinar gravida venenatis tempus nisi<x-ref>Kazantsevn.d.</x-ref>. Donec nec eros nec elit ornare elementum. Nullam rutrum bibendum justo, quis elementum neque feugiat nec. Ut consectetur, sapien sed egestas mattis, tortor lorem porttitor nunc, ac congue mi nisi non turpis. Nunc viverra erat in aliquet lacinia. Suspendisse mi sem, mollis et semper sed, ultrices quis diam. Mauris in augue odio. Sed sit amet lobortis tellus. Vestibulum lacinia neque rutrum, laoreet erat in, ullamcorper orci. Vivamus nulla arcu, tempus nec odio sit amet, maximus vestibulum felis. Praesent accumsan mi eu nunc dapibus, in finibus velit pulvinar. Proin nec odio id libero fringilla imperdiet ut et est. Sed cursus mauris vel mi semper vulputate et a velit.<x-ref>Chapman2006</x-ref>
 
</p>
 
<p>
 
Vestibulum lorem ligula, convallis non accumsan tempus, eleifend in turpis. Nulla faucibus urna quam, vitae fringilla augue consectetur auctor. Curabitur nec aliquam felis, cursus auctor nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc lacinia enim eget nisl mollis fermentum. Nulla dapibus, lectus nec commodo fermentum, velit quam luctus ex, et sagittis odio elit non quam. Nulla vel enim euismod, egestas nulla a, tristique risus. Phasellus convallis quis sapien in imperdiet. Ut eu quam lacus.
 
</p>
 
<p>
 
Phasellus volutpat nibh eget consectetur sollicitudin. Fusce lobortis sapien nisi, non congue metus malesuada vel. Donec eu risus congue odio ullamcorper iaculis. Ut dictum ultrices est, nec feugiat augue iaculis at. In bibendum lacus enim, eget sodales purus varius a. Aliquam feugiat risus eu aliquet gravida. Ut sed dictum justo, vulputate condimentum massa. Proin nec tempus augue. Curabitur rhoncus nisl tortor, eu pulvinar tortor aliquam sit amet. Etiam eleifend condimentum semper. Pellentesque aliquet consequat pellentesque. Suspendisse cursus aliquam nisi, et molestie neque eleifend vel.
 
</p>
 
<p>
 
Integer non convallis est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla maximus semper metus, ut convallis enim congue finibus. Nam ut mollis enim. Proin placerat consequat justo, quis porttitor libero. Nullam volutpat est ut eros eleifend, tincidunt tempor lacus pulvinar. Sed interdum eu risus in eleifend. Sed dui nunc, semper non tristique in, sagittis non urna. Sed tincidunt tristique ipsum, in scelerisque tellus maximus in. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
 
</p>
 
<p>
 
Vestibulum sit amet nisi a ipsum tempus ultricies quis sed enim. Aenean luctus tempus risus vel mollis. Aenean eleifend nibh eros, eu pretium arcu laoreet et. Curabitur id tortor eu orci imperdiet scelerisque eu vitae velit. Quisque fermentum enim velit, at tempus velit ullamcorper eu. Sed aliquam mattis velit eu accumsan. Quisque non vulputate dui, vel euismod orci. Integer diam ipsum, laoreet nec hendrerit vel, posuere vel neque. Sed eleifend dolor eu posuere sodales. Nam in ipsum id ligula malesuada consequat scelerisque eu tellus. Fusce sit amet accumsan nunc, et laoreet lorem. Vestibulum pulvinar, metus sit amet pretium imperdiet, est arcu rutrum dolor, ac pharetra nulla ante nec ex.
 
</p>
 
</div>
 
 
<div id="references"></div>
 
</body>
 
 
</html>
 

Revision as of 19:08, 12 September 2015

Short introduction

Bacon ipsum dolor amet kielbasa ea boudin pig picanha anim. Jowl ullamco short ribs turducken enim in. Cillum shankle ut in t-bone meatball aliqua sed. Tempor ad non nostrud veniam chicken biltong meatball aliqua tri-tip lorem exercitation. Excepteur quis sausage irure incididunt andouille deserunt duis alcatra. Veniam fatback non, pork nisi dolor pancetta ullamco shank sed officia exercitation commodo. In tail eu exercitation, dolor pariatur capicola consequat.

Aliqua sausage turducken, reprehenderit culpa chicken capicola frankfurter spare ribs proident brisket porchetta. Bresaola in kevin corned beef, dolor aliquip consectetur. Porchetta pastrami beef ribs ex spare ribs pariatur corned beef alcatra kevin filet mignon laboris dolore jerky nulla. Cillum short ribs tongue laboris. Nulla adipisicing ut esse non ut veniam. Consectetur cupim jerky ullamco. Jerky brisket incididunt in.

Actual introduction

Aliqua xxdh001xx sausage turducken, reprehenderit culpa chicken capicola frankfurter spare ribs proident brisket porchetta. Bresaola in kevin corned beef, dolor aliquip consectetur. Porchetta pastrami beef ribs ex spare ribs pariatur corned beef alcatra kevin filet mignon laboris dolore jerky nulla. Cillum short ribs tongue laboris. Nulla adipisicing ut esse non ut veniam. Consectetur cupim jerky ullamco. Jerky brisket incididunt in. Turkey turducken dolor tempor tail, in sunt do kevin beef ribeye. Laborum frankfurter pig, consequat leberkas chicken drumstick ut short ribs. Pancetta magna voluptate sausage pork chop ut ipsum officia consectetur bresaola mollit beef ham hock quis deserunt. Sed magna sunt venison capicola boudin cow anim t-bone salami cupidatat kevin shoulder chuck. Landjaeger mollit swine, in meatball ut cupidatat sed jowl dolore tail laboris voluptate beef sirloin. Pork chop magna shoulder tempor pork. Pork chop tenderloin veniam venison pariatur nulla, ut quis sunt salami cupidatat adipisicing irure ribeye short ribs. Et do excepteur quis proident ipsum pork chop aliquip mollit prosciutto cow cillum. Turkey alcatra leberkas chicken ipsum dolor. Fugiat ea beef filet mignon tongue cow cupim ball tip voluptate eiusmod pork chop. Jerky leberkas boudin nostrud, ut ullamco aliqua frankfurter cupidatat pariatur labore.

Aliqua sausage turducken, reprehenderit culpa chicken capicola frankfurter spare ribs proident brisket porchetta. Bresaola in kevin corned beef, dolor aliquip consectetur. Porchetta pastrami beef ribs ex spare ribs pariatur corned beef alcatra kevin filet mignon laboris dolore jerky nulla. Cillum short ribs tongue laboris. Nulla adipisicing ut esse non ut veniam. Consectetur cupim jerky ullamco. Jerky brisket incididunt in. Turkey turducken dolor tempor tail, in sunt do kevin beef ribeye. Laborum frankfurter pig, consequat leberkas chicken drumstick ut short ribs. Pancetta magna voluptate sausage pork chop ut ipsum officia consectetur bresaola mollit beef ham hock quis deserunt. Sed magna sunt venison capicola boudin cow anim t-bone salami cupidatat kevin shoulder chuck. Landjaeger mollit swine, in meatball ut cupidatat sed jowl dolore tail laboris voluptate beef sirloin. Pork chop magna shoulder tempor pork. Pork chop tenderloin veniam venison pariatur nulla, ut quis sunt salami cupidatat adipisicing irure ribeye short ribs. Et do excepteur quis proident ipsum pork chop aliquip mollit prosciutto cow cillum. Turkey alcatra leberkas chicken ipsum dolor. Fugiat ea beef filet mignon tongue cow cupim ball tip voluptate eiusmod pork chop. Jerky leberkas boudin nostrud, ut ullamco aliqua frankfurter cupidatat pariatur labore.

Aliqua sausage turducken, reprehenderit culpa chicken capicola frankfurter spare ribs proident brisket porchetta. Bresaola in kevin corned beef, dolor aliquip consectetur. Porchetta pastrami beef ribs ex spare ribs pariatur corned beef alcatra kevin filet mignon laboris dolore jerky nulla. Cillum short ribs tongue laboris. Nulla adipisicing ut esse non ut veniam. Consectetur cupim jerky ullamco. Jerky brisket incididunt in. Turkey turducken dolor tempor tail, in sunt do kevin beef ribeye. Laborum frankfurter pig, consequat leberkas chicken drumstick ut short ribs. Pancetta magna voluptate sausage pork chop ut ipsum officia consectetur bresaola mollit beef ham hock quis deserunt. Sed magna sunt venison capicola boudin cow anim t-bone salami cupidatat kevin shoulder chuck. Landjaeger mollit swine, in meatball ut cupidatat sed jowl dolore tail laboris voluptate beef sirloin. Pork chop magna shoulder tempor pork. Pork chop tenderloin veniam venison pariatur nulla, ut quis sunt salami cupidatat adipisicing irure ribeye short ribs. Et do excepteur quis proident ipsum pork chop aliquip mollit prosciutto cow cillum. Turkey alcatra leberkas chicken ipsum dolor. Fugiat ea beef filet mignon tongue cow cupim ball tip voluptate eiusmod pork chop. Jerky leberkas boudin nostrud, ut ullamco aliqua frankfurter cupidatat pariatur labore. Aptabody

Important graph
Bacon ipsum dolor amet kielbasa ea boudin pig picanha anim.Jowl ullamco short ribs turducken enim in. Cillum shankle ut in t-bone meatball aliqua sed. Tempor ad non nostrud veniam chicken biltong meatball aliqua tri-tip lorem exercitation. Excepteur quis sausage irure incididunt andouille deserunt duis alcatra. Veniam fatback non, pork nisi dolor pancetta ullamco shank sed officia exercitation commodo. In tail eu exercitation, dolor pariatur capicola consequat.

Short introduction

“The sea is everything. […] The sea is the vast reservoir of Nature. The globe began with sea, so to speak”, Nemo said while the “Nautilus” was cruising with a school of hammerhead sharks deep beneath the waves.

And the captain was right. Deep in the ocean billions of years ago the miracle of nature took place as a pool of small molecules evolved to self-replicating lifeforms. The flagship role in this development was probably taken by the most versatile class of molecules in the history of life: RNA.

Seemingly random nucleotides happened to be in the right order to form the first biocatalysts that made life on the blue planet possible. Today we know those miracles of nature as ribozymes. Inspired by this, humanity took evolution into their own hands to create aptamers – nucleic acids capable of encaging molecules. This allows for the detection of virtually anything. Still this process has been tedious and time consuming much like fishing with a rod in an ocean. We want to revolutionize this former evolutionary process and want to make it swift like a shark tracking down its prey.

Yet to really bring out the strengths of these simple yet powerful molecules just comprised of A, U, C and G we want to combine aptamers and ribozymes to create a toolset for the synthetic biologist to create allosteric ribozymes able to sense a variety of molecules. Therefore, we hope to introduce the true origins of life and the capabilities of functional RNA to iGEM.

Join us as we sail forth into new waters of synthetic biology.

Further content

Test
Test
Notebook

Supporting iGEM Team Paris Bettencourt

iGEM Paris Bettencourt has set up a visual databse that should help various iGEM teams collaborate and find common ground. In that database all teams can enter techniques, keywords, organism and many more thev are knowdledgeable in or have been working on. As common dots are connected automatically, it's easy so see, whom to ask for a collaboration.
Though we came a little late to the party, we really loved the idea and hoped, that the database has helped various teams!

"Rhizi is an open-sourced web of knowledge where nodes are sources of information (e.g. scientific articles, questions, blog posts) and edges are the links between them. The goal of Rhizi is to create information rich links between knowledge, open questions and ideas, through encouraging users to vote, comment, and create new relationships."

Collecting impressions from the community

It’s done. We’ve finally decided upon a logo. It’s beautiful, it’s blue, it’s fishy *wink*. The next step was to choose a color scheme and a general style for the wiki. As we feared that our own ideas might be too similar we thought of asking a broader public how they would design a website based on our logo. In order to do so, we headed to the ’Neckarwiese’. During summer, a big part of Heidelbergs population decideds to go there and enjoy the sun, have a BBQ or just relax – so we caught them off guard.

We have had prepared a little presentatio with which we introduced them to iGEM and Synthetic Biology. Afterwards we explained them what we planned on doing, showed them our logo and asked, how they would design a website, based on what they’ve just heard. The general consens was to go for a blue theme, maybe add a little algae green and generally stick to maritime iconography. Unexpectedly we actually met someone who knew his stuff: Natalie, a student of the history of arts from Berlin. She gave us useful advice on how play with the different colors, what to avoid and even added a little touch of history to it. Lucky catch!

With fresh ideas we headed back to the lab and continued our experiments, being envious of all the people that could continue to sleep in the sun.

We’ve been lucky and actually met someone knowledgable in arts. Her name is Nati and she studies the history of art in Berlin.

plasmid.js - Interactive plasmids

It is always cubersome to create vector maps, and then putting the static images on the web. We thought it would be a lot more fun to just autogenerate interactive plasmids dynamically from data. That's why we wrote plasmid.js, a JavaScript library to generate interactive vector maps for web pages.

Why should you use it?

It is dead simple to use!

The includes

<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
<scripr src="raphael.js" type="text/javascript" charset="utf-8"></script>
<script src="plasmid.js" type="text/javascript" charset="utf-8"></script>

The placeholders

<div id="canvas"></div>
<div id="info"></div>
or, if you are working with an iGEM wiki
{{Heidelberg/js/plasmid.js}}

The JavaScript
$(function() {
    // You could also load your data via AJAX
    var inserts = [
    {
        size: 40, // Size in angles! (there are 360 of them available)
        color: "#0F0", // You can use any valid css format
        label: "GFP", // The label to display in the legend
        description: "Green Fluorescent Protein", // The description to put in the infobox
        gap: false, // If not given this defaults to true
        promoter: true // This is a promoter, defaults to false
    },
    {
        size: 10,
        color: "#F00",
        label: "Brow Fox",
        description: "He likes jumping over dogs.",
        gap: true
    },
    {
        size: 46,
        color: "#00F",
        label: "Lazy Dog",
        description: "He likes beeing jumpt over."
    },
    {
        size: 19,
        color: "#0FF",
        label: "Short one",
        description: "Wirklich, Wirklich kurz nun auch wieder nicht.",
        promoter: true
    },
    {
        size: 1,
        color: "#FF0",
        label: "Even shorter one",
        description: "Und knackig",
        gap: false,
        promoter: true
    }];

    // Required parameters are: id of the canvas, id of the infobox,
    // the inserts and the diameter of the plasmid. Note, that there
    // is spacing and a legend added (default: width + 575, height + 50)
    // These values can be changed easily, see below.
    var plasmid = new Plasmid('canvas', 'info', inserts, 500);
    plasmid.draw();
});

Plus, it also looks great!

Further options

There are two ways to specify optional settings; you can either pass them via the constructor or set the corresponding attributes after the object is created (it's JavaScript, ...). Below you can see a annotated version of the constructor.

function Plasmid(canvas, infobox, inserts, diameter, legendWidth, insertWidth, defaultText, insertBoxAttr, fontSize, spacing, startAngle) {
    // Are all required parameters given?
    // [...]
    this.canvas = canvas; // The id of the canvas placeholder div
    this.inserts = inserts; // The array whith the given inserts (see above)
    this.diameter = diameter; // The diameter of the plasmid, this is *not* the size of the canvas
    this.infobox = infobox; // The id of the infobox to put the descriptions in

    // Set sane defaults for optional parameters
    this.legendWidth = legendWidth || 500; // The width of the legend
    this.radiusOfInsertBox = insertWidth || diameter / 13; // how "thick" the boxes of the inserts are drawn
    this.defaultText = defaultText || "Hover over an insert to get more information!"; // default text in infobox
    this.fontSize = fontSize || 20; // The font size for legend entries
    this.spacing = spacing || 25; // spacing is the number of pixels put above and below the plasmid and left to the legend
    this.startAngle = startAngle || -40; // The angle at which the first plasmid starts
    this.insertBoxAttr = insertBoxAttr || { // The attributes to set on the boxes representing an insert
        stroke: "#666",
        opacity: 0.7,
        "stroke-width": 1,
        "stroke-linejoin": "round"
    };

    // [...]
}