All posts by josejavierfm

Optimizar tiempo de carga web con imágenes lazy

By on visto 1.431 veces

Partimos de una página que “pesa” 23mb (sí, tiene imágenes grandes muy bonitas) y las carga todas normalmente. El resultado es que tarda más de 1 minuto en poder navegar

Si utilizamos el plugin de jquery jQuery.Lazy, y configuramos las imagenes como lazy:

Cargando por defecto una imagen pequeña de carga, que ayuda a saber que la imagen se está procesando

Y por otro lado cambiamos el css para en lugar de poner la imagen de fondo directamente

Por codigo javacript que cambia la propiedad

Tenemos como resultado

Lo que mejora la carga de la web en mas del 75%

El resultado se puede ver en:
http://sociedadhistorica.com/indexVACIO.php
Y la pagina anterior al cambio en:
http://sociedadhistorica.com/indexOLD.php
Actualmente utiliza otro sistema, en lugar de cargar la imagen de “cargando” en cada una de ellas, se ha generado una imagen “lazy” con una calidad del 10%, con la consiguiente reducción de tamaño.
Por defecto carga esa imagen y por detras la imagen con calidad óptima, con ello se consigue una pequeña penalización con respecto a la version anterior, pero se obtiene una mejor sensación al tener la pagina con todas las imagenes, mientras se cargan las de alta calidad.
http://sociedadhistorica.com

Bot de telegram

By on visto 2.036 veces

Partiendo de esta web he creado mi propio telegram que devuelve el texto html escapado

Así para una entrada:

este texto tiene acentos: camión o BRúJULA

Devuelve

este texto tiene acentos: camión o BRÚJULA

El BOT se puede añadir por el nombre acuteHTMLbot

Mostrar placeholder siempre en input HTML

By on visto 2.823 veces

El atributo placeholder de un input se muestra mientras no tiene valor pero luego desaparece.
La idea es mostrar ese contenido en la parte inferior derecha de la caja de texto siempre que tenga un valor.
Asi para una caja como:

Cuando ponemos el valor el placeholder pasa a estar en la parte inferior

El código necesario está en github :

Y se puede ver funcionando en el siguiente enlace

Para ello hay que incluir la libreria jplaceholder.js ( es necesario el uso de JQUERY )

Y posteriormente ejecutar el codigo:

$('input').jPlaceHolderEmpty();

Enviar fichero adjunto por email desde raspberry

By on visto 3.253 veces

Generamos un fichero python

import smtplib
from email.MIMEMultipart import MIMEMultipart
from email.MIMEText import MIMEText
from email.MIMEBase import MIMEBase
from email import encoders

import sys

if len(sys.argv) > 1:
toaddr = sys.argv[1]
else:
toaddr = "destinatario@defecto.ext"

if len(sys.argv) > 2:
asunto = sys.argv[2]
else:
asunto = "Asunto por defecto"

if len(sys.argv) > 3:
cuerpo = sys.argv[3]
else:
cuerpo = "Correo generado automaticamente"
if len(sys.argv) > 4:
fichero = sys.argv[4]
else:
fichero = ""

fromaddr = "tuemail@tudominio.ext"

msg = MIMEMultipart()

msg['From'] = fromaddr
msg['To'] = toaddr
msg['Subject'] = asunto

body = cuerpo

msg.attach(MIMEText(body, 'plain'))

filename = fichero
if fichero is not '':
attachment = open(fichero, "rb")
part = MIMEBase('application', 'octet-stream')
part.set_payload((attachment).read())
encoders.encode_base64(part)
part.add_header('Content-Disposition', "attachment; filename= %s" % filename)
msg.attach(part)

server = smtplib.SMTP('smtp.dominio.ext', 587)
server.starttls()
server.login(fromaddr, "clavedelcorreo")
text = msg.as_string()
server.sendmail(fromaddr, toaddr, text)
server.quit()

Para utilizarlo se usa:

python fichero_python_email.py destino@probando.es "Email enviado desde raspberry" "adjunto un fichero de texto" fichero_que_quiero_mandar.txt

