PoEdit: [solución] problemas con caracteres en otros idiomas

Si usáis Poedit, como herramienta de traducción de vuestras webs… y suponiendo que nuestro server ya tiene configurado la directivaAddDefaultCharset UTF-8.

4 pasos imprescindibles para evitar problemas de signos o caracteres raros como: �, etc… en diferentes lenguajes (alemán, ruso, etc…) que tengan caracteres diferentes del español:

1. Los archivos fuente (php, html…) tienen que estar codificados en utf-8. Esto es muy importante.

2. Dentro del “head” de vuestras webs, el meta charset tiene que tener la codificación de caracteres en UTF-8:

Para html 5:

<meta charset="utf-8" />

Para html 4:

<meta http-equiv="Content-type" content="text/html;charset=UTF-8">

3. En el archivo php que llamamos a los archivos “locale” de los diferentes idiomas, hay que añadir la función bind_textdomain_codeset con su parámetro “utf-8″, ej:

putenv("LC_ALL=$language");
setlocale(LC_ALL, $language);
bindtextdomain("messages", "./locale/");
bind_textdomain_codeset("messages", 'utf-8'); /* importante */
textdomain("messages");

4. En configuración de los archivos poedit, en el menu: catálogo > propiedades > propiedades de traducción. Elegir “UTF-8″ en los 2 conjunto de caracteres.

WordPress: ACF & qTranslate [solución] conflicto Editor Wysiwyg

Si usáis estos 2 plugins (Advanced Custom Fields y qTranslate) conjuntamente es probable que tengáis problemas al usar el campo “Wysiwyg” de ACF, ya que duplica el texto del último campo Wysiwyg en el Content del post/página.

Esto pasa por un conflito del qTranslate con ACF. Para solucionarlo, prueba a editar el archivo “qtranslate_javascript.php” del plugin qtranslate:

1. Busca la línea (línea 288 aprox.):

qtrans_save(switchEditors.pre_wpautop(o.content));

Y reemplázala por:

if (ed.id.match(/^qtrans_/)) { qtrans_save(switchEditors.pre_wpautop(e.content)); }

2. Busca la línea (línea 334 aprox.):

id = id || 'qtrans_textarea_content';

Y reemplázala por:

window.id = id || 'qtrans_textarea_content';

pd: lo acabo de testear también con mqTranslate 2.6.3 y Advanced Custom Fields 4.3.8.

jQuery: cambiar el ancho o alto de un elemento

Algo muy básico como cambiar los valores de anchura o altura de un o varios elementos usando el método css de jQuery.

Por ej. tenemos un determinado elemento con unas dimensiones (100×100) en css:

<div style="height: 100px; width: 100px; background:red" id="elemento"></div>

Vamos a cambiar esas dimensiones por otras (600×900):

$(document).ready(function() {
    $('#elemento').css({ 'width':'600px', 'height':'900px' });
});

Html Links “Share” de las Redes Sociales más populares

Códigos html para insertar los enlaces para compartir “a pelo” de las principales redes sociales (Twitter, Facebook, Google+, Digg, Reddit, Linkedin, Pinterest, StumbleUpon) directamente desde el href, sin cargar las librerías de cada uno.

<!-- Twitter -->
<a href="http://twitter.com/share?url=http://www.bufa.es&amp;text=Bufa Webmaster" target="_blank">Twitter</a>
<!-- Facebook -->
<a href="http://www.facebook.com/sharer.php?u=http://www.bufa.es" target="_blank">Facebook</a>
<!-- Google+ -->
<a href="https://plus.google.com/share?url=http://www.bufa.es" target="_blank">Google+</a>
<!-- Digg -->
<a href="http://www.digg.com/submit?url=http://www.bufa.es" target="_blank">Digg</a>
<!-- Reddit -->
<a href="http://reddit.com/submit?url=http://www.bufa.es&amp;title=Bufa Webmaster" target="_blank">Reddit</a>
<!-- Linkedin -->
<a href="http://www.linkedin.com/shareArticle?mini=true&url=http://www.bufa.es" target="_blank">Linkedin</a>
<!-- Pinterest -->
<a href="http://pinterest.com/pin/create/button/?url=http://www.bufa.es&amp;description=Bufa Webmaster&amp;media=http://www.bufa.es/wp-content/themes/bufa/images/thumbnail_bufa_default.png">Pinterest</a>
<!-- StumbleUpon-->
<a href="http://www.stumbleupon.com/submit?url=http://www.bufa.es&title=Bufa Webmaster" target="_blank">StumbleUpon</a>

(*) A partir de aquí ya podéis customizarlo a vuestro gusto en diseño y demás…, por ejemplo yo suelo utilizar un popup centrado al abrir cada link (en lugar de que habrán en ventana nueva).

CSS: Responsive de videos Youtube y Vimeo

La forma más sencilla de hacer responsive los vídeos de youtube o vimeo en nuestras webs con CSS. Basta con insertar el iframe dentro de un elemento contenedor con las siguientes 2 clases css:

.video-responsive {
    position: relative;
    margin-bottom: 20px;
    padding-top: 56.25%;
}
.video-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

pd: el porcentaje de 56.25% sale del aspecto 16:9 = (9/16)*100

Ejemplo de vídeo responsive de Vimeo:

<div class="video-responsive">
    <iframe src="//player.vimeo.com/video/17798583" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen width="500" height="281"></iframe>
</div>

Ejemplo de vídeo responsive de Youtube:

<div class="video-responsive">
    <iframe src="//www.youtube.com/embed/TKbOywKH8ws" frameborder="0" allowfullscreen width="560" height="315"></iframe>
</div>