Código, Web y Blogs


Basura tecnológica reflexiona sobre tu consumo electrónico

En el mundo de las basuras un gran porcentaje está constituido por tecnología y derivados de lo mismo, es por ello que hoy queremos dedicar un momento de reflexión y pensar de que forma consumimos tecnología y que tanto esto afec al mundo.


Para ello pueden informarse con una breve infografía mostrando datos importantes:

Nuestro Planeta, ¿Más tecnología más daños? 

Ahora que vivimos en la era digital, el desarrollo económico de los países depende principalmente de la producción y comercialización de aparatos electrónicos, Linio y Bloggin Red te invitan a descubrir qué desventajas generan para la sociedad y el medio ambiente nuestros avances tecnológicos, que contradictoriamente no se explotan en favor de un mundo sustentable.

La basura tecnológica o electrónica hace referencia al conjunto de residuos peligrosos provenientes de computadoras, teléfonos celulares, televisores, reproductores de música y en general de cualquier dispositivo electrónico. Estos residuos contienen metales pesados y sustancias químicas tóxicas que no es posible eliminar fácilmente del ambiente, además, no existe un modo de reciclaje “seguro” para estos materiales. 

La disminución en el costo de los artículos tecnológicos ha hecho que adquirir uno nuevo resulte más práctico que repararlo, además, los nuevos requerimientos, versiones, sistemas operativos y software en general obligan a actualizar con mayor frecuencia nuestros gadgets sin pensar en las repercusiones que esto conlleva.

En mayo de 2014 el portal Encuentro perteneciente al Ministerio de Educación Argentina publicó un documental sobre los desechos tecnológicos, donde  identifica a los teléfonos celulares, los sistemas de computación y los dispositivos de audio y video, en ese orden, como los tres rubros más vendidos. Hace aproximadamente 30 años, la ventaja que brindaban los productos electrónicos era la durabilidad, se compraba “un televisor para toda la vida”, actualmente los aparatos son considerados “desechables”.
 
¿A dónde van estos desechos tecnológicos cuando se apagan para siempre?

Cuando compramos un aparato electrónico difícilmente pensamos en las piezas que lo hacen funcionar, incluso, desconocemos la forma más apropiada para desecharlos y terminan mezclados con la basura convencional en depósitos, rellenos sanitarios, barrancos o tiraderos clandestinos; el  mal manejo de estos desechos generan un gran peligro para la salud y el medio ambiente.

La basura electrónica a menudo termina en países en vías de desarrollo como China, India, Ghana entre otros del continente Africano, donde personas de bajos recursos se dedican a la recolección de dichos dispositivos para desmantelarlos con sus propias manos, separar los componentes útiles y venderlos, el resto es quemado generando una gran cantidad de gases tóxicos que afectan la salud de la gente que vive alrededor.

El desarrollo de esta actividad es la única forma de sustento para estas familias que ponen en riesgo su vida al entrar en contacto directo con sustancias tóxicas que al mismo tiempo, contaminan la tierra y el agua subterránea. Las personas dedicadas a este “reciclaje” tienen una alarmante esperanza de vida de 25 años.

La ONU dio a conocer  cifras de 2014 donde el continente americano generó un total de 11.7 millones de toneladas de productos R.A.E.E. (Residuos de Aparatos Eléctricos y Electrónicos) como también se les conoce. Los tres países con la mayor generación de estos residuos fueron EUA con 7.1 millones de Toneladas, Brasil con 1.4 millones de toneladas y México con un millón de toneladas.

Los desafíos

De la misma forma exhortan a crear políticas y programas de reciclaje para estos productos ya que representarían un gran negocio pues “los desechos de ordenadores y móviles contienen metales preciosos” (oro, plata, paladio, iridio, germanio y cobre). 


UN ARTÍCULO ESCRITO EN ALIANZA CON: www.linio.com.co


Poner mapa del sitio en tabla de contenido con pestañas para blogger

Un "mapa de sitio" o "Site map" permiten al visitante de nuestra blog ver de forma fácil y general todo el contenido que se tiene en el sitio.

Imagen de: ciudad blogger
Así que el día de hoy explicaré como poner uno de estos en nuestro blog  el demo lo podrán observar aquí abajo:

Cargando entradas...



Bien se ve interesante no ? , ahora para ponerlo en nuestro blog haremos el siguiente paso a paso:

