Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
css
 
 
 
 
 
 
 
 
img
 
 
js
 
 
 
 

README.md

Campanha em colaboraçom com A Mesa na qual encorajamos as pessoas galegas a utilizarem os dias da semana por feiras.

Aqui podes encontrar recursos para inserires o logo da campanha no teu blogue.

iframe

A maneira mais simples de pôr o polvinho é utilizares um iframe.

Simplesmente cola na tua página o código:

<iframe src="http://dias.pgl.gal/feiramos.html?agal" width="210px" height="210px" frameborder="0" scrolling="no"></iframe>

ou bem se queres que os textos no banner (dia/mês) sejam na norma RAG:

<iframe src="http://dias.pgl.gal/feiramos.html?ilga" width="210px" height="210px" frameborder="0" scrolling="no"></iframe>

html/js/css

Também podes fazê-lo incluindo o polvo dinámico num simples <div> </div> em qualquer página HTML.

Para isso, acrescenta:

  • O seguinte código HTML na tua página:
<div class="diaDaSemana">
    <a href="http://feirando.gal" target="_blank">
        <img class="DDSpolvo" id="polvo"/>
    </a>
    <div class="DDStextos">
        <span class="DDSfeira" id="feira"></span>
        <span class="DDSmes" id="mes"></span>
    </div>
</div>
  • O seguinte código javascript:
    • Modificando as cadeias de carateres para os nomes de meses/dias consoante a tua preferência de norma (AGAL, RAG/ILG)
    • Modificando a variável path para adecuá-la ao lugar onde tu subas as imagens
    • Se modificas o nome da imagem, modifica a variável polvo
/* Obtemos um objeto com a image, o dia e o mês a mostrar */
function getDiaDaSemana(norma){
  /* Textos a mostrar */
  if (norma==='agal'){
    var mes = new Array('janeiro', 'fevereiro', 'março', 'abril', 'maio', 'junho', 'julho', 'agosto', 'setembro', 'outubro', 'novembro', 'dezembro');
    var feira = new Array('Domingo', 'Segunda-feira', 'Terça-feira', 'Quarta-feira', 'Quinta-feira', 'Sexta-feira', 'Sábado');
  }else{
    var mes = new Array('xaneiro', 'febreiro', 'marzo', 'abril', 'maio', 'xuño', 'xullo', 'agosto', 'setembro', 'outubro', 'novembro', 'decembro');
    var feira = new Array('Domingo', 'Segunda feira', 'Terza feira', 'Cuarta feira', 'Quinta feira', 'Sexta feira', 'Sábado');
  }

  var path = "img/" /* path da imagem */
  var polvo = "polvo_violeta" /* raiz do nome da imagem */

  var currentdate = new Date(); /* obtemos a informaçom do dia de hoje */
  var diaDende0 = currentdate.getDay(); /* currentdate.getDay devolve 0: domingo, 1: segunda, ... 6 sábado */

  switch (diaDende0){
    case 0: this.img=path+polvo+'_d.png';break;
    case 1: this.img=path+polvo+'_2.png';break;
    case 2: this.img=path+polvo+'_3.png';break;
    case 3: this.img=path+polvo+'_4.png';break;
    case 4: this.img=path+polvo+'_5.png';break;
    case 5: this.img=path+polvo+'_6.png';break;
    case 6: this.img=path+polvo+'_s.png';break;
  }

  this.feira = feira[diaDende0]; /* Domingo, Segunda-feira, ... */
  this.mes = currentdate.getDate() + ' de ' + mes[currentdate.getMonth()]; /* 22 de fevereiro */
  return this;
}

/* Modifica o HTML com o obtido segundo o dia */
function setDiaDaSemana(){
  diaDaSemana=getDiaDaSemana('ilga'); // chamar com 'agal' para receber os textos em norma agal
  $("#feira").html(diaDaSemana.feira);
  $("#mes").html(diaDaSemana.mes);
  $("#polvo").attr("src",diaDaSemana.img);
}
  • Os estilos
.diaDaSemana{
  position: relative;
  margin: auto;
  top: 0px;
  width: 200px;
  right: 0px;
}
.DDSpolvo{
    width: 100%;
}
.DDStextos {
   position: relative;
   top: 0px;
   width: 100%;
   text-align: center;
}
.DDSfeira {
   color: #e23e83;
   font: bold 14px/25px HelveNeuBlaCon, Helvetica, Sans-Serif;
   letter-spacing: -1px;
   padding-left: 5px;
   padding-right: 5px;
   text-align: center;
}
.DDSmes {
   color: #8b0067;
   font: bold 14px/25px HelveNeuBlaCon, Helvetica, Sans-Serif;
   letter-spacing: -1px;
   padding-right: 5px;
}
  • Sobe as imagens png de img/ a algum lugar do teu servidor.

