PROTOCULTURE ADDICTS

Sunday, October 20, 2019

Muchos íconos en blanco y negro

Loop icons
	Contiene 106 íconos de 16x16 en formato PNG. descargar

Windows phone
	Contiene 1482 íconos de 48x48 en formato PNG. descargar

Thursday, October 17, 2019

Google Drive para alojar sitios web sencillos

Como en Blogger no podemos subir un mísero archivito, en un tiempo, cuando existían las Google Pages, las usábamos a destajo hasta que kaput porque "a los que saben" se les ocurrió crear Google Sites que no era lo mismo aunque ellos creían que si.

Nos quedamos colocados, mudando archivos de lado a lado, buscando alternativas, las encontramos, cada una con sus bemoles pero, acá seguimos.

El procedimiento es sencillo; entramos en Google Drive https://drive.google.com/ y creamos una carpeta nueva. Luego, con botón derecho, hacemos click en Compartir | Cambiar y marcamos que sea Publica:

Ahora, subimos nuestro archivo HTML a esa carpeta, lo editamos y, haciendo click en Vista Previa, copiamos la dirección url que nos muestra que será del tipo:

https://googledrive.com/host/xxxxxxxxxxxxx/nombre_archivo.html

Eso es todo, con esa dirección, podemos mostrarlo donde se nos ocurra, como en este ejemplo que lo abre en una ventana modal:

ver testgd.html

En este caso, el HTML no tiene nada especial, solo código normal, scripts internos y CSS pero, podemos ampliar las posibilidades y utilizar archivos externos que también alojamos en la misma carpeta y a los que accedemos desde el HTML, usando las direcciones url relativas.

Hasta ahí, es una forma sencilla de manejarse aunque no es cómodo que no sea posible crear o editar esos archivos desde el mismo Google Drive salvo que se agreguen aplicaciones externas como Drive Notepad que sólo funcionan en Chrome.

Tuesday, October 15, 2019

TinyScroller: Simple y personalizable

TinyScroller es un script muy sencillo que no requiere librerías extras y nos permite mostrar mucho contenido en un espacio pequeño tal como normalmente hacemos cuando usamos un contenedor con cierta altura dimensionada y le aplicamos la propiedad overflow para que se pueda ver utilizando una barra de desplazamiento.

El script es realmente pequeño, uno poco más de 50 líneas sin comprimir aunque el ZIP que lo contiene también incluye una versión minimizada.

Lo agregamos como cualquier otro, alojándolo en un servidor o directamente, antes de <head>:

<script type='text/javascript'>
//<![CDATA[
var TINY={};
function T$(id){return document.getElementById(id)}
function T$$$(){return document.all?1:0}
TINY.scroller=function(){
  return{
    init:function(a,c,b,s,d){
      a=T$(a); a.c=c; a.s=s; c=T$(c); b=T$(b); s=T$(s); a.n=d||0;
      b.style.display='block'; a.style.overflow='hidden';
      var h=a.offsetHeight, t=c.offsetHeight;
      if(t<h){
        b.style.display='none'
      }else{
        a.m=h-t; a.d=t/h; s.style.height=(h*(h/t))+'px'; s.style.top=b.style.top=0;
        s.onmousedown=function(event){TINY.scroller.st(event,a.id); return false};
        s.onselectstart=function(){return false}
      }
      a.l=b.offsetHeight-s.offsetHeight
    },
    st:function(e,f){
      var a=T$(f), s=T$(a.s); a.bcs=TINY.cursor.top(e); a.bct=parseInt(s.style.top);
      if(a.mv){this.sp(f)}
      a.mv=function(event){TINY.scroller.mv(event,f)};
      a.sp=function(){TINY.scroller.sp(f)};
      if(T$$$()){
        document.attachEvent('onmousemove',a.mv); document.attachEvent('onmouseup',a.sp)
      }else{
        document.addEventListener('mousemove',a.mv,1); document.addEventListener('mouseup',a.sp,1)
      }
      if(a.d){s.className+=' '+a.n}
    },
    mv:function(e,f){
      var a=T$(f), m=TINY.cursor.top(e)-a.bcs+a.bct, s=T$(a.s), c=T$(a.c);
      if(m>=0&&m<a.l){
        s.style.top=m+'px'; c.style.top=(m*-1*a.d)+'px'
      }else if(m<0){
        s.style.top=0; c.style.top=0
      }else if(m>a.l){
        s.style.top=a.l+'px'; c.style.top=a.m+'px'
      }
    },
    sp:function(f){
      var a=T$(f), s=T$(a.s); if(a.d){s.className=s.className.replace(' '+a.n,'')}
      if(T$$$()){
        document.detachEvent('onmousemove',a.mv); document.detachEvent('onmouseup',a.sp)
      }else{
        document.removeEventListener('mousemove',a.mv,1); document.removeEventListener('mouseup',a.sp,1)
      }
      a.mv=0;
    }
  }
}();
TINY.cursor=function(){
  return{
    top:function(e){
      return T$$$()?window.event.clientY+document.documentElement.scrollTop+document.body.scrollTop:e.clientY+window.scrollY
    }
  }
}();
//]]>
</script>