1. En el HTML de una página o de una entrada (como se desee) pegaremos el siguiente código:
<style>
#SiteMapBlogger {
width:99%;
margin:0 auto;
background-color:#444; /* Color de la barra lateral */
overflow:hidden;
position:relative;
color:#333
}
#SiteMapBlogger .loadingPosts {
display:block;
padding:5px 10px;
font:normal bold 10px Arial, Sans-Serif;
color:#FFF
}
#SiteMapBlogger ul, #SiteMapBlogger ol, #SiteMapBlogger li {margin:0;padding:0;list-style:none;background:none;}
#SiteMapBlogger .sitemapTabs {width:20%;float:left}
#SiteMapBlogger .sitemapTabs li a {
display:block;
font:normal bold 10px/28px Arial,Sans-Serif;
height:28px;
overflow:hidden;
text-overflow:ellipsis;
color:#ccc; /* Color de las etiquetas */
text-transform:uppercase;
text-decoration:none;
padding:0 12px;
cursor:pointer
}
#SiteMapBlogger .sitemapTabs li a:hover {
background-color:#556270; /* Color de fondo de las etiquetas al pasar el cursor */
color:#FFF
}
#SiteMapBlogger .sitemapTabs li a.active-tab {
background-color:#69D2E7; /* Color de la pestaña activa */
color:#FFF; /* Color del texto de la pestaña activa */
position:relative;
z-index:5;
margin:0 -1px 0 0
}
#SiteMapBlogger .sitemapContent, #SiteMapBlogger .divider-layer {
width:80%;
float:right;
background-color:#FFF;
border-left:5px solid #69D2E7; /* Color del borde que separa las entradas de las etiquetas */
box-sizing:border-box
}
#SiteMapBlogger .divider-layer {float:none;display:block;position:absolute;top:0;right:0;bottom:0;}
#SiteMapBlogger .panel {position:relative;z-index:5;font:normal normal 10px Arial,Sans-Serif}
#SiteMapBlogger .panel li a {
display:block;
position:relative;
font-weight:700;
font-size:11px; /* Tamaño del título de las entradas */
color:#333; /* Color del título de las entradas */
line-height:30px;
height:30px;
padding:0 12px;
text-decoration:none;
outline:none;
overflow:hidden
}
#SiteMapBlogger .panel li time {
display:block;
font-style:italic;
font-weight:400;
font-size:10px; /* Tamaño de la fecha */
color:#DCDCDC; /* Color de la fecha */
float:right
}
#SiteMapBlogger .panel li .sitemapSummary {
display:block;
padding:10px 12px;
font-style:italic;
overflow:hidden
}
#SiteMapBlogger .panel li .sitemapSummary img.sitemapThumbnail {
float:left;
display:block;
margin:0 8px 0 0;
padding:4px;
width:72px; /* Ancho del contenedor de las miniaturas */
height:72px; /* Alto del contenedor de las miniaturas */
border:1px solid #dcdcdc; /* Borde de las miniaturas */
}
#SiteMapBlogger .panel li:nth-child(even) {
background-color:#CBDFDE; /* Color de fondo secundario de las entradas */
font-size:10px;
color:#414141 /* Color de texto secundario de las entradas */
}
#SiteMapBlogger .panel li a:hover,#SiteMapBlogger .panel li a:focus, #SiteMapBlogger .panel li a:hover time, #SiteMapBlogger .panel li.bold a {
background-color:#556270; /* Color de fondo del título de las entradas (modo sumario) y color de fondo del título de las entradas al pasar el cursor (modo normal) */
color:#FFF;
outline:none
}
#SiteMapBlogger .panel li.bold a:hover, #SiteMapBlogger .panel li.bold a:hover time {
background-color:#444
}

@media (max-width:700px) {
#SiteMapBlogger {
background-color:#fff;
border:0 solid #888
}
#SiteMapBlogger .sitemapTabs, #SiteMapBlogger .sitemapContent {
overflow:hidden;
width:auto;
float:none;
display:block
}
#SiteMapBlogger .sitemapTabs li {
display:inline;
float:left
}
#SiteMapBlogger .sitemapTabs li a, #SiteMapBlogger .sitemapTabs li a.active-tab {
background-color:#556270;
color:#ccc;
}
#SiteMapBlogger .sitemapTabs li a.active-tab {
background-color:#CBDFDE;
color:#fff
}
#SiteMapBlogger .sitemapContent {
border:none
}
#SiteMapBlogger .divider-layer, #SiteMapBlogger .panel li time {
display:none
}
}
</style>
<div id="SiteMapBlogger">
<span class="loadingPosts">Cargando entradas...</span></div>
<br />
<script>
var tabbedTOC = {
blogUrl: "http://nombre-de-mi-blog.blogspot.com/",
containerId: "SiteMapBlogger",
activeTab: 1,
showDates: true,
showSummaries: false,
numChars: 200,
showThumbnails: false,
thumbSize: 40,
noThumb: "//lh4.googleusercontent.com/-ELPJlqQBEWg/VGOtHaYDk9I/AAAAAAAAGJM/f2jRyUgZet0/s128/imagen.png",
monthNames: ["Enero","Febrero","Marzo","April","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"],
newTabLink: true,
maxResults: 99999,
preload: 0,
sortAlphabetically: true,
showNew: 7,
newText: " - <i style='color:red;'>¡Nuevo!</i>"
};
</script>

<script>
/*
* Blogger Tabbed Style Table of Content Widget by Taufik Nurrohman
* Free for change but keep the original attribution.
* URL: https://plus.google.com/108949996304093815163 */

