dev – Página 6

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.

Page Speed de Google

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

La velocidad a la que se descarga de una página web es cada vez más importante. Google valora el tiempo que se tarda en la descarga cuando posiciona la página en los resultados del buscador. Siendo este un parámetro importante debemos tratar de optimizar también en cuanto a velocidad nuestras páginas.

La misma Google ofrece gratuitamente un servicio que diagnostica nuestra página y nos informa de aquellos puntos que han de ser mejorados clasificándolos por su importancia. Este servicio se llama PageSpeed y está localizado en:

http://pagespeed.googlelabs.com

Su uso es sencillo, solo tenemos que introducir la url de nuestra página y tras unos segundos nos muestra el informe con propuestas de mejora. Para cada aviso además de una explicación de qué es cada problema, nos dará consejos para resolverlo.

Categoría: dev

Cómo usar Thickbox en WordPress

Qué es el CSS reset

Page Speed de Google

Sitios de interés