Y lo usarmemos de este modo:

<div id="ejemplo-scroll" class="scroll">
  <div id="ejemplo-scrollcontent" class="scrollcontent">
    ....... acá pondremos nuestro contenido .......
  </div>
  <div id="ejemplo-scrollbar" class="scrollbar">
    <div id="ejemplo-scroller" class="scroller"></div>
  </div>
</div>

e inmediantamente debajo, llamamos a la función que en este caso, sería así:

<script type="text/javascript">TINY.scroller.init('ejemplo-scroll','ejemplo-scrollcontent','ejemplo-scrollbar','ejemplo-scroller','buttonclick');</script>

Eso, lo haremos siempre del mismo modo, con la misma sintaxis, colocando en la función los cinco parámetros que son los IDs que hemos elegido:

el ID del contenedor que en este caso llamé ejemplo-scroll
el ID del contenido que llamé ejemplo-scrollcontent
los IDs de lso DIVs auxiliares que mostrarán la barra de desplazamiento y el botón: (ejemplo-scrollbar y ejemplo-scroller)
y la clase de ese botón (buttonclick)

Por último, necesitamos el CSS que es lo que podemos personalizar y que en este caso, rearmé agregando clases par que, de esa forma, pudieran mostrarse con distintos tamaños y detalles gráficos:

<style>

  /* las reglas genéricas */
  .scroll { /* el contenedor */
    overflow: auto;
    position: relative; 
  }
  .scrollcontent { /* el contenido */
    position: absolute;
    z-index: 200;
  }
  .scrollbar { /* la barra de desplazamiento es una imagen */
    background:url(URL_scroll-bg.gif);
    display: none;
    float: right;
    position: relative;
    width: 15px;
    z-index: 100;
  }
  .scroller  { /* el botón de desplazamiento también es una imagen */
    background-color: #CCC;
    background-image: url(URL_scroll-arrows.gif);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    cursor: pointer;
    position: absolute;
    top: 0;
    width: 15px;
  }
  .buttonclick { background-color:#BBB; }

  /* y defino los anchos, altos y otros detalles de cada uno de elllos */
  #ejemplo-scroll { /* 
    background-color: #000;
    margin: 0 auto;
    height: 200px; /* el ancho */
    width: 300px; /* el alto */
  }
  #ejemplo-scrollcontent {
    width:275px; /* el ancho del contenedor menos el ancho de la barra de desplazamiento */
  }
  #ejemplo-scrollbar {
    height: 200px; /* el mismo alto que el contenedor */
  }

</style>

Bastaría establecer otros valores para crear otro modelo y usarlo en la misma página:

#otro-scroll{
  background-color: #222;
  border: 2px solid #000;
  height: 270px;
  margin: 0 auto;
  outline: 1px solid #666;
  width: 600px;
}
#otro-scroll{width: 575px;}
#otro-scroll{height: 270px; }

Thursday, October 10, 2019

El atributo required

El atributo required es otra de las nuevas alternativas que se agregan al HTML5 y lo que hace es indicar que cierto campo debe ser "llenado" y evitar que un formulario se envíe sin contenido.

Aunque la verificación final de los datos enviados desde un formulario debe ser hecha en el servidor que los procesará, siempre es bueno realizar una validación previa con JavaScript y así reducir los accesos y evitar el envío de datos vacíos o nulos.

leer artículo actualizado

Tuesday, October 8, 2019

Agregar fullscreen a distintos elementos

Mostrar contenido en pantalla completa no es algo exclusivo de los videos incrustados ya que puede hacerse sobre cualquier otro contenido aunque siempre veremos la advertencia del navegador que nos avisa que esta opción está en uso y que podemos volver atrás utilizando la tecla ESC.