verificar un formulario con verify.notify de manera manual

By on visto 4.458 veces

Si tenemos un formulario y queremos evaluarlo antes de hacer el submit, necesitamos llamar a validate

<script>
function callback(res){
	if (res){
		document.getElementById('formularioquequieroenviar').submit();
	}
}
function comprobar(){
	$('#formularioquequieroenviar').validate(callback);
								
}
</script>
<form id="formularioquequieroenviar" action="xxx.php" method="post">
<input id="numero" name="numero" type="text" placeholder="numero" data-validate="required" />
<input type="button" value="Comprobar" />
</form>

El resultado del callback será el que determine si se hace el submit o no.

Jugando con imagenes en jquery (añadir texto y reemplazar texto )

By on visto 6.730 veces

Añadir automaticamente una leyenda a una imagen con su texto alternativo o poder cambiar las imagenes por un div con el mismo tamaño que la imagen y como contenido el texto alternativo.

Para ello nos hace falta JQuery y estilo css

Dada una imagen

Lo que obtenemos es la misma imagen pero con una leyenda inferior

La otra variante oculta la imagen y en su lugar muestra un hueco del mismo tamaño pero con el texto alternativo como contenido.

El ejemplo completo se puede ver aquí

Como hacer amigos en internet

By on visto 7.467 veces

Vivimos en una sociedad donde las relaciones humanas son cada vez mas difíciles, o por lo menos mas complicadas, dejarme que me explique: Ahora todo es digital, la manera de comunicarnos ha cambiado y hay que adaptarse a ello.
Hace algunos años no existían los móviles, ni con ellos los sms al principio o el whatsapp mas recientemente, tampoco había redes sociales.
Facebook por ejemplo empezó en 2004 pero no fué hasta 2008 cuando se convirtió en lo que es ahora.
A lo largo de los últimos años hemos visto como nacían muchas redes sociales (Instagram, Pinterest, Twitter) y algunas de ellas también morían, como por ejemplo Friendster o myspace.


El tema de los moviles tambien es digno de destacar, hace 20 años los telefonos moviles se utilizaban solo para llamar y muchas veces ni eso, se hacia una “llamada perdida” que dependiendo de la situacion podia significar varias cosas, como ya he llegado o si era de hijos a padres un “llamame tu”.
Ahora los moviles se usan menos para llamar pero mas para la comunicación digital, sobre todo whatsapp, siendo la aplicación mas utilizada en españa.
Pero volvamos al tema principal, antes la unica manera de conocer gente era mediante el trato personal, habia que hablar con la persona y eso podia ser el comienzo de una amistad. Las interacciones se producian en el lugar de trabajo, el gimnasio, o en bares y zonas de ocio, los mas mayores recordarán tambien los recreativos o las plazas llenas de niños jugando.
Ahora todo es digital, cada vez se ven menos niños jugando en la calle, menos balones y menos bicicletas, y un ejemplo se pudo comprobar solo hace unos días, mas concretamente el 25 de diciembre, donde hace 20 años veías gente en la calle estrenando regalos, ahora no había nadie, los chicos solo quieren cosas digitales, consolas, videojuegos, teléfonos móviles y tabletas.
Eso nos lleva otra vez a que si los niños son así, los mayores tambien cambian sus habitos, todo el mundo tiene el movil “a mano”, e Internet es la manera de comunicarnos e informarnos, de interactuar con el entorno, fotos de lo que comemos, de donde vamos y de con quien estamos, etiquetamos todo y comentamos lo que hacen nuestros amigos y conocidos.
Todo esto nos lleva a que cada vez hay menos relaciones personales, incluso entre parejas que estando sentadas juntas se escriben por whatsapp…
Entonces, ¿como se hacen amigos?
Dependiendo de la edad las redes sociales te pueden ayudar, los amigos de tus amigos comentan, tu respondes y puede que surja una conversación, o por el otro lado, si no conoces gente de verdad no puedes añadir a nadie a las redes sociales por lo que no hay manera de empezar a “hablar” aunque sea digitalmente.
Luego está el tema de cuantos amigos tienes y la “calidad” de esas amistades, mucha gente tiene 500 o mas amigos en una red social, pero de verdad los conoces a todos o has hablado con ellos alguna vez.
Entonces descubrimos que una manera de conocer gente puede ser un foro de amistad, donde buscar un tema que te apasione y encontrar gente que también le guste, ese es el punto de partida que necesitamos para conocer gente.

