snipette-datpro-site/src/index.htm

257 lines
17 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Blogging With Data</title>
<link rel="stylesheet" href="style.css" />
<!-- Fonts: Crimson Text, Abhaya Libre, Open Sans -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Abhaya+Libre:wght@800&family=Crimson+Text&family=Open+Sans:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
</head>
<body class="bg-blue-100 font-serif">
<div class="bg-blue-800 uppercase text-lg text-blue-900 p-5">
Blogging With Data Course
</div>
<div class="bg-blue-800 p-10 text-center">
<img src="img/penknife.png" class="w-1/2 sm:w-auto md:w-full lg:w-64 mx-auto mb-10" />
<p class="text-gray-300 text-4xl lowercase font-heading font-extrabold">Data science <span class="text-blue-300">with a literary touch</span></p>
</div>
<div class="bg-blue-900 text-gray-400 p-10 text-center uppercase font-sans">
<p>You've completed your <span class="text-yellow-400">data science</span> project. <a href="#backed-by-experience" class="bg-blue-700 text-gray-400 hover:bg-yellow-400 hover:text-black px-2 py-1 mx-1">What next?</a></p>
</div>
<div class="max-w-4xl mx-auto">
<div class="flex flex-wrap mx-auto">
<div class="sm:w-full md:w-1/2 lg:w-1/3">
<img src="img/professor.png" />
</div>
<div class="sm:w-full md:w-1/2 lg:w-2/3 p-10">
<a name="backed-by-experience">
<h1 class="text-2xl font-sans">Backed by Experience <i class="icon-paperclip"></i></h1>
</a>
<p class="py-2 text-lg">With a combined <mark class="bg-blue-200 text-black px-2">10+ years</mark> of experience in science communication, we have the skills to mentor you through the process of <mark class="bg-blue-200 text-black px-2">sharing your work</mark> in an articulate and accessible way.</p>
<p class="py-2"> As editors of Snipette magazine and assistant physics professor at Georgia Gwinnett University, weve been involved in intensive editing projects with authors from both ends of the spectrum: professional researchers working to communicate their technical work, and high school and college students eager to further their learning process through writing.</p>
</div>
</div>
<div class="flex flex-wrap sm:flex-row md:flex-row-reverse mx-auto bg-blue-200">
<div class="sm:w-full md:w-1/2 lg:w-1/3">
<img src="img/naturalist.png" />
</div>
<div class="sm:w-full md:w-1/2 lg:w-2/3 p-10">
<a name="stories-before-statistics">
<h1 class="text-2xl font-sans">Stories before Statistics <i class="icon-flask"></i></h1>
</a>
<p class="py-2 text-lg">Theres no point in science writing if people arent <mark class="bg-blue-100 text-black px-2">interested in reading it</mark>, which is why we specialise in adding a humorous touch—infusing technical writing with a dash of <mark class="bg-blue-100 text-black px-2">literary flair</mark> to help explain complex issues.</p>
<p class="py-2">Anyone can describe their work to their peers—but reaching the general public is harder. Our program will help you draw parallels with familiar concepts to better explain complicated topics in a short space. You will also work on grounding your findings in everyday experience and answering the question: how is this relevant to the layperson?</p>
</div>
</div>
<div class="flex flex-wrap mx-auto">
<div class="sm:w-full md:w-1/2 lg:w-1/3">
<img src="img/teacher.png" />
</div>
<div class="sm:w-full md:w-1/2 lg:w-2/3 p-10">
<a name="learning-through-teaching">
<h1 class="text-2xl font-sans">Learning through Teaching <i class="icon-edit"></i></h1>
</a>
<p class="py-2 text-lg">Theres no better way to <mark class="bg-blue-200 text-black px-2">understand a field</mark> than to explain it to someone who knows nothing—a fact observed by no less than the brilliant physicist <mark class="bg-blue-200 text-black px-2">Richard Feynman</mark> himself.</p>
<p class="py-2">Articulating your process work and findings for a lay audience will help you understand your own process better and streamline how things get done. On top of that, making your work accessible will spread awareness beyond your niche and help make you and your work more known to a wider audience.</p>
</div>
</div>
</div>
<div class="bg-blue-200 flex flex-wrap sm:my-16 max-w-4xl mx-auto sm:shadow-xl border-8 border-blue-900">
<div class="xs:w-auto sm:w-1/2 md:w-1/3 lg:w-1/3 p-4 sm:p-8 mx-auto font-sans">
<a name="pricing">
<h2 class="text-center uppercase">Price</h2>
</a>
<p class="text-center text-6xl"><span class="text-base">$</span>49</p>
<p class="text-sm text-center text-green-900 font-bold"><del class="text-red-900">$99</del> Early bird offer</p>
<p class="text-center">
<a href="#signup-form" class="text-base mt-4 p-4 border-2 border-solid border-blue-900 text-blue-900 hover:border-blue-700 hover:text-blue-700 uppercase rounded w-full inline-block">Join the waitlist</a>
</p>
<p class="text-sm text-blue-800 text-center">The entire course lasts 6-8 weeks</p>
</div>
<div class="xs:w-full sm:w-1/2 md:w-2/3 lg:w-2/3 p-4 sm:p-8 flex flex-col items-center mx-auto">
<h2 class="text-center uppercase font-sans">You will learn to:</h2>
<ul class="list-chevron my-auto p-4 sm:p-0 text-lg">
<li class="m-2">Formulate and present your conclusions</li>
<li class="m-2">Communicate your work to the general public by placing it within the larger context</li>
<li class="m-2">Develop your data communication skills and become a content creation expert</li>
</ul>
</div>
</div>
<div class="py-16 max-w-4xl mx-auto text-justify">
<h1 class="text-3xl text-center mb-4 font-heading font-extrabold">Pre-requisites</h1>
<div class="flex flex-col md:flex-row">
<figure class="w-full md:w-1/2 lg:w-2/3 inline-block my-auto">
<img src="img/python-console.png" class="shadow-xl rounded-lg"/>
</figure>
<div class="w-full md:w-1/2 lg:w-1/3 p-8 text-lg">
<p>Since this program is intended mainly for the communication aspects of data science, you are expected to have a data science project ready to be presented before applying. The topic, methods, and datasets will be left to your discretion—we come in to help you polish things up and lay it all out. Towards this, we will be screening participants with a quick questionnaire about their projects.</p>
</div>
</div>
</div>
<div class="px-4 py-16 text-center bg-blue-900 text-gray-100">
<a name="our-team">
<h1 class="text-3xl text-center font-heading font-extrabold">Our Team</h1>
</a>
<ul class="m-4 flex flex-wrap flex-row justify-center text-lg font-sans">
<li class="inline-block p-8 hover:opacity-75 cursor-pointer">
<figure class="bg-yellow-500 w-40 h-40 rounded-full mb-4"></figure>
<span>Dr. Skanda Vivek</span>
</li>
<li class="inline-block p-8 hover:opacity-75 cursor-pointer">
<figure class="bg-green-500 w-40 h-40 rounded-full mb-4"></figure>
<span>Manasa Kashi</span>
</li>
<li class="inline-block p-8 hover:opacity-75 cursor-pointer">
<figure class="bg-purple-500 w-40 h-40 rounded-full mb-4"></figure>
<span>Badri Sunderarajan</span>
</li>
<li class="inline-block p-8 hover:opacity-75 cursor-pointer">
<figure class="bg-orange-500 w-40 h-40 rounded-full mb-4"></figure>
<span>Nia Chari</span>
</li>
<li class="inline-block p-8 hover:opacity-75 cursor-pointer">
<figure class="bg-blue-500 w-40 h-40 rounded-full mb-4"></figure>
<span>Akil Ravi</span>
</li>
</ul>
<p class="max-w-4xl mx-auto font-sans">Our team has unique expertise at the interface of data science and content creation. We think these are life-changing skills that enable your dream job: following your passions, showcasing what you learn along the way, and making a sustainable income in the process.</p>
</div>
<div class="py-16 max-w-4xl mx-auto text-justify px-4 lg:px-0">
<h1 class="text-3xl text-center my-4 font-heading font-extrabold">How it works</h1>
<p class="text-lg">This course is based on our experience in private informal sessions and the <a href="https://write.snipettemag.com" class="text-blue-900 underline">Snipette Writers' Programme</a>. We understand that no two peoples' ideas or problems or finished products will be identical; hence a lot of how the course works depends on your personal needs. However, here's what will remain constant:</p>
<ul class="my-4 text-lg">
<li class="flex flex-col md:flex-row items-center md:items-stretch">
<div class="py-4 w-8 order-1 md:order-2">
<p class="bg-blue-700 text-gray-200 h-8 w-8 text-center rounded-full">1</p>
<div class="w-0 h-full border border-blue-700 mx-auto hidden md:block"></div>
</div>
<div class="md:w-1/2 p-4 order-2 md:order-1">
<img width=640 height=480 />
</div>
<div class="md:w-1/2 md:pl-4 flex items-center order-3">
<p>Your workplace will begin as a Google Docs sheet. This is where you will be brainstorming ideas and figuring out what area you want to research. In the meantime, you will also be in touch with the team over email.</p>
</div>
</li>
<li class="flex flex-col md:flex-row-reverse items-center md:items-stretch">
<div class="py-4 w-8 order-1 md:order-2">
<p class="bg-blue-700 text-gray-200 h-8 w-8 text-center rounded-full">2</p>
<div class="w-0 h-full border border-blue-700 mx-auto hidden md:block"></div>
</div>
<div class="md:w-1/2 p-4 order-2 md:order-1">
<img width=640 height=480 />
</div>
<div class="md:w-1/2 md:pr-4 flex items-center order-3">
<p>Depending on your project, you may also use a Google Colab notebook to document the technical side of your project including data analytics, methods, and visualization.</p>
</div>
</li>
<li class="flex flex-col md:flex-row items-center md:items-stretch">
<div class="py-4 w-8 order-1 md:order-2">
<p class="bg-blue-700 text-gray-200 h-8 w-8 text-center rounded-full">3</p>
<div class="w-0 h-full border border-blue-700 mx-auto hidden md:block"></div>
</div>
<div class="md:w-1/2 p-4 order-2 md:order-1">
<img width=640 height=480 />
</div>
<div class="md:w-1/2 md:pl-4 flex items-center order-3">
<p>We will guide you in constructing a compelling data based story based on your analyses, going back and forth with our editors to discuss the finer points of the piece.</p>
</div>
</li>
<li class="flex flex-col md:flex-row-reverse items-center md:items-stretch">
<div class="py-4 w-8 order-1 md:order-2">
<p class="bg-blue-700 text-gray-200 h-8 w-8 text-center rounded-full">4</p>
<div class="w-0 h-full border border-blue-700 mx-auto hidden md:block"></div>
</div>
<div class="md:w-1/2 p-4 order-2 md:order-1">
<img width=640 height=480 />
</div>
<div class="md:w-1/2 md:pl-4 flex items-center order-3">
<p>Meanwhile, you will probably read up on related topics online, to build out your story and help link your project with them and add to the depth of the article.</p>
</div>
</li>
<li class="flex flex-col md:flex-row items-center md:items-stretch">
<div class="py-4 w-8 order-1 md:order-2">
<p class="bg-blue-700 text-gray-200 h-8 w-8 text-center rounded-full">5</p>
<div class="w-0 h-full border border-blue-700 mx-auto hidden md:block"></div>
</div>
<div class="md:w-1/2 p-4 order-2 md:order-1">
<img width=640 height=480 />
</div>
<div class="md:w-1/2 pl-4 flex items-center order-3">
<p>Once your conclusions are ready, you will move back to Google Docs to present your findings.</p>
</div>
</li>
<li class="flex flex-col items-center">
<div class="py-4 w-8">
<div class="w-0 h-full border border-blue-700 mx-auto hidden md:block"></div>
<p class="bg-blue-700 text-gray-200 h-8 w-8 text-center rounded-full">6</p>
</div>
<p class="text-lg mt-4">
When all is done, you will be ready for publication! This happens as two different versions in two publications:
</p>
<ul class="my-4 md:mx-4 text-lg flex flex-col md:flex-row space-y-8 md:space-y-0 md:space-x-8">
<li class="p-4 bg-blue-200 border border-blue-800 w-full md:w-1/2">
<h3 class="text-center uppercase my-4 font-sans text-blue-800">Emergent Phenomena</h3>
<p class="m-2"><a href="https://medium.com/emergent-phenomena" target="_blank" class="text-blue-800 underline">Emergent Phenomena</a> is a space for innovative work at the interface of data, storytelling, and society, filling a much-needed niche for in-depth analyses on societal issues backed by data.</p>
<p class="m-2">For this publication, you will write a more technical overview of your work, along with graphs, stats, and links to raw data. This is aimed at being shared with the data science community.</p>
</li>
<li class="p-4 bg-orange-200 border border-orange-800 w-full md:w-1/2">
<h3 class="text-center uppercase my-4 font-sans text-orange-800">Snipette</h3>
<p class="m-2"><a href="https://www.snipettemag.com" target="_blank" class="text-orange-800 underline">Snipette</a> is a magazine seeking to explain the world in a fun and accessible way. It offers both web and print versions, and uses literary techniques like suspense and metaphor to get the point across.</p>
<p class="m-2">For this publication, you will write general-purpose article which gives a broad overview of your chosen topic and provides context for where your work fits in. This is aimed at spreading awareness of the topic and your findings to the general public.</p>
</li>
</ul>
</li>
</ul>
<p class="text-lg">Once both versions of your article are published, you will receive a certificate of completion from Snipette/Emergent Phenomena and a print copy of the edition in which your article appears. The whole process is expected to take 6-8 weeks. Given that the course is wholly unique and tailored specifically to each participant, timings may vary from person to person.</p>
</div>
<div class="p-4 pb-20 max-w-4xl mx-auto text-center">
<h1 class="text-3xl text-center font-heading font-extrabold">Sample Certificate</h1>
<div class="max-w-md mx-auto">
<img class="bg-orange-800 mt-8" width="640" height="480"/>
</div>
</div>
<div class="bg-blue-900 text-blue-100 py-8">
<div class="max-w-4xl mx-auto flex flex-wrap justify-center">
<img src="img/pup-with-penknife.png" class="w-auto h-48">
<div class="w-auto my-auto sm:mx-auto md:ml-10">
<a name="signup-form"></a>
<div class="w-auto flex flex-wrap justify-center sm:justify-start">
<p class="text-3xl text-blue-200 mt-auto text-center sm:text-left m-2 font-sans">Ready to give us a spin?</p>
<a href="//airtable.com/shrfr7646K3LUFMIG" target="_blank" class="text-base m-4 p-4 border-2 border-solid border-blue-500 text-blue-500 uppercase rounded font-sans">Join the waitlist</a>
</div>
<p class="text-blue-200 text-center sm:text-left mx-3 mt-0 mb-auto">Or, email <a href="mailto:editors@snipettemag.com" class="text-blue-300">editors@snipettemag.com</a> to know more</p>
</div>
</div>
<!-- Airtable form -->
<script src="https://static.airtable.com/js/embed/embed_snippet_v1.js"></script>
<iframe class="airtable-embed airtable-dynamic-height max-w-4xl mx-auto my-8 rounded-lg" src="https://airtable.com/embed/shrfr7646K3LUFMIG?backgroundColor=cyan" frameborder="0" onmousewheel="" width="100%" height="1132" style="background: transparent; border: 1px solid #ccc;"></iframe>
<!-- End Airtable form -->
</div>
<div class="bg-black text-gray-100 p-4 text-xs font-sans">
&copy; Snipette 2020
<div class="float-right">
<a href="//www.snipettemag.com">Home</a>
<a href="//www.snipettemag.com/introducing-snipette">About</a>
<a href="//facebook.com/snipette">Facebook</a>
<a href="//twitter.com/snipettemag">Twitter</a>
<a href="//squeet.me/u/snipette">Mastodon</a>
<a href="//instagram.com/snipettemag">Instagram</a>
<a href="//liberapay.com/snipettemag">Donate via Liberapay</a>
</div>
</div>
</body>
</html>