Projecte

General

Perfil

Accions
Copiar enllaç

Tasca #5802

tancat
BP BP

Cicle de comunicació de la recerca

Tasca #5802: Cicle de comunicació de la recerca

Afegit per Beatriu Piera fa quasi 6 anys. Actualitzat fa quasi 6 anys.

Estat:
Tancada
Prioritat:
Normal
Assignat a:
Beatriu Piera
Categoria:
-
Temàtica prevista:
Aplicacions - Implementació programa/servei
Inici:
15-05-2020
Data de venciment:
08-06-2020
Paraula clau:
Docènica i recerca

Descripció

Cal crear un frame gràfic amb imatges hexagonals que apunten cap a les diferents seccions. El disseny es farà amb html i css, ja que és més estable que utilitzar un jpg amb mapa d'enllaços.

Tasques relacionades 1 (0 obertes — 1 tancada)

relacionat amb Tecnologia - Tasca #5693: SAAR nou site a OracleTancadaBeatriu Piera02-04-2020Accions

BP Actualitzat per Beatriu Piera fa quasi 6 anys Accions
Copiar enllaç
 #1

Es fa una primera progamació en css per adaptar als portlets d'imatge dins Oracle

.grid-field,.content-field {
  width: var(--width); 
 height: var(--height);
 clip-path: url(#hexa-v);
 clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);}
.content-field{background:transparent!important;}
.content-field:hover{background:rgba(0,126,17,0.7)!important}
.content-field h4{margin-top:50px!important}

.grid-field,.content-field {clip-path: url(#hexa-v);
 clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%); }
.content-field{background:transparent!important;}
.content-field h4,.content-field p{margin:40px!important}
.col-sm-3.col-ms-6.col-md-3:nth-of-type(1) .content-field:hover{background:rgba(0,126,17,0.7)!important}
.col-sm-3.col-ms-6.col-md-3:nth-of-type(2){position:relative;top:140px!important;right:80px}
.col-sm-3.col-ms-6.col-md-3:nth-of-type(2) .content-field:hover{background:red!important;opacity:0.7;}
.col-sm-3.col-ms-6.col-md-3:nth-of-type(3){position:relative;top:0px!important;right:160px}
.col-sm-3.col-ms-6.col-md-3:nth-of-type(3) .content-field:hover{background:orange!important;opacity:0.7}
.col-sm-3.col-ms-6.col-md-3:nth-of-type(4){position:relative;top:140px!important;right:240px}
.col-sm-3.col-ms-6.col-md-3:nth-of-type(4) .content-field:hover{background:blue!important;opacity:0.7}

BP Actualitzat per Beatriu Piera fa quasi 6 anys Accions
Copiar enllaç
 #2

Finalment el desenvolupament es farà com iframe responsive.

Codi pàgina:

<html lang="es_ca">  
  <head>    
    <title>Biblioteques UAB - Cicle de Comunicació de la Recerca</title>    
    <meta charset="UTF-8">
    <meta name="title" content="Biblioteques UAB - Cicle de Comunicació de la Recerca">
    <meta name="description" content="Biblioteques UAB - Cicle de Comunicació de la Recerca">   
<link rel="stylesheet" type="text/css" href="ccr.css">

  </head>

<body>
<div class="content">
<div class="cicleEscriure">
<h2><img src="img/CicleEscriure.png" alt="Crear una publicació" width="40px">Crear una publicació</h2>
<div id="bloc1" class="rowHex">
<div id="caixa1" class="hex">
    <a class="hexLink" href="https://www.uab.cat/web/comunicacio-recerca/Escriure-1345787284800.html" alt="Anar a la secció Com Escriure" target="_blank">
    <div class="grid-field"><img src="img/11Escriure.png" alt="Escriure" /></div>
    <div class="content-field"><h2>Escriure</h2><p>Com signar i mencionar la filiació, identificadors personals, preparar el document, normes d'autor editorials, tesi doctoral</p></div>
    </a>
    </div>

<div id="caixa2" class="hex">
    <a class="hexLink" href="https://www.uab.cat/web/comunicacio-recerca/Citar-1345787284879.html" alt="Anar a la secció Com Citar" target="_blank">
    <div class="grid-field"><img src="img/12Citar.png" alt="Citar" /></div>
    <div class="content-field"><h2>Citar</h2><p>Com citar i fer bibliografies, gestors de referències, plagi, propietat intel·lectual i accés obert</p></div>
    </a>
    </div>
