OBF:Translations/whatsinmyshampoo.com/English
Revision as of 01:03, 5 March 2016 by obf>Stephane
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.2000x1170.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!" />
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="theme-color" content="#ffffff">
<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:32px !important;}
#yogurt {width:100px;top:7px;right:15px;}
}
@media only screen and (min-width: 40em) {
#whats {font-size:40px !important;}
#yogurt {width:120px;top:9px;right:18px;}
}
@media only screen and (min-width: 48em) {
#whats {font-size:50px !important;}
#yogurt {width:140px;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:60px !important;}
#yogurt {width:170px;top:12px;right:24px;}
}
@media only screen and (min-width: 64em) {
#whats {font-size:64px !important;}
#yogurt {width:191px;}
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.191x215.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">
<div class="large-12 columns">
<h2 class="text-center">Open it and find out!</h2>
<div class="row">
<div class="medium-4 large-4 columns">
<img src="shampoo.2000x1170.png" alt="Cow" />
</div>
<div class="medium-8 large-8 columns" style="margin-top:20px">
<p>On the label there's a rather mysterious "Aqua" ingredient, and then something that must be a magic formula, a long list of words written in Latin, mixed with long
molecules names and code numbers. Is this something that everyone of us is expected to read and understand?
</p>
<p>Rosanna Van Hespen, a student at the University of Melbourne took the time to find out <a href="http://blogs.unimelb.edu.au/sciencecommunication/2014/10/23/whats-in-my-shampoo/">what are the 29 ingredients of her shampoo</a> (Fructis / Garnier) and what their purposes are. It is a very interesting and funny read.</p>
<p>The Guardian also made a <a href="http://www.theguardian.com/lifeandstyle/ng-interactive/2015/feb/10/shampoo-ingredients-label-chemicals-interactive">What's in your shampoo?</a> interactive site that tells you what 9 common shampoo ingredients are, if there is a risk associated with them, and in that case how to avoid them.</p>
<p>What's in your shampoo?</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 for food: 3000 contributors have added photos and data for 75 000 products to the <a href="http://world.openfoodfacts.org">Open Food Facts</a>
database, and now we are building the <a href="http://world.openbeautyfacts.org">Open Beauty Facts database</a>.</p>
<h3>Adding more shampoos</h3>
<p>To add more products, you can upload pictures of your cosmetics on the Open Beauty Facts web site or with our Android mobile app (iOS app in progress, if you are an iOS developer, your help would be very useful!). Then go to your local store or your bathroom, 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://world.openbeautyfacts.org"><div style="background:white;padding:1rem">
<img src="openbeautyfacts-logo-en-356x300.png" alt="Open Beauty Facts, the free cosmetic database" width="356" height="300"/>
</div></a>
<br /><br />
<ul class="appicons small-block-grid-3 medium-block-grid-2">
<li>
<a href="http://static.openbeautyfacts.org/images/apps/obf.apk">
<div style="background:white;padding:5px;">
<img src="http://static.openbeautyfacts.org/images/misc/android-apk.112x40.png" alt="Android APK" />
</div>
</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=shampoos&sort_by=unique_scans_n&page_size=20&axis_x=ingredients_n&axis_y=products_n&graph_title=Number%20of%20ingredients%20in%20shampoos&graph=1">
Number of ingredients in shampoos
</a></h4>
<a href="http://world.openbeautyfacts.org/cgi/search.pl?action=process&tagtype_0=categories&tag_contains_0=contains&tag_0=shampoos&sort_by=unique_scans_n&page_size=20&axis_x=ingredients_n&axis_y=products_n&graph_title=Number%20of%20ingredients%20in%20shampoos&graph=1">
<img src="ingredients-in-shampoos.609x390.png" />
</a>
<br/><br/>
<p>Creating graphs takes only a few clicks. A few shampoos have less than 10 ingredients, most have more than 20, some have 40.</p>
</div>
<div class="medium-6 large-6 columns">
<h3>Decrypting</h3>
<p>Besides E numbers for food additives like E951 for Aspartame, ingredients lists for food products are mostly understandable. But if you look at the ingredients list
for your shampoos, you will need to speak Latin, to be a Chemist and have access to databases of molecules codes to understand what's in it. Open Beauty Facts aims to
decrypt those ingredients: not only call water "water" instead of "aqua", but point out which chemicals can be potentially dangerous.</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 bathroom, your neighbours bathrooms 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 March 5th 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 rummage their bathroom, take a shampoo, and send us some photos of the ingredients list and packaging.</p>
<p>Are you up to it? Join us on <a href="http://slack.openfoodfacts.org">Slack</a> (#opendataday2016 channel) to coordinate our hunting efforts and celebrate our victories!</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>You can join us:</p>
<ul>
<li>on Slack: <a href="http://slack.openfoodfacts.org">Slack</a>, channels #openbeautyfacts and #opendataday2016.</li>
<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 affection for instance?</p>
<p>So shampoos are our Trojan Horses to open data for all cosmetic products, a way to put our foot in the bathroom's door and then open soap, toothpaste, perfume, make-up 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>