Accions
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:
Categoria:
-
Temàtica prevista:
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.
BP Actualitzat per Beatriu Piera fa quasi 6 anys Accions #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 #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 #3
BP Actualitzat per Beatriu Piera fa quasi 6 anys Accions #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 #5
- S'ha afegit relacionat amb Tasca #5693: SAAR nou site a Oracle
Accions