Otros tres packs de íconos

Birdie Adium
	Contiene 18 íconos de 128x128 en formato PNG. descargar

3D Silver Social Media
	Contiene 12 íconos de 16x16 128x128 en formato PNG. descargar

Jigsoaicons
	Contiene 424 íconos de 16x16, 24x24, 48x48 y 64x64, en formato PNG. descargar

El problema de los menús que no se despliegan

Toda etiqueta es un rectángulo, si tiene un borde o un color de fondo esto es evidente pero, si no lo tiene, sigue siendo un rectángulo que ocupa un determinado espacio y se ubica en una determinada posición de la página. Esta es la clave de todo, entender eso y además, tener en cuenta que el orden en que son agregadas influirá en su resultado ya que, aunque las veamos ubicadas gráficamente de cierto modo, para el navegador, eso, sólo es un dibujito ya que todos ellos siguen una regla sencilla: para ellos, el orden natural es secuencial, de arriba hacia abajo y de derecha a izquierda.

Es cierto que pueden mostrarse de cualquier otro modo, para eso están las propiedades (float, position, margin, etc) pero, al navegador, no le interesan esos detalles y eso, justamente, es lo que puede crear conflictos o problemas.

Si toda etiqueta es un rectángulo real (tiene ancho y tiene alto aunque no los definamos) y armamos algo como esto, donde simplemente hay dos DIVs, uno arriba y otro abajo y al de abajo lo "subimos" un poco con un margen negativo, tal vez, dependiendo de las reglas de estilo que tengamos, el enlace que está allí, no funcionará. Si ponen el cursor encima y tratan de hacer click, no pasará nada, ni siquiera veremos la manito indicativa:

A B C D E F

un enlace

¿Por qué pasa esto? porque el de arriba está encima del enlace y, aunque es transparente, sus reglas de estilo TAPAN el enlace. Si le pusiéramos un color de fondo, lo veríamos claramente:
ver | restaurar.

¿Cómo se soluciona? Lo lógico sería repasar las reglas de estilo de esas etiquetas ¿No será que uno es demasiado alto y compensamos eso con márgenes negativos? ¿Es necesaria la propiedad position? Las respuestas pueden ser infinitas y no pretendo darlas, todo dependerá y, llegado el caso, siempre nos queda la opción de usar z-index. En este ejemplo, bastaría invertir el orden:

CORREGIR EL ERROR | ver error

Este mismo problema es el que genera muchísimas consultas sobre menús que no se despliegan aunque, en realidad, no es que no se desplieguen sino que no se ven desplegados.

Si tenemos un contenedor (un DIV) con ese menú que vimos armadito y lo agregamos al header de nuestro sitio, tal vez, dependiendo de dónde lo hayamos puesto y de las reglas de estilo del resto de nuestra página, se verá bien pero ¿no funciona?

• menu 1
• menu 2
  • submenu 2.1
  • submenu 2.2
  • submenu 2.3
• menu 3
  • submenu 3.1
  • submenu 3.2
  • submenu 3.3
• menu 4

Aliquam erat volutpat. Phasellus ligula augue, hendrerit sit amet pharetra et, auctor nec odio! Nunc placerat facilisis volutpat! Donec nisi elit, convallis nec vestibulum ac, aliquam quis magna! In aliquet arcu eget mi mollis at porta erat condimentum. Pellentesque congue ante non felis fringilla mattis. Morbi urna lectus; laoreet id tempor vitae, pretium id nibh. Sed nisl eros, molestie non luctus nec, pretium nec felis. Praesent pharetra egestas interdum. Quisque consequat placerat mi, in pharetra nisl mattis in. Aenean id orci vel enim ultrices eleifend!

¿Por qué sólo se ve un pedacito? Por el mismo motivo que el enlace del ejemplo anterior no funcionaba aunque, en este caso, no se trata de una etiqueta que es demasiado alta y tapa a la de abajo sino de una etiqueta cuya altura es escasa (UL LI) y que contiene otras que sólo se ven cuando se coloca el cursor encima pero, no tienen espacio suficiente ya que la etiqueta que está debajo (el texto), ocupa ese lugar así que queda encima del menú desplegado.

