83 lines
3.8 KiB
HTML
83 lines
3.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<meta charset="UTF-8">
|
|
<!-- <base href="http://127.0.0.1/traficomadrid/">-->
|
|
<link href="https://fonts.googleapis.com/css?family=Londrina+Solid" rel="stylesheet">
|
|
|
|
<!-- CSS -->
|
|
|
|
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
|
|
<link rel="stylesheet" href="css/BootstrapXL.css">
|
|
<link href="bower_components/jbox/Source/jBox.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="css/css/mobile.css">
|
|
|
|
|
|
<!-- JAVASCRIPT -->
|
|
<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
|
|
<!-- jbox -->
|
|
<script src="bower_components/jbox/Source/jBox.min.js"></script>
|
|
|
|
|
|
|
|
<script type="text/javascript" src="bower_components/d3/d3.min.js"></script>
|
|
<script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
|
|
<script type="text/javascript" src="bower_components/jsrender/jsrender.min.js"></script>
|
|
<script type="text/javascript" src="js/main-mvl.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<nav class="navbar navbar-default navbar-fixed-top" >
|
|
<div class="container-fluid">
|
|
<div class="col-xs-6">
|
|
<a class="navbar-brand-custom" href="#">Historia de Zainab</a>
|
|
<span class="chapter-name">Capítulo 1 </span> <a class="next" href="#"><span class="circle glyphicon glyphicon-chevron-right"> </span></a>
|
|
</div>
|
|
<div class="col-xs-2 nopadding ">
|
|
<a class="link-menu" href="#story"><img src="images/c1_menu_story.png" class="img-menu"/>
|
|
story
|
|
</a>
|
|
</div>
|
|
<div class="col-xs-2 nopadding">
|
|
<a class="link-menu" href="#mapa"> <img src="images/c1_menu_mapa.png" class="img-menu"/>
|
|
mapa
|
|
</a>
|
|
</div>
|
|
<div class="col-xs-2 nopadding">
|
|
<a class="link-menu" href="#datos"> <img src="images/c1_menu_datos.png" class="img-menu"/>
|
|
datos
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="container-fluid">
|
|
<div id="main-content">
|
|
<div id="story" class="section">
|
|
<img src="images/c1_IMG_story_mob.jpg" class="img-responsive"/>
|
|
<div id="story-text">
|
|
Este cómic quiere visibilizar el éxodo de Zainab y su familia que, como otros 11 millones de personas, se han visto obligadas a abandonar su hogar desde que en 2011 comenzó la guerra en Siria.
|
|
</div>
|
|
</div>
|
|
<div id="mapa" class="section">
|
|
<img src="images/c1_mapa_mob.jpg" class="img-responsive"/>
|
|
</div>
|
|
<div id="datos" class="section">
|
|
<img src="images/c1_IMG_grafico_mob.jpg" class="img-responsive"/>
|
|
<div id="map-text">
|
|
Este proyecto se ha realizado durante Visualizar'17, un proceso de investigación participativo sobre visualización de información y migraciones.
|
|
Los datos entran en acción para contar una historia. Y si a menudo es difícil obtener datos fiables, en un contexto de guerra todas las cifras se convierten en estimaciones.
|
|
No por ello dejan de representar una realidad que están viviendo millones de personas tratadas como números.
|
|
Aquí tratamos a los números como personas.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
</html>
|