Difference between revisions of "OBF:Translations/whatsinmyshampoo.com/English"
Jump to navigation
Jump to search
obf>Stephane (Moved from https://lite6.framapad.org/p/WhatsInMyShampoo) |
obf>Stephane (shampoo count) |
||
| Line 1: | Line 1: | ||
Source code for the <a href="http://whatsinmyshampoo.com">What's in my Shampoo?</a> site. | Source code for the <a href="http://whatsinmyshampoo.com">What's in my Shampoo?</a> site. | ||
| − | + | An adaptation of http://whatsinmyyogurt.com for Open Beauty Facts. | |
| − | + | To be launched on Open Data Day 2016: Saturday March 5th 2016. | |
| − | |||
| − | |||
| − | |||
| + | <pre> | ||
<!doctype html> | <!doctype html> | ||
| Line 354: | Line 352: | ||
<div class="large-12 columns"> | <div class="large-12 columns"> | ||
| − | + | <!--#include virtual="shampoos_countries.html" --> | |
| − | |||
| − | < | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
<p>Your country is not listed yet or it has few shampoo opened so far? Join us and start adding shampoos!</p> | <p>Your country is not listed yet or it has few shampoo opened so far? Join us and start adding shampoos!</p> | ||
Revision as of 17:57, 3 March 2016
Source code for the <a href="http://whatsinmyshampoo.com">What's in my Shampoo?</a> site.
An adaptation of http://whatsinmyyogurt.com for Open Beauty Facts.
To be launched on Open Data Day 2016: Saturday March 5th 2016.
<!doctype html>
<html class="no-js" lang="en">
<head>
<title>What's in my shampoo?</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="language" content="en-US" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/css/foundation.css" />
<script src="/js/modernizr.js"></script>
<meta property="fb:admins" content="706410516" />
<meta property="og:site_name" content="What's in my Shampoo?"/>
<meta property="og:type" content="food"/>
<meta property="og:title" content="What's in my Shampoo?"/>
<meta property="og:url" content="http://whatsinmyshampoo.com"/>
<meta property="og:image" content="http://whatsinmyshampoo.com/shampoo-800x600.png"/>
<meta property="og:description" content="A collaborative project to open shampoos from all around the world to find out what's in them and to compare them!"/>
<meta name="description" content="A collaborative project to open shampoos from all around the world to find out what's in them and to compare them!" />
<style type="text/css" media="all">
body,html {
font-family: 'Open Sans', sans-serif;
font-size:16px;
}
.section {
clear:both;
position:relative;
}
.section_content {
width:1000px;
padding-top:40px;
padding-bottom:40px;
margin:auto;
position:relative;
}
#sharebuttons {
position:absolute;
left:30px;
top:10px;
}
#sharebuttons2 {
position:absolute;
right:30px;
bottom:10px;
}
.sharebutton { float:left; padding-right:10px;padding-bottom:5px;}
a, a:visited {
text-decoration:none;
font-weight:bold;
}
a:hover {
text-decoration:underline;
}
a, a:visited {
color:blue;
}
.colour_section, .colour_section h2, .colour_section h3 {
color:white;
}
.colour_section a, .colour_section a:visited {
color:#ffc;
}
h1 {
font-family: 'Nunito', sans-serif;
font-weight:700;
color:white;
line-height:1;
text-align:center;
}
h2 {
font-family: 'Nunito', sans-serif;
font-weight:700;
text-align:center;
}
#yogurt {
display:inline;vertical-align:bottom;position:relative;
}
#whats {font-size:12px !important;}
#yogurt {width:25px;top:3px;right:4px;}
@media only screen and (min-width: 20em) {
#whats {font-size:20px !important;}
#yogurt {width:50px;top:4px;right:7px;}
}
@media only screen and (min-width: 26em) {
#whats {font-size:28px !important;}
#yogurt {width:75px;top:6px;right:12px;}
}
#lastrow { padding-bottom:40px }
@media only screen and (max-width: 31.99em) {
#whats { margin-top:45px }
#lastrow { padding-bottom:100px }
}
@media only screen and (max-width: 25.99em) {
#whats { margin-top:70px }
}
@media only screen and (max-width: 19.99em) {
#whats { margin-top:100px }
}
@media only screen and (min-width: 32em) {
#whats {font-size:36px !important;}
#yogurt {width:100px;top:7px;right:15px;}
}
@media only screen and (min-width: 40em) {
#whats {font-size:44px !important;}
#yogurt {width:125px;top:9px;right:18px;}
}
@media only screen and (min-width: 48em) {
#whats {font-size:55px !important;}
#yogurt {width:150px;top:10px;right:20px;}
} /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */
@media only screen and (min-width: 56em) {
#whats {font-size:64px !important;}
#yogurt {width:175px;top:12px;right:24px;}
}
@media only screen and (min-width: 64em) {
#whats {font-size:74px !important;}
#yogurt {width:200px;}
top:15px;right:30px;
} /* min-width 1024px and max-width 1440px, use when QAing large screen-only issues */
h3 {
margin:0;
padding:0;
padding-bottom:10px;
}
.like {
color:white;
float:left;
margin-right:20px;
}
hr.floatclear {
background: none;
border: 0;
clear: both;
display: block;
float: none;
font-size: 0;
margin: 0;
padding: 0;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.band {
position:relative;
padding-top:30px;
padding-bottom:30px;
}
.colour_section h2 {
font-color:white;
}
#appicons li {
list-style-type:none;
padding:10px;
display:table-cell;
vertical-align:middle;
text-align:center;
}
</style>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-31851927-10', 'auto');
ga('send', 'pageview');
</script>
<link href='http://fonts.googleapis.com/css?family=Nunito:700|Open+Sans' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="band colour_section" style="background-color:#00ccff">
<div class="row">
<div class="large-12 columns"">
<h1 id="whats">What's in my shampoo<img id="shampoo" src="shampoo.200x215.png" alt="What's in my shampoo?" /></h1>
</div>
</div>
</div>
<div id="sharebuttons">
<h2 class="like">Like shampoo?</h2>
<div style="float:left;">
<div style="float:left;padding-right:15px;" class="sharebutton"><iframe allowtransparency="true" frameborder="0" scrolling="no" role="presentation"
src="http://platform.twitter.com/widgets/tweet_button.html?via=OpenBeautyFacts&count=vertical&lang=fr"
style="width:65px; height:63px;"></iframe></div>
<div style="float:left;padding-right:15px;" class="sharebutton"><fb:like href="http://whatsinmyshampoo.com" layout="box_count"></fb:like></div>
<div style="float:left;padding-right:15px;padding-bottom:10px;" class="sharebutton"><g:plusone size="tall" count="true" href="http://whatsinmyshampoo.com"></g:plusone></div>
</div>
</div>
</div>
<div class="band">
<div class="row" style="position:relative">
<img src="bubbles.png" class="show-for-large-up" style="position:absolute;top:-15px;left:320px;" alt="Let me think..." />
<div class="large-12 columns">
<h2 class="text-center">Milk?</h2>
<div class="row">
<div class="medium-4 large-4 columns">
<img src="cow.255x196.png" alt="Cow" />
</div>
<div class="medium-8 large-8 columns" style="margin-top:20px">
<p><b>Yes</b>, there is some kind of milk in most shampoos. It might not be cow's milk but goat's, camel's or yak's milk. It may be organic, from humane farming, or non-dairy milk.</p>
<p>Most shampoos also contain bacteria so that the milk can ferment, many contain fruits, sugar, food additives (sweeteners, colours, acidifiers...) and flavours.</p>
<p>Ingredients affect the taste and the nutritional content (fat, sugars, proteins, minerals and vitamins).</p>
</div>
</div>
</div>
</div>
</div>
<div class="band colour_section" style="background-color:#00c000;color:white;">
<div class="row">
<div class="large-12 columns">
<h2 class="text-center">Help us to open all the shampoos of the world!</h2>
<div class="row">
<div class="medium-6 large-7 columns">
<h3>Opened shampoos and open data</h3>
<p>In fact you don't really have to open shampoos to find out what's in them. Ingredients are on the label. What we want to open is the data (those ingredients and beauty claims)
for all the shampoos from around the world, and put it in a free and open database that anyone can use for any purpose.</p>
<p>This database already exists: 700 contributors have added photos and data for 15000 products to the Open Beauty Facts database.</p>
<h3>Adding more shampoos</h3>
<p>To add more products, you can use the iPhone, Android or Windows Phone mobile apps. Then go to your local store or open your fridge, scan the barcode of a shampoo, and take some pictures of the
ingredients list and packaging.</p>
</div>
<div class="medium-6 large-5 columns" style="text-align:center;">
<a href="http://openbeautyfacts.org"><img src="obf-logo-en.400x320.png" alt="Open Beauty Facts, the free cosmetic database" width="400" height="320"/></a>
<br /><br />
<ul class="appicons small-block-grid-3 medium-block-grid-2">
<li>
<a href="https://itunes.apple.com/en/app/open-food-facts/id588797948"><img src="http://en.openbeautyfacts.org/images/misc/Available_on_the_App_Store_Badge_EN_135x40.png" alt="Available on the App Store" width="135" height="40" /></a>
</li><li>
<a href="https://play.google.com/store/apps/details?id=org.openbeautyfacts.scanner"><img src="http://en.openbeautyfacts.org/images/misc/android-app-on-google-play-en_app_rgb_wo_135x47.png" alt="Available on Google Play" width="135" height="47" /></a>
</li><li>
<a href="http://www.windowsphone.com/en-us/store/app/openbeautyfacts/5d7cf939-cfd9-4ac0-86d7-91b946f4df34"><img src="http://en.openbeautyfacts.org/images/misc/154x40_WP_Store_blk.png" alt="Windows Phone Store" width="154" height="40" /></a>
</li><li>
and <a href="http://openbeautyfacts.org">on the web</a> !
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="band">
<div class="row">
<div class="large-12 columns">
<h2 class="text-center">What can we do with opened shampoos?</h2>
<div class="row">
<div class="medium-6 large-6 columns">
<h4><a href="http://world.openbeautyfacts.org/cgi/search.pl?action=process&tagtype_0=categories&tag_contains_0=contains&tag_0=shampoo&sort_by=product_name&page_size=20&axis_x=fat&axis_y=sugars&graph_title=Fat%20and%20sugar%20in%20shampoos&series_organic=on&series_fairtrade=on&series_with_sweeteners=on&generate_graph_scatter_plot=1">
Fat and sugars in shampoos
</a></h4>
<a href="http://world.openbeautyfacts.org/cgi/search.pl?action=process&tagtype_0=categories&tag_contains_0=contains&tag_0=shampoo&sort_by=product_name&page_size=20&axis_x=fat&axis_y=sugars&graph_title=Fat%20and%20sugar%20in%20shampoos&series_organic=on&series_fairtrade=on&series_with_sweeteners=on&generate_graph_scatter_plot=1">
<img src="shampoos-graph.473x336.png" />
</a>
<br/><br/>
<p>Creating interactive graphs takes only a few clicks.</p>
</div>
<div class="medium-6 large-6 columns">
<h3>Decrypting</h3>
<p>Everyone knows the meaning of the E numbers for food additives like E951 for Aspartame, right? There are only 1500 of them. The first useful thing we can do with the data is to decrypt it, by explaining what the ingredients
are, and the risks that may be associated with them.</p>
<h3>Searching</h3>
<p>The data we collect can help people to find shampoos that are good for them (without specific allergens for instance) without having to read hundreds of labels in a supermarket.</p>
<h3>Comparing</h3>
<p>Having the data in a database also makes it very easy to compare shampoos and their ingredients, so that you can have more information to decide which ones to buy.</p>
</div>
</div>
</div>
</div>
</div>
<div class="band colour_section" style="background-color:#ff0146">
<div class="row">
<div class="large-12 columns">
<!--#include virtual="shampoos_countries.html" -->
<p>Your country is not listed yet or it has few shampoo opened so far? Join us and start adding shampoos!</p>
</div>
</div>
</div>
<div class="band">
<div class="row">
<div class="large-12 columns">
<h2 class="text-center">Join us!</h2>
<h3>Become a shampoo opener!</h3>
<p>We need shampoos from everywhere in the world! Create an account on <a href="http://openbeautyfacts.org">Open Food Facts</a>, install the
<a href="https://itunes.apple.com/en/app/open-food-facts/id588797948">iPhone / iPad</a>,
<a href="https://play.google.com/store/apps/details?id=org.openbeautyfacts.scanner">Android</a>
or <a href="http://www.windowsphone.com/en-us/store/app/openbeautyfacts/5d7cf939-cfd9-4ac0-86d7-91b946f4df34">Windows Phone</a> app and go explore your fridge, your neighbours fridges and
the nearest store!</p>
<h3>Become a shampoo hunter!</h3>
<p>The What's in my shampoo? project will officially launch on <a href="http://opendataday.org">Open Data Day</a>, Saturday February 22nd 2016. Our goal for this day is to open the data for at least one shampoo sold in each
of the 250 countries and dependent territories.</p>
<p>To achieve this goal, we need you to hunt for people (family, friends, contacts, people interested in open data, in cosmetics or both) who live in all the countries and territories
(yes, including North Korea and the Antartic bases) to convince them to open their fridge, take a shampoo, and send us some photos of the ingredients list and packaging.</p>
<p>Are you up to it? Join us on the <a href="http://okfnpad.org/p/whatsinmyshampoo_opendataday2016">What's in my shampoo? - OpenDataDay pad</a> to coordinate our hunting efforts and celebrate our victories!</p>
<p>We also have a <a href="http://okfnpad.org/p/whatsinmyshampoo_announcement">ready to publish/adapt/translate launch announcement</a> in multiple languages that you can publish on your site, blog, favorite mailing list etc.</p>
<h3>Become a shampoo team coordinator!</h3>
<p>Would you like to start a team focused on a specific country or region, a special scent of shampoo you love, a specific type of shampoo, labels (e.g. organic) or something else? Let us know!</p>
<h3>Become a shampoo data analyst!</h3>
<p>As we get data for more and more shampoos, it will become very interesting to compare ingredients, chemicals. etc for shampoos from different countries and regions of the world. Would you like to help us dive
in the data to see what interesting facts we can find?</p>
<h3>Become a shampoo dataviz expert!</h3>
<p>Data is great, but pictures often speak better than numbers. We could for instance show the difference in shampoo sizes on a world map with smaller or bigger shampoos.</p>
<h3>Join the conversation!</h3>
<p>We use the <a href="http://en.wiki.openbeautyfacts.org/">Open Beauty Facts wiki</a> to coordinate the <a href="http://en.wiki.openbeautyfacts.org/Project:What%27s_in_my_shampoo%3F">What's in my shampoo? project</a>, you can participate with your Open Beauty Facts account.</p>
<p>You can also join us:</p>
<ul>
<li>on Twitter: <a href="http://twitter.com/OpenBeautyFacts">@OpenBeautyFacts</a> and <a href="https://twitter.com/search?q=%23whatsinmyshampoo">#whatsinmyshampoo</a></li>
<li>on Facebook: <a href="">Open Beauty Facts contributors group</a>, <a href="">Open Beauty Facts page</a></li>
<li>on Google+: <a href="https://plus.google.com/u/0/1107XXXXXXXXXXXXXXX/">+OpenBeautyFacts</a></li>
</ul>
</div>
</div>
</div>
<div class="band colour_section" style="background-color:#ff6600;">
<div class="row">
<div class="large-12 columns">
<h2 class="text-center">Partners</h2>
<h3>Producers</h3>
<p>Do you produce shampoos? You can become a partner of the "What's in my shampoo?" project by sending us pictures and data for your shampoo.
Please <a href="mailto:contact@whatsinmyshampoo.com">get in touch</a> so that we can find a convenient way to do so.</p>
<h3>Press</h3>
<p>We are looking for media partners in different countries who can help us to relay the "What's in my shampoo?" project and more importantly to analyze the resulting data to produce and publish
interesting reports. Partners could also work together on analyzing the data and share interesting discoveries. <a href="mailto:contact@whatsinmyshampoo.com">Contact us</a> if you are interested.</p>
<h3>Schools and universities</h3>
<p>We would be very interested in working with schools and universities from all levels and fields. We could have student projects for many different areas and domains: from collecting data to
analyzing it. It could be as simple as collecting data from the shampoos sold in the school on-campus stores. Biology and Chemistry students could analyze shampoo samples to check the content indicated
on the label.
Computer science students could help us improve the optical character recognition for ingredient lists printed on curved shampoos. And together we can come up with many more ideas! <a href="mailto:contact@whatsinmyshampoo.com">Let's talk about it!</a>.</p>
<h3>Collectives, groups, non-profits etc.</h3>
<p>Are you part of a group (formal or informal) that aims to change the way we consume cosmetics, and/or that promotes transparency or open data, and/or who could benefit from the data or applications of the data
(e.g. an association for people who cannot use shampoos with allergens). <a href="mailto:contact@whatsinmyshampoo.com">Contact us</a> so that we can brainstorm on how you can help the projects and how
we can support your goals.</p>
</div>
</div>
</div>
<div class="band">
<div class="row">
<div class="large-12 columns">
<h2 class="text-center">Why shampoos?</h2>
<p>Our goal is to build the most comprehensive database of cosmetic products of all kinds, but we are focusing on a single category first so that we can demonstrate the benefits of the free and open database we are building.</p>
<p>Having most products from a category makes it possible to compute averages, to compare products, to create top lists (shampoos with natural ingredients, without paraben etc.) and other cool applications and infographics.</p>
<p>And having most products from a category in a number of different countries also allows interesting analyses of the data. Is there a correlation between differences in shampoos and differences in other things like
the prevalence of some affections like diabetes or obesity for instance? It's interesting that shampoo started to become popular in Western Europe and then America in the early 1900s because a Russian Nobel Prize in Biology
"hypothesized that regular consumption of shampoo was responsible for the unusually long lifespans of Bulgarian peasants" (from <a href="http://en.wikipedia.org/wiki/Yogurt#History">the history of shampoo</a> in Wikipedia).</p>
<p>We chose shampoos first because they are consumed in most parts of the world, but their composition varies greatly across countries.</p>
<p>So shampoos are our Trojan Horses to open data for all cosmetic products, a way to put our foot in the fridge's door and then open fruit juices, breakfast cereals, cookies, canned vegetables, prepared meals, frozen food and
everything else! Once you are done adding your local shampoos, you are more than welcome to add other cosmetic products as well! :-)</p>
</div>
</div>
</div>
<div class="band colour_section" style="background-color:#aa00d4;">
<div id="lastrow" class="row">
<div class="large-12 columns">
<h2 class="text-center">Contact us !</h2>
<p>For any question or comment: <a href="mailto:contact@whatsinmyshampoo.com">contact@whatsinmyshampoo.com</a></p>
</div>
</div>
</div>
<div id="sharebuttons2">
<div style="float:right;">
<div style="float:left;padding-right:15px;" class="sharebutton"><iframe allowtransparency="true" frameborder="0" scrolling="no" role="presentation"
src="http://platform.twitter.com/widgets/tweet_button.html?via=OpenBeautyFacts&count=vertical&lang=fr"
style="width:65px; height:63px;"></iframe></div>
<div style="float:left;padding-right:15px;" class="sharebutton"><fb:like href="http://whatsinmyshampoo.com" layout="box_count"></fb:like></div>
<div style="float:left;padding-right:15px;padding-bottom:10px;" class="sharebutton"><g:plusone size="tall" count="true" href="http://whatsinmyshampoo.com"></g:plusone></div>
</div>
<h2 class="like" style="color:#fff;float:right;">Like shampoo?</h2>
</div>
<script src="js/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: '156259644527005', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/fr_FR/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'fr'}
</script>
</body>
</html>