web – Página 6

Cómo usar los tooltips de wowhead

4 junio, 20115 septiembre, 2017 Joseba Garai Deja un comentario

Wowhead es una página con abundante información sobre el juego World of Warcraft. Uno de los servicios que ofrecen es que cuando colocas el ratón sobre un enlace adecuadamente formado aparece un tooltip que nos da valiosa información sobre el hechizo o objeto del juego. Si queremos añadir esa información a nuestra página debemos incluir previamente un script mediante el siguiente código:


<script src="http://static.wowhead.com/widgets/power.js" type="text/javascript"><!--mce:1--></script>

El script funciona incluso colocándolo en una entrada de WordPress.

Este script se activa con los enlaces que encuentre en nuestra página que apunten a Wowhead. Cuando se activa el script, recupera la información del hechizo o objeto correspondiente y muestra el tooltip.


<a>href="http://es.wowhead.com/item=25697">Brazales de acechador vil</a>

<a>href="http://es.wowhead.com/item=25697">Brazales de acechador vil</a>

Quedando así:
Brazales de acechador vil

Si estamos usando WordPress simplemente usamos la herramienta Insertar/Editar enlace y ponemos como enlace la página del hechizo.

Además podemos usar parámetros para en atributo rel de los enlaces permitiendo sacar mucho más partido de esta funcionalidad.

Más información en wowhead/tootips

Cómo usar Thickbox en WordPress

31 mayo, 20115 septiembre, 2017 Joseba Garai Deja un comentario

Thickbox es una librería Javascript que tiene como funcionalidad el mostrar contenido como una popup centrado en la ventana del navegador. El resultado es muy elegante y vistoso.
Wordpress ya tiene las librarias necesarias y los usa internamente por lo que solo hace falta llamarlas previamente.


<?php
wp_enqueue_style("thickbox");
wp_enqueue_script("jquery");
wp_enqueue_script("thickbox");
?>

<?php

wp_enqueue_style("thickbox");

wp_enqueue_script("jquery");

wp_enqueue_script("thickbox");

Y para usarlo solo deberemos llamar a la clase thickbox en cualquier enlace:


<a class="thickbox" href="https://nireleku.com/old-content/uploads/2011/05/2KEuD.jpg"></a>

Dando como resultado:

Si no queremos tocar el código de wordpress para añadir la llamada de las funciones php podemos usar el plugin ThickBox.

Qué es el CSS reset

30 mayo, 20115 septiembre, 2017 Joseba Garai Deja un comentario

El CSS Reset es una práctica de diseño que trata de solventar la divergencia en la presentación de páginas web que hay entre diferentes navegadores. Aunque hay un estándar cada fabricante de navegador puede definir valores distintos a algunas de estas propiedades CSS. Esta inconsistencia provoca que una página web se vea distinta entre navegadores.

Para evitar esto, antes de añadir nuestro diseño se ponen a un valor inicial las propiedades css, para comenzar el diseño desde una base común.

Uno de los códigos más usados es el de Eric Meyer que podemos ver en el siguiente fragmento de código:


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need ‘cellspacing="0"’ in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, font, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td {

margin: 0;

padding: 0;

border: 0;

outline: 0;

font-weight: inherit;

font-style: inherit;

font-size: 100%;

font-family: inherit;

vertical-align: baseline;

}

/* remember to define focus styles! */

:focus {

outline: 0;

}

body {

line-height: 1;

color: black;

background: white;

}

ol, ul {

list-style: none;

}

/* tables still need ‘cellspacing="0"’ in the markup */

table {

border-collapse: separate;

border-spacing: 0;

}

caption, th, td {

text-align: left;

font-weight: normal;

}

blockquote:before, blockquote:after,

q:before, q:after {

content: "";

}

blockquote, q {

quotes: "" "";

}

La idea del css reset es un interesante tema de debate entre abundantes posturas, incluso entre aquellos que están completamente en contra de usar esta práctica.

Categoría: web

Cómo usar los tooltips de wowhead

Cómo usar Thickbox en WordPress

Qué es el CSS reset

Sitios de interés