function clickTab(e){var t=document.getElementById(tabbedTOC_defaults.containerId),n=t.getElementsByTagName("ol"),r=t.getElementsByTagName("ul")[0],i=r.getElementsByTagName("a");for(var s=0;s<n.length;s++){n[s].style.display="none";n[parseInt(e,10)].style.display="block"}for(var o=0;o<i.length;o++){i[o].className="";i[parseInt(e,10)].className="active-tab"}}function showTabs(e){var t=parseInt(e.feed.openSearch$totalResults.$t,10),n=tabbedTOC_defaults,r=e.feed.entry,i=e.feed.category,s="",o=[];for(var u=0;u<(n.showNew===true?5:n.showNew);u++){if(u==r.length)break;r[u].title.$t=r[u].title.$t+(n.showNew!==false?n.newText:"")}r=n.sortAlphabetically?r.sort(function(e,t){return e.title.$t.localeCompare(t.title.$t)}):r;i=n.sortAlphabetically?i.sort(function(e,t){return e.term.localeCompare(t.term)}):i;s='<span class="divider-layer"></span><ul class="sitemapTabs">';for(var a=0,f=i.length;a<f;a++){s+='<li class="sitemapItem-'+a+'"><a href="javascript:clickTab('+a+');">'+i[a].term+"</a></li>"}s+="</ul>";s+='<div class="sitemapContent">';for(var l=0,c=i.length;l<c;l++){s+='<ol class="panel" data-category="'+i[l].term+'"';s+=l!=n.activeTab-1?' style="display:none;"':"";s+=">";for(var h=0;h<t;h++){if(h==r.length)break;var p,d=r[h],v=d.published.$t,m=n.monthNames,g=d.title.$t,y="summary"in d&&n.showSummaries===true?d.summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,n.numChars)+"…":"",b="media$thumbnail"in d&&n.showThumbnails===true?'<img class="sitemapThumbnail" style="width:'+n.thumbSize+"px;height:"+n.thumbSize+'px;" alt="" src="'+d.media$thumbnail.url.replace(/\/s72(\-c)?\//,"/s"+n.thumbSize+"-c/")+'"/>':'<img class="sitemapThumbnail" style="width:'+n.thumbSize+"px;height:"+n.thumbSize+'px;" alt="" src="'+n.noThumb.replace(/\/s72(\-c)?\//,"/s"+n.thumbSize+"-c/")+'"/>',w=d.category?d.category:[],E=n.showDates?'<time datetime="'+v+'" title="'+v+'">'+v.substring(8,10)+" "+m[parseInt(v.substring(5,7),10)-1]+" "+v.substring(0,4)+"</time>":"";for(var S=0;S<d.link.length;S++){if(d.link[S].rel=="alternate"){p=d.link[S].href;break}}for(var x=0,T=w.length;x<T;x++){var N=n.newTabLink?' target="_blank"':"";if(w[x].term==i[l].term){s+='<li title="'+w[x].term+'"';s+=n.showSummaries?' class="bold"':"";s+='><a href="'+p+'"'+N+">"+g+E+"</a>";s+=n.showSummaries?'<span class="sitemapSummary">'+b+y+'<span style="display:block;clear:both;"></span></span>':"";s+="</li>"}}}s+="</ol>"}s+="</div>";s+='<div style="clear:both;"></div>';document.getElementById(n.containerId).innerHTML=s;clickTab(n.activeTab-1)}var tabbedTOC_defaults={blogUrl:"http://www.ciudadblogger",containerId:"SiteMapBlogger",activeTab:1,showDates:false,showSummaries:false,numChars:200,showThumbnails:false,thumbSize:40,noThumb:"//lh4.googleusercontent.com/-ELPJlqQBEWg/VGOtHaYDk9I/AAAAAAAAGJM/f2jRyUgZet0/s128/imagen.png",monthNames:["Enero","Febrero","Marzo","April","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"],newTabLink:true,maxResults:99999,preload:0,sortAlphabetically:true,showNew:false,newText:" - <em style='color:red;'>¡Nuevo!</em>"};for(var i in tabbedTOC_defaults){tabbedTOC_defaults[i]=typeof tabbedTOC[i]!==undefined&&typeof tabbedTOC[i]!=="undefined"?tabbedTOC[i]:tabbedTOC_defaults[i]}(function(){var e=document.getElementsByTagName("head")[0],t=document.createElement("script");t.type="text/javascript";t.src=tabbedTOC_defaults.blogUrl+"/feeds/posts/summary?alt=json-in-script&max-results="+tabbedTOC_defaults.maxResults+"&orderby=published&callback=showTabs";if(tabbedTOC_defaults.preload!=="onload"){setTimeout(function(){e.appendChild(t)},tabbedTOC_defaults.preload)}else{window.onload=function(){e.appendChild(t)}}})()
</script>
Ahora lo que está en color rojo como "nombre-de-mi-blog" lo cambiaremos por la dirección del blog de cada uno con esto tendremos listo el "Site map" sin lío alguno.

Con esto se terminará el proceso para poner este gadget fácil y simple si tienes alguna duda no olvides comentar ;) 

Hasta la próxima, 

ESTAMOS EN: