Tutorial Details

• Topic: HTML5 + CSS
• Difficulty: Intermediate
• Screencast duration: 15 min

Download Source Files

Demo View It Online

This entry is part 3 of 3 in the series Static Admin Bar

• Design a Static Admin Bar in Photoshop
• Building a Static Admin Bar for the Browser
• Quick Tip: Tooltips, Courtesy of HTML5 Data Attributes

Tooltips are relatively simple to implement by just adding a bit of markup to your HTML and employing a bit of CSS. However, if you’ve never heard of HTML5 data attributes, you may want to check out this alternative (and much cleaner) approach.

---

Watch Screencast

If you’ve been following the Admin Bar series, this screencast should finish things off nicely. If you haven’t been following along, don’t worry; this screencast will teach you something you can use in all kinds of situations. We’re going to look at a couple of options to get our tooltips up and running.

Don’t like ads? Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes!

If, for some crazy reason, you’d rather not watch me demonstrate things, below are a couple of snippets to take away and play with. Note: these are simplified examples – you may want to add browser prefixes and additional styling etc.

---

Tooltip Snippet: Added Markup

The first example uses additional markup in the form of a <span> within our anchor. It works just fine, allows us to add a decorative ‘point’ to our tooltip, and is currently the safer option where browser compatibility is concerned.
HTML:

1	<a href="#" class="tooltip">This is the link<span>this is the tip!</span></a>

CSS:

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

a.tooltip span {     font-size: 10px;     position:absolute;     z-index: 999;     white-space:nowrap;     bottom:9999px;     left: 50%;     background:#000;     color:#e0e0e0;     padding:0px 7px;     line-height: 24px;     height: 24px;     opacity: 0;     transition:opacity 0.4s ease-out;     }       a.tooltip span::before {     content: "";     display: block;     border-left: 6px solid #000000;     border-top: 6px solid transparent;     position: absolute;     top: -6px;     left: 0px;     } a.tooltip:hover span {     opacity: 1;     bottom:-35px;     }

---

Tooltip Snippet: HTML5 Data Attribute

Here’s the example which cleans up our markup, uses the HTML5 data-attribute to hold the value of our tooltip, and the css ::before pseudo-element to display it. Much neater.
HTML:

1	<a href="#" class="tooltip" data-tip="this is the tip!">This is the link</a>

CSS:

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23

a.tooltip::before {     content: attr(data-tip) ;       font-size: 10px;     position:absolute;     z-index: 999;     white-space:nowrap;     bottom:9999px;     left: 50%;     background:#000;     color:#e0e0e0;     padding:0px 7px;     line-height: 24px;     height: 24px;     opacity: 0;     transition:opacity 0.4s ease-out;     } a.tooltip:hover::before {     opacity: 1;     bottom:-35px;     }

Google Penguin: descubre el nuevo algoritmo de Google

Germán PiñeiroMiércoles, 9 de mayo de 2012




El 24 de abril se estrenaba en España el nuevo algoritmo de Google, que penaliza el exceso de SEO y apuesta por los contenidos de calidad.


Germán Piñeiro, Consultor de Marketing

Parece más que claro que Google ha optado por darnos una sorpresa “anual” con las modificaciones de su algoritmo. Casi sin tiempo para tomar aliento y, cuando ha pasado poco más de un año desde Panda, nos llega ahora Penguin. Concretamente el pasado 24 de abril aterrizaba en España el nuevo algoritmo de Google.
Más joven, más humano, más exigente y con una capacidad única para identificar y penalizar aquellas marcas que dejen de lado la cobertura emocional que subyace hoy en la Web. En esta red dinámica, versátil, ubicua y cambiante, el nuevo Google Penguin penalizará cualquier estrategia de contenidos en la que no esté presente el equilibrio entre las métricas, los intercambios de enlaces, el trabajo de optimización SEO y la calidad.
Por qué Google Penguin…
Está más que claro que a medida que hemos ido avanzando por el ciclo de maduración del Social Media, y cuando ya todas las vertientes de nuestra personalidad están expuestas a través de nuestros perfiles en los entramados sociales, hemos ido construyendo también un universo en el que la competencia es feroz y las exigencias de “crear constante y planificadamente” son inaplazables.
Google Penguin penaliza el excesivo trabajo de SEO –sobreoptimización-, penaliza también las técnicas de promoción habituales basadas en la elaboración de contenido carente de calidad, en la que los enlaces se establecen para derivar tráfico hacia una marca, sin que intervengan el impacto, la atracción y la emoción.
Penaliza también la falta de calidad: la ausencia de coherencia entre los títulos y el contenido, la falta de compromiso con las necesidades ajenas y, en general, cualquier estrategia pensada para ahorrarnos el tránsito por el camino de la construcción de vínculos sólidos, emocionales y retroalimentados. Y como no podía ser menos, siguiendo las “sabias” directrices de su antecesor, Google Penguin tampoco deja espacio para el contenido duplicado.
En definitiva, nos encontramos iniciando una nueva etapa en relación a la empresa y los negocios online. En el momento actual, el contenido y el marketing de contenidos de calidad continúan avanzando en su liderazgo. Sólo aquellos contenidos en los que la opinión y la naturaleza genuina se conjuguen con el adecuado uso de las herramientas y recursos de optimización SEO -como es el linkbuilding-, lograrán transitar por la senda de la influencia y el crecimiento.
Recomendaciones para aliarse con Google Penguin y no morir en el intento
- Escucha… Escucha en las redes, cuantos clientes potenciales, aliados y competencia, interactúan en ella. Cuanto más escuches, más información obtendrás de lo que necesitan y podrás ofrecerles contenidos de calidad.
- Crea contenido de forma constante: cuanto mayor sea la actualización de tu sitio, más presencia tendrá en los resultados de búsqueda; analiza qué necesita tu público y dáselo de forma constante y con una frecuencia acertada.
- Escribe para las personas. Cuando alguien necesita saber cómo afectará Google Penguin a su blog o web y le pregunta a Google, lo hace expresando un sentimiento; la necesidad de saber.
- Amplia tu listado de técnicas blackhat seo a evitar. A Google no le gustan nada los textos o enlaces ocultos, las redirecciones sospechosas, las keywords irrelevantes o el exceso de keywords, los links obtenidos de manera automatizada o mediante intercambios o compra, etc.
Recuerda además que, cada vez con mayor frecuencia, los contenidos son consumidos por un usuario en movimiento, por lo que cuanto más directo y sencillo sea el mensaje, mayor será su impacto.
La Web cambia a una velocidad de vértigo. Es esencial aceptar que esto es así, y que la búsqueda se centra en el equilibrio entre la humanización y la especialización. Debemos sumar nuestros talentos y recuperar aquellas “viejas” y buenas costumbres de desarrollarnos en comunidad. ¡Que es como somos realmente eficientes! Y eso es lo que nos exige Google, una gran apuesta.