Otra vez, esto se resuelve con z-index:

CORREGIR ERROR | ver error

¿Y que es z-index? Un numero de orden que sólo se aplica a los elementos que tengan definida la propiedad position como relative, absolute o fixed y, dicho muy livianamente, indica cuál está encima de cuál; por defecto, se "apilan" en el mismo orden en que se encuentran en el código así que en este caso, la segunda (el texto) tiene un valor implícito de z-index, superior a la primera (el menú) y bastaría invertir ese orden para que el menú se viera desplegado.

Dependiendo del caso (he usado muchas veces la palabra depender porque nada de todo esto es una ciencia exacta) deberemos agregarle las propiedades z-index al menú y al div inferior (un valor más alto al menú); o bien, simplemente, sólo agregar la propiedad z-index al menú (una valor cualquiera, no hace falta poner valores exorbitantes):

#mi-menu {
  position:relative;
  z-index: 100;
}

Blogger y la nueva opción: deshabilitar la navbar

Hace unos días, Felipe Calvo me preguntaba si sabía que ya era posible deshabilitar totalmente la navbar de Blogger desde la misma ventana de diseño y confieso que no lo sabía.

Es que uno es un animal de costumbres y desde hace años, lo primero que se hace en un blog es eliminarla manualmente, agregando el CSS correspondiente aunque ... en realidad nunca se elimina sino que se la mantiene oculta con lo cual, el código, que Blogger agregaba de modo automático, seguía siendo parte del código fuente de la página. Ahora, con esta opción, ese código desaparece casi por completo.

El cambio, no sólo se ve allí, también se ve en la plantilla misma que ahora incluye una nueva sección:

<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='false' title='NavBar ' type='Navbar'/>
</b:section>

Y si desplegamos el contenido, veremos todo el código que antes se agregaba de modo directo.

