Campanha em colaboraçom com A Mesa na qual encorajamos as pessoas galegas a utilizarem os dias da semana por feiras.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
fonts
html
iframe
img
js
README.md

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