<div id="caixa3" class="hex">
    <a class="hexLink" href="https://www.uab.cat/web/comunicacio-recerca/Publicar-1345787284932.html" alt="Anar a la secció Com Publicar" target="_blank">
    <div class="grid-field"><img src="img/13Publicar.png" alt="Publicar" /></div>
    <div class="content-field"><h2>Publicar</h2><p>Consells per triar publicació, bones pràctiques, dades de recerca, requeriments de projectes, DOI, revisió per experts</p></div>
    </a>
    </div>
<div id="caixa4" class="hex">
    <a class="hexLink" href="https://www.uab.cat/web/comunicacio-recerca/Publicar-en-acces-obert-1345787284943.html" alt="Anar a la secció Publicar en obert" target="_blank">
    <div class="grid-field"><img src="img/14AccesObert.png" alt="Citar" /></div>
    <div class="content-field"><h2>Publicar en obert</h2><p>Accés obert, DDD, drets d'autor, dades de recerca, propietat intel·lectual</p></div>
    </a>
    </div>
<div id="caixa5" class="hex">
    <a class="hexLink" href="https://www.uab.cat/web/comunicacio-recerca/Difondre-1345787284957.html" alt="Anar a la secció Difondre" target="_blank">
    <div class="grid-field"><img src="img/15Difusio.png" alt="Citar" /></div>
    <div class="content-field"><h2>Difondre</h2><p>Identitat digital, xarxes socials</p></div>
    </a>
    </div>
</div>
    </div>
<div class="cicleGestio">
<h2><img src="img/CicleGestio.png" alt="Gestionar la producció científica" width="40px">Gestionar la producció científica</h2>
<div id="bloc2" class="rowHex">
<div id="caixa1" class="hex">
    <a class="hexLink" href="https://www.uab.cat/web/comunicacio-recerca/Gestionar-curriculum-1345805880386.html" alt="Anar a la secció Gestionar Currículum" target="_blank">
    <div class="grid-field"><img src="img/21CV.png" alt="Gestionar Currículum" /></div>
    <div class="content-field"><h2>Gestionar Currículum</h2><p>Com generar CVN i altres</p></div>
    </a>
</div>
<div id="caixa2" class="hex">
    <a class="hexLink" href="https://www.uab.cat/web/comunicacio-recerca/buscar-valoracio-d-autors-1345806731672.html" alt="Anar a la secció Valorar Autors" target="_blank">
    <div class="grid-field"><img src="img/22ValAutors.png" alt="Valorar Autors" /></div>
    <div class="content-field"><h2>Valorar Autors</h2><p>Conèixer indicadors de valoració d'autors i altmètriques</p></div>
    </a>
</div>
<div id="caixa3" class="hex">
    <a class="hexLink" href="https://www.uab.cat/web/comunicacio-recerca/buscar-valoracio-de-publicacions-1345806745148.html" alt="Anar a la secció Valorar Publicacions" target="_blank">
    <div class="grid-field"><img src="img/23ValPublicacions.png" alt="Valorar Publicacions" /></div>
    <div class="content-field"><h2>Valorar Publicacions</h2><p>Suport a l'acreditació i avaluació de la recerca amb recursos, indicadors, matèries i agències</p></div>
    </a>
</div>
<div id="caixa4" class="hex">
    <a class="hexLink" href=" https://www.uab.cat/web/comunicacio-recerca/veure-la-meva-produccio-cientifica-1345806745794.html" alt="Anar a la secció Veure Producció Científica" target="_blank">
    <div class="grid-field"><img src="img/24MevaProducció.png" alt="Veure Producció Científica" /></div>
    <div class="content-field"><h2>Producció Científica</h2><p>Per investigadors, grups, centres de recerca i instituts de recerca, al DDD i al Portal de la Recerca de Catalunya</p></div>
    </a>
</div>
</div>
    </div>
</div>    
  </body>
</html>

Codi css responsive