<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='false' title='NavBar ' type='Navbar'>
<b:includable id='main'><script type=&quot;text/javascript&quot;>
    function setAttributeOnload(object, attribute, val) {
      if(window.addEventListener) {
        window.addEventListener(&#39;load&#39;,
          function(){ object[attribute] = val; }, false);
      } else {
        window.attachEvent(&#39;onload&#39;, function(){ object[attribute] = val; });
      }
    }
  </script>
<iframe src=&quot;//www.blogger.com/navbar.g?targetBlogID=XXXXXXXXXXXXXXXXX&amp;amp;blogName=NOMBRE&amp;amp;publishMode=PUBLISH_MODE_BLOGSPOT&amp;amp;navbarType=BLUE&amp;amp;layoutType=LAYOUTS&amp;amp;searchRoot=http://MIBLOG.blogspot.com/search&amp;amp;blogLocale=XX_XX&amp;amp;v=1&amp;amp;homepageUrl=http://MIBLOG.blogspot.com/&amp;amp;vt=XXXXXXXXXXXXXXXXX&quot; marginwidth=&quot;0&quot; marginheight=&quot;0&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; height=&quot;30px&quot; width=&quot;100%&quot; id=&quot;navbar-iframe&quot; allowtransparency=&quot;true&quot; title=&quot;Navegación y búsqueda de Blogger&quot;></iframe>
<div></div><script type=&quot;text/javascript&quot;>
(function() {
var script = document.createElement(&#39;script&#39;);
script.type = &#39;text/javascript&#39;;
script.src = &#39;//pagead2.googlesyndication.com/pagead/js/google_top_exp.js&#39;;
var head = document.getElementsByTagName(&#39;head&#39;)[0];
if (head) {
head.appendChild(script);
}})();
</script>
</b:includable>
</b:widget>
</b:section>

Si deshabilitamos la navbar, el código de la plantilla sigue allí pero ya no se ejecuta y, obviamente, lo primero que uno piensa es, genial, la deshabilitamos y listo pero ... Blogger es Blogger y, por lo que he visto, cuando hacemos eso, desaparecen los íconos de edición rápida del blog.

¿Será un error? ¿Será que funciona así? En todo caso, hay que tener cuidado porque Blogger es mudo y jamás informa de estos cambios porque, claro, nosotros somos adivinos

repost.us: Facilitar la inclusión de entradas

Repost.us es un servicio que permite que los visitantes, incluyan entradas de nuestro blog en otros sitios, de manera sencilla y sin los conflictos que suele traer este tipo de copia porque lo hace generando un iframe [más información].

Algunas de las ventajas que dice ofrecer el sistema:

• es un enlace a la entrada original y evita el contenido duplicado.
• si la entrada se actualiza, el servicio actualizará todos los iframes insertados
• se puede personalizar y definir si se verán completos o no
• es posible excluir sitios o permitir que sólo algunos puedan utilizar el sistema
• permite agregar anuncios publicitarios

Para utilizarlo, se debe crear una cuenta gratuita y luego, ir completando las opciones; básicamente, establecer el sitio web donde queremos aplicar el sistema y luego, copiar y pegar el código que os dan que tiene dos partes; la primer, la pondremos antes de <:/head>

<script src='http://static.1.rp-api.com/rjs/repostus.js' type='text/javascript' />
<meta content='0000000000000000000' name='RepostUsAPIKey' />

y la segunda en donde quisiéramos mostrar alguno de los botones disponibles que, normalmente, sería en alguna parte del footer de las entradas:

<a class='rpuRepostUsButton' expr:href='&quot;https://secure.repost.us/syndicate/create?url=&quot; + data:post.url'>
  <img title='Repost This' alt='Repost This' src='http://secure.repost.us/images/button-hrz-sml.png'/>
</a>

El servicio puede agregarse a Blogger sin problemas y quienes usan Wordpress disponen de un plugin que simplifica la tarea.

En general, es conveniente ingresar a la opción llamada Selectors y allí, agregar las clases donde se encuentran nuestras entradas:

Article Title: .post-title
Article Boded .post-body

la siguiente página, nos permitirá verificar si todo es correcto, probando con cualquier URL de nuestro blog.

REFERENCIAS:labrujulaverde.com

Cinco selectores especiales

En CSS, un selector es un vínculo entre el HTML y la hoja de estilo. Todas las etiquetas son selectores y cada uno de ellas posee un conjunto de propiedades generales y particulares. Pero como esto es insuficiente, también existen selectores especiales que nos permiten crear reglas muy específicas.

leer artículo actualizado

Muchas animaciones con CSS y mucha paciencia

Una animación con CSS es algo similar a una transisicón que se repite un número de veces y requiere de dos partes, establecer los intervalos y propiedades a modificar en @keyframes y la propiedad animation en cualquier etiqueta.

leer artículo actualizado

¿Contraseñas en Blogger? No, no y no

Son muchos los que preguntan algo cuya respuesta parece no satisfacerlos o se niegan a aceptarla, probablemente, porque si uno busca en la web, verá cientos de artículos explicando como hacer lo que yo digo que no puede hacerse o, mejor dicho, lo que digo que NO DEBE hacerse y, en este caso, no es un tema de opiniones personales y discutibles, es algo elemental.

La pregunta repetida es ¿cómo restringir el acceso a determinadas páginas? ¿cómo permitir la descarga de ciertos archivos a determinados usuarios? ¿cómo hago para agregar una contraseña a mi blog de Blogger?

Y la respuesta es sencilla, simplemente NO hay manera de hacer eso porque el único lenguaje que podemos usar es JavaScript y con ese lenguaje no existe ninguna forma segura de establecer una contraseña por una razón básica: el código es visible y por lo tanto, cualquiera puede verlo. Es lo mismo que escribir una pregunta y dejar visible al respuesta.

¿Se puede hacer? Si, claro pero ¿para qué? Es completamente inútil. El manejo de contraseñas requiere de lenguajes que se ejecuten en el servidor y no en el navegador.

¿No están convencidos? Usen CTRL+U para mirar el código fuente de los "ejemplos prácticos" que se ofrecen.