xpath

By on visto 7.871 veces

Partimos del siguiente xml:

<?xml version="1.0" encoding="UTF-8"?>

<bookstore>

<book category="cooking">
  <title lang="en">Everyday Italian</title>
  <author>Giada De Laurentiis</author>
  <year>2005</year>
  <price>30.00</price>
</book>

<book category="children">
  <title lang="en">Harry Potter</title>
  <author>J K. Rowling</author>
  <year>2005</year>
  <price>29.99</price>
</book>

<book category="web">
  <title lang="en">XQuery Kick Start</title>
  <author>James McGovern</author>
  <author>Per Bothner</author>
  <author>Kurt Cagle</author>
  <author>James Linn</author>
  <author>Vaidyanathan Nagarajan</author>
  <year>2003</year>
  <price>49.99</price>
</book>

<book category="web">
  <title lang="en">Learning XML</title>
  <author>Erik T. Ray</author>
  <year>2003</year>
  <price>39.95</price>
</book>

</bookstore>

 

y trabajamos con javascript para utilizar xpath y ver los resultados

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>
<p id="resultado"></p>

<script>




var text = "<bookstore><book category='cooking'>  <title lang='en'>Everyday Italian</title>  <author>Giada De Laurentiis</author>  <year>2005</year>  <price>30.00</price></book><book category='children'>  <title lang='en'>Harry Potter</title>  <author>J K. Rowling</author>  <year>2005</year>  <price>29.99</price></book><book category='web'>  <title lang='en'>XQuery Kick Start</title>  <author>James McGovern</author>  <author>Per Bothner</author>  <author>Kurt Cagle</author>  <author>James Linn</author>  <author>Vaidyanathan Nagarajan</author>  <year>2003</year>  <price>49.99</price></book><book category='web'>  <title lang='en'>Learning XML</title>  <author>Erik T. Ray</author>  <year>2003</year>  <price>39.95</price></book></bookstore>";

path = "/bookstore/book/author";
var parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
 showResult(xmlDoc,path);
 showResult(xmlDoc,"//title");
 showResult(xmlDoc,"//book/author[1]");
 showResult(xmlDoc,"//book[@category=\"web\"]/title");

function showResult(xml,path) {
    var txt = "";
    
    if (xml.evaluate) {
        var nodes = xml.evaluate(path, xml, null, XPathResult.ANY_TYPE, null);
        var result = nodes.iterateNext();
        while (result) {
            txt += result.childNodes[0].nodeValue + "<br>";
            result = nodes.iterateNext();
        } 
    // Code For Internet Explorer
    } else if (window.ActiveXObject || xhttp.responseType == "msxml-document") {
        xml.setProperty("SelectionLanguage", "XPath");
        nodes = xml.selectNodes(path);
        for (i = 0; i < nodes.length; i++) {
            txt += nodes[i].childNodes[0].nodeValue + "<br>";
        }
    }
    document.getElementById('resultado').innerHTML += "<strong>"+path+"</strong><br/>"+txt+"<br>";
}
</script>

</body>
</html>

Y vemos como resultado:

/bookstore/book/author
Giada De Laurentiis
J K. Rowling
James McGovern
Per Bothner
Kurt Cagle
James Linn
Vaidyanathan Nagarajan
Erik T. Ray

//title
Everyday Italian
Harry Potter
XQuery Kick Start
Learning XML

//book/author[1]
Giada De Laurentiis
J K. Rowling
James McGovern
Erik T. Ray

//book[@category="web"]/title
XQuery Kick Start
Learning XML

Se puede interactuar y probar desde la url: aquí