leer artículo actualizado

Friday, October 4, 2019

simpleWeather: El tiempo en el blog con jQuery

simpleWeather es un plugin de jQuery que sirve para mostrar informacion sobre el estado del tiempo del tiempo en un lugar definido y que para eso, utiliza el API Weather feed de Yahoo.

El script es muy simple porque, en realidad, no genera la salida sino que simplemente obtiene los datos así que la parte complicada del asunto es que nosotros debemos armar el HTML correspondiente.

Una vez que agregamos el script a la plantilla, deberíamos crear la función que es lo que mostrará el resultado; básicamente es algo así:

$.simpleWeather({
  location: 'xxxxxxxxxxx',
  unit: 'c',
  success: function(weather) { ... },
  error: function(error) { ... }
});

donde location es la ciudad y unit indica la unidad de la temperatura.

Este es un ejemplo simple:

<script type="text/javascript">
//<![CDATA[
$(function() {
  $.simpleWeather({
    location: 'xxxxxxxxxxx',
    unit: 'c',
    success: function(weather) {
       html = '<h2>'+weather.city+'</h2>';
       html += '<img src="'+weather.image+'"/>';
       html += '<p>'+weather.temp+'° '+weather.units.temp+'<span>'+weather.currently+'</span></p>';
       $("#weather").html(html);
    },
    error: function(error) {
      $("#weather").html('<p>'+error+'</p>');
    }
  });
});
//]]>
</script>

Así que ahora, bastaría colocar el DIV de salida allí donde quisiéramos mostrarlo:

<div id="weather"></div>

Y un poco de CSS:

<style>
#weather {
  background-color: #456;
  border: 4px solid #ABC;
  overflow: hidden;
  padding: 10px 20px 0;
  position: relative;
  text-align: center;
  width: 185px;
}
#weather h2 {
  color: #DEF;
  font-family: Century Gothic;
  font-size: 28px;
  font-weight: normal;
  letter-spacing: -3px;
  margin: 0;
  text-align: center;
}
#weather img {
  margin-top: 10px;
}
#weather p {
  color: #DEF;
  font-family: Times New Roman;
  font-size: 48px;
  left: 80px;
  letter-spacing: -6px;
  margin: 0;
  position: absolute;
  top: 140px;
}
#weather p span {
  color: #ABC;
  display: block;
  font-size: 20px;
  letter-spacing: 0;
  text-transform: lowercase;
}
</style>

Wednesday, October 2, 2019

Bordes, listas, el primero y el último

Esta es una solución sencilla a un problema común.

Tengo una lista cualquiera y quiero ponerle un borde o separador a cada uno de los items que la componen:

<div id="demobordes">
  <ul>
    <li>el primer item</li>
    <li>el segundo item</li>
    <li>el tercer item</li>
    <li>el último item</li>
</ul>

Entonces pruebo con una regla básica:

<style>
#demobordes li {
  background-color: #000;
  border-bottom: 2px dotted #ABC;
  border-top: 2px dotted #ABC;
  color: #888;
  padding: 5px 10px;
}
</style>

pero ... el primero se ve bien, el último también y los del medio se superponen, haciéndolos mas "gordos":

el primer item
el segundo item
el tercer item
el último item

Entonces, pruebo, sólo dejo un borde, el de abajo o el de arriba pero, en ambos casos siempre me falta uno; o el primer item no tiene un borde superior o le falta el borde al último y yo quiero que todos tengan un borde:

el primer item
el segundo item
el tercer item
el último item

el primer item
el segundo item
el tercer item
el último item

Y como el navegador no es adivino, lo que debo hacer es indicarle eso, si todos los items tienen un borde inferior (border-bottom) quiero que el primero tenga un borde superior y para eso, uso first-child:

#demobordes li {
  .......
  border-bottom: 2px dotted #ABC;
}
#demobordes li:first-child { border-top: 2px dotted #ABC; }

Y al revés, si todos tienen un borde superior (border-top) le digo que el último tenga un borde inferior con last-child:

#demobordes li {
  .......
  border-top: 2px dotted #ABC;
}
#demobordes li:last-child { border-bottom: 2px dotted #ABC; }

Y con eso resuelvo el asunto:

el primer item
el segundo item
el tercer item
el último item

el primer item
el segundo item
el tercer item
el último item