html{font-family:sans-serif;font-size:12pt;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
.content {width:100%; margin: auto;}
h2 img{vertical-align:middle; margin:10px;}
.hex .content-field p {margin-top:-0.8em}
.hex {width:220px;}
.hex .grid-field img {width:100%; }
.hexLink {text-decoration:none;color:#333333}
.grid-field {
clip-path: polygon(75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%, 25% 0);}
.hex .content-field{overflow:wrap;font-size:0.9em;
  width:68%;
  position: relative;
   left:50%;
  transition: .5s ease;
  opacity:0;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;}
.hex:hover img {
  opacity: 0.3;
}
.hex:hover .content-field {
  opacity: 1;
}
@media screen and (min-width: 1401px) {
.rowHex {display: flex; align-items: top; justify-content: center;}
.hex {margin-left:-50px}
.hex .content-field{position:relative;top:-110px;}
.rowHex .hex:nth-of-type(2),.rowHex .hex:nth-of-type(4){position:relative;top:100px;}
}
@media screen and (min-width: 1201px) and (max-width:1400px) {
.rowHex {display: flex; align-items: top; justify-content: center;}
.hex {margin-left:-50px}
.hex .content-field{position:relative;top:-110px;}
.rowHex .hex:nth-of-type(2),.rowHex .hex:nth-of-type(4){position:relative;top:100px;}

}

@media screen and (min-width: 960px) and (max-width:1200px) {
.rowHex {display: flex; align-items: top; justify-content: center;}
.hex {margin-left:-50px}
.hex .content-field{position:relative;top:-110px}
.rowHex .hex:nth-of-type(2),.rowHex .hex:nth-of-type(4){position:relative;top:95px;}
}

@media screen and (max-width: 959px) {
a{
 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 -webkit-tap-highlight-color: transparent;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
  user-select: none;
    }
}

@media screen and (min-width: 569px)and (max-width: 959px) {
.cicleGestio{position:relative;top:-460px!important}
.content{}
.rowHex {display: block; align-items: top;margin-left:10%}
.hex {width:15%;height:175px;}
.hex:nth-of-type(2){position:relative;top:-90px}
.hex:nth-of-type(3){position:relative;top:-180px}
.hex:nth-of-type(4){position:relative;top:-270px}
.hex:nth-of-type(5){position:relative;top:-360px}
.hex .content-field {
  width:500%;height:100%;
  position: relative;
   left:380%;
   top:0px;
  opacity:1;
}
    .hex .content-field h2 {font-size:2.5vw}

}
@media screen and (min-width: 376px)and (max-width: 568px) {
.cicleGestio{position:relative;top:-460px!important}
.content{font-size:3vw;}
.rowHex {display: block; align-items: top;margin-left:10%}
.hex {width:25%;height:175px;}
.hex:nth-of-type(2){position:relative;top:-90px}
.hex:nth-of-type(3){position:relative;top:-180px}
.hex:nth-of-type(4){position:relative;top:-270px}
.hex:nth-of-type(5){position:relative;top:-360px}
.hex .content-field {
  width:200%;height:100%;
  position: relative;
   left:200%;
   top:-20px;
  opacity:1;}
.hex h2 {font-size:2.5vw;}

}

@media screen and (max-width: 375px) {
.cicleGestio{position:relative;top:-480px!important}
.content{font-size:3vw;}
.rowHex {display: block; align-items: top;margin-left:2%}
.hex {font-size:3.8vw; width:23%;height:175px;}
.hex:nth-of-type(2){position:relative;top:-100px}
.hex:nth-of-type(3){position:relative;top:-200px}
.hex:nth-of-type(4){position:relative;top:-300px}
.hex:nth-of-type(5){position:relative;top:-400px}
.hex .content-field {
  width:320%;height:100%;
  position: relative;
   left:270%;
  opacity:1;}
.hex h2{font-size:3.3vw;  margin-top:8%;}
.hex:nth-of-type(2) h2{margin-top:10%;}

}

BP Actualitzat per Beatriu Piera fa quasi 6 anys Accions
Copiar enllaç
 #4

  • Estat ha canviat de Creada a Tancada

Desenvolupament adaptat i funcionant. Donem per tancada la tasca.

BP Actualitzat per Beatriu Piera fa quasi 6 anys Accions
Copiar enllaç
 #5

  • S'ha afegit relacionat amb Tasca #5693: SAAR nou site a Oracle
Accions
Copiar enllaç

També disponible a: PDF Atom