Aplicar estilo a un párrafo específico con JQuery



Tenemos el siguiente requerimiento:

En nuestros textos existen párrafos que comienzan con un guión o raya y deseamos ponerlos en negrita, por ejemplo:

Este es un párrafo anterior.

- Este es el texto -

Este es otro párrafo

Lo que tenemos que hacer primero es insertar la línea de jquery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Luego el script:

<script>
$( ".contenido p:contains('- ')" ).css( "font-weight","bold" );
</script>

Con esto le decimos a la página que busque el <p> con la clase .contenido y que comience con raya y espacio (- ) y le aplique el estilo css al texto tipo negrita (bold).

Hay que considerar que en lugar de la raya podría ser otro símbolo como un paréntesis, corchete, llave, signo de interrogación, etc.

Estos casos se pueden dar cuando la base de datos ya entrega texto con ese formato plano y editarlo en BD es muy tedioso y peligroso a simplemente no se puede acceder a el, entonces la solución es hacerlo con jquery. Este tipo de párrafos pueden ser canciones, poemas o hasta noticias, el límite es el ingenio.

El código se puede poner al final de la página sin ningún problema de funcionamiento.

Sin tiempo para actualizar tu página, grupo o comunidad en facebook, agrega noticias frescas

Uno de los mayores problemas de los administradores de páginas, grupos, comunidades y hasta perfiles en facebook es la poca actualización con contenido fresco.

Los administradores saben lo importante que es lanzar noticias actualizadas de lo último de los celulares, descubrimientos científicos, startups, economía, etc.

Una forma de hacerlo es consiguiendo una fuente de noticias, aquí les recomiendo una que no trae noticias de violencia, solo noticias de actualidad totalmente para todo público, es un sito peruano llamado DePeru.com y su fuente RSS es:

https://www.deperu.com/rss/002-ianoticias.php
Importante es saber que un RSS es una página web, que se actualiza constantemente con los titulares y resúmenes de un medio noticioso. Según las estadísticas la gente lee más los titulares y no da clic en los links, así que es bueno aprovechar esa ventaja, además las noticias salen con nuestro ícono como si nosotros fuésemos quienes hacemos la noticia.
Ahora que tenemos el RSS, lo que tenemos que hacer es crear una cuenta en IFTTT que es un servicio para automatizar nuestro facebook.

https://ifttt.com

Una vez creada la cuenta hay que sincronizar tu IFTTT con tu facebook, para ello vas a la esquina derecha donde se muestra tu usuario y eliges Preferences, luego la pestaña Profile y el el combo eliges facebook, te va a pedir que te loguees sino lo estás.

Luego debes crear una receta o como ellos le llaman en ingles Create a Recipe.

Una receta es una secuencia de tareas que tu le vas a indicar de la siguiente forma:
Le diremos que cuando haya un item nuevo, o sea una noticia nueva la publique en nuestro facebook.
De esta manera, sigue los pasos de la receta:
  1. Clic en Create a Recipe
  2.  Clic en This, verás un texto grande que dice:  if this then that
  3. Escribe feed y te mostrará solo dos opciones, dale clic en el ícono naranja
  4. Clic en New feed item
  5. Pega la URL      https://www.deperu.com/rss/002-ianoticias.php   y clic en Create Trigger
  6. Clic en That ....   if (ícono) then that 
  7. Escribe facebook y te mostrará solo dos opciones. Aquí podrás elegir si los artículos los quieres en tu perfil o en alguna de tus páginas, solo podrás escoger una.
  8. Luego que hayas escogido donde publicarás las noticias deberás elegir la opción Create Link post.
  9. Verás espacios para completar, pero de frente da clic en Create link action
  10. Seguido te pide que le pongas un título a tu receta o lo dejes con el título recomendado y clic en Create Recipe
Eso es todo, luego en las próximas horas comenzará a aparecer en tu facebook noticias frescas. He elegido esta fuente como les comenté porque no tiene violencia o notas absurdas, todas son interesantes, pero si deseas puedes usar otras.


Exportar solo procedimientos almacenados con phpmyadmin

A menudo nos encontramos con que hemos creado algunas o muchos procedimientos almacenados en nuestra base de datos (BD) y cambiamos de servidor, lo más fácil es exportar el mysql desde cpanel o de phpmyadmin, pero luego nos damos con la sorpresa que los procedimientos almacenados no se copiaron, así que esta es una solución para eso.

Script para Navegar Anterior y Siguiente con el teclado

Muchas páginas necesitan la comodidad de usar el teclado, este script permite en lugar de dar clic con el ratón usar las teclas avanzar y retroceder de nuestro teclado.

Primero, asegúrate que ya tienes el Jquery en tu página.

Segundo, antes de cerrar el body agrega el script.

<script>
$(document).keydown(function(e){
  if(e.keyCode == 37) { // Izquierda
    $("#izquierda").click();
window.location = 'izquierda.html';
  }
  else if(e.keyCode == 39) { // Derecha
    $("#derecha").click();
window.location = 'derecha.html';
  }
});
</script>

Tercero, Cambia las páginas:   izquierda.html y derecha.html  con las respectivas páginas a donde apuntan tus links.