Simplesmente lembra-te de chamar na tua inicializaçom da página a funçom setDiaDaSemana()

Podes ver um exemplo do funcionamento em http://dias.pgl.gal

Wordpress com widgets

Para adicionarmos um widget com este código:

  • Subimos as imagens à biblioteca de média do nosso wordpress.

  • Colamos num widget do tipo HTML o seguinte código

<div class="diaDaSemana">
    <a href="http://feirando.gal" target="_blank">
        <img class="DDSpolvo" id="polvo"/>
    </a>
    <div class="DDStextos">
        <span class="DDSfeira" id="feira"></span>
        <span class="DDSmes" id="mes"></span>
    </div>
</div>
<style>
.diaDaSemana{
  position: relative;
  margin: auto;
  top: 0px;
  width: 200px;
  right: 0px;
}
.DDSpolvo{
    width: 100%;
}
.DDStextos {
   position: relative;
   top: 0px;
   width: 100%;
   text-align: center;
}
.DDSfeira {
   color: #e23e83;
   font: bold 14px/25px HelveNeuBlaCon, Helvetica, Sans-Serif;
   letter-spacing: -1px;
   padding-left: 5px;
   padding-right: 5px;
   text-align: center;
}
.DDSmes {
   color: #8b0067;
   font: bold 14px/25px HelveNeuBlaCon, Helvetica, Sans-Serif;
   letter-spacing: -1px;
   padding-right: 5px;
}
</style>
<script type="text/javascript">
//<![CDATA[
/* Retorna a imagem a mostrar */
function getDiaDaSemana(norma){
  /* Textos a mostrar */
  if (norma==='agal'){
    var mes = new Array('janeiro', 'fevereiro', 'março', 'abril', 'maio', 'junho', 'julho', 'agosto', 'setembro', 'outubro', 'novembro', 'dezembro');
    var feira = new Array('Domingo', 'Segunda-feira', 'Terça-feira', 'Quarta-feira', 'Quinta-feira', 'Sexta-feira', 'Sábado');
  }else{
    var mes = new Array('xaneiro', 'febreiro', 'marzo', 'abril', 'maio', 'xuño', 'xullo', 'agosto', 'setembro', 'outubro', 'novembro', 'decembro');
    var feira = new Array('Domingo', 'Segunda feira', 'Terza feira', 'Cuarta feira', 'Quinta feira', 'Sexta feira', 'Sábado');
  }

  var path = "img/" /* path da imagem */
  var polvo = "polvo_violeta" /* raiz do nome da imagem */

  var currentdate = new Date(); /* obtemos a informaçom do dia de hoje */
  var diaDende0 = currentdate.getDay(); /* currentdate.getDay devolve 0: domingo, 1: segunda, ... 6 sábado */

  switch (diaDende0){
    case 0: this.img=path+polvo+'_d.png';break;
    case 1: this.img=path+polvo+'_2.png';break;
    case 2: this.img=path+polvo+'_3.png';break;
    case 3: this.img=path+polvo+'_4.png';break;
    case 4: this.img=path+polvo+'_5.png';break;
    case 5: this.img=path+polvo+'_6.png';break;
    case 6: this.img=path+polvo+'_s.png';break;
  }

  this.feira = feira[diaDende0]; /* Domingo, Segunda feira, ... */
  this.mes = currentdate.getDate() + ' de ' + mes[currentdate.getMonth()]; /* 22 de fevereiro */
  return this;
}
diaDaSemana=getDiaDaSemana('agal'); // escreve 'ilga' onde di 'agal' se queres mostrar os textos na norma ILG/RAG.
document.getElementById('polvo').src = diaDaSemana.img;
document.getElementById('mes').innerHTML = diaDaSemana.mes;
document.getElementById('feira').innerHTML = diaDaSemana.feira;
//]]>
</script>

Informaçom sobre as questons de estilo

Fonte

  • Fonte: HelveNeuBlaCon
  • Alternativo: Arial Black
  • Tamanho: 14

Cores:

Violeta

  • Violeta suave: #e23e83
  • Violeta escuro: #8b0067

About

Campanha em colaboraçom com A Mesa na qual encorajamos as pessoas galegas a utilizarem os dias da semana por feiras.

Resources

Releases

No releases published

Packages

No packages published
You can’t perform that action at this time.