Cuarto,  en tus links normales agrega los ID:  id="izquierda" y id="derecha", con esto ya debe funcionar perfectamente.

<a id="izquierda" href="izquierda.html">Anterior</a>
<a id="derecha" href="derecha.html">Siguiente</a>


Mostrar fotos alternativas para evitar imágenes rotas

A menudo los desarrolladores crean plantillas dinámicas en donde las imágenes son servidas desde otro servidor o desde otras carpeta en el mismo sitio.

Muchas veces estas imágenes no cargan por diversos motivos, así que hay que valerse de un pequeño truco para evitar un cuadrado vacío o la incómoda imagen rota que proporciona el navegador.

La solución un pequeño código:

Tu código de Imagen Normal

<img src="http://guiaplaza.com/foto.jpg" alt="foto">

Tu código de Imagen Optimizado


<img src="http://guiaplaza.com/foto.jpg" alt="foto" onerror="this.src='http://guiaplaza.com/imagenerror.png';">

Como habrás entendido solo hubo que agregar:

onerror="this.src='http://guiaplaza.com/imagenerror.png';" dentro de la imagen.

La imagen alternativa solo se mostrará si es que la imagen principal del SRC no se visualiza.

Importante:


  • Ambas imágenes deben ser del mismo tamaño.
  • Si la imagen principal es más pequeña y el contenedor es más grande la imagen alternativa se verá llenando todos los espacios libres.
  • Se recomienda una imagen en blanco y negro o una imagen con un 50% de opacidad.


Cuidado con los JavaScript: type text/rocketscript

Cuando trates de copiar y adaptar un script de otros sitios web y en sus páginas el script que deseas clonar contenga el type="text/rocketscript" deberás cambiarlo por type="text/javascript".

Además debes eliminar:    data-cfasync="true"  si la hubiere.

¿Por qué?


Estás líneas son agregadas por un servidor llamado CloudFlare, el cual es un servicio de CDN y caché que usan muchos sitios web.

Rocket Loader, es una función que acelera las páginas web el cual cambia las funcionalidades de los JS normales por un sistema que los ejecuta en su servidor reduciendo las conexiones.

Esta función solo trabaja con archivos JS internos alojados en el propio sitio de sus clientes. Por lo que Jquery, CSS y otros archivos externos no los optimiza.

Facebook Audience Network (FAN) para sitios web


Hasta que por fin Facebook se animó a competir con Adsense y por el momento solo en móviles.

Los propietarios de sitios web tienen ahora otra opción para rentabilizar sus páginas para móviles con los anuncios de la red de Facebook.

Los tamaños que existen por ahora son:

- 320x50
- 300x250

Y por supuesto con css personalizados (nativos).

Truco para ganar impresiones de las Networks con Minimo CPM

Si estás afiliado a una network que paga un mínimo CPM como Criteo, Amazon, Switch Ads, etc deberás ayudar a que tu red te brinde impresiones pagadas.

El sistema mínimo CPM o eCPM floor / minimum eCPM es una plataforma publicitaria que paga por encima del valor cpm que tu estableces. Eso quiere decir que si tu aceptas poner sus códigos por un cpm mayor a $0.5 solo se mostrarán anuncios con cpm a partir de esa cantidad.

Ahora bien, hay dos maneras como se muestran las impresiones de esos anunciantes.
  1. Porque tu contenido y tráfico les interesa.
  2. Porque ya han sido visitados antes y están siguiendo al usuario a través de diferentes sitios web, esta técnica se llama ReMarketing o ReTargeting .
Entonces lo que nos queda es la ayuda mutua entre todos los webmasters haciendo artículos que inviten a visitar a los anunciantes, entre los cuales tenemos a:

Si bien es cierto que algunos sitios son locales, también es cierto que reciben visitas de todo el mundo, así que no está mal en promoverlos a todos.

Si conoces mas anunciantes escríbelo en los comentarios y los iremos subiendo al artículo.

La idea de este post es que si muchos publishers enviamos visitas a estos sitios cuando los usuarios visiten nuestro sitio web el retargeting mostrará los anuncios  que necesitamos. No se olviden de Añadir el atributo "rel=nofollow".

Mostrar solo resúmenes en Lista de Artículos, Categorías y Palabras clave en Twenty Fifteen

Una de las desventajas de las plantillas es que no vienen optimizadas como el webmaster desea, así que esta vez vamos a modificar una plantilla llamada Twenty Fifteen para que en su lista de artículos muestre solo un título y su resumen.

Esta optimización fue hecha con la versión 1.4 de Twenty Fifteen. Se necesita saber de html básico para editar la plantilla a nivel de código.

Mejores Networks para tu sitio web - 2016

Hasta ahora he probado muchas redes publicitarias y todas decepcionan, así de lo malo hay que elegir lo menos malo y esta es una muy pequeña lista de ello.

Estas redes están compuestas por sistemas automatizados que muestran publicidad sobre el precio base que el publisher configura, si no tienen anuncios sobre ese precio la network mostrará otros anuncios de reserva que también el editor a predefinido.


Ultimos temas en Soluciones para Webmasters: