Optimización en el Diseño Web

Han pasado muchos años desde que nació la web allá por el año 1989. Y desde entonces mucho se ha evolucionado
Empezamos con paginas sencillas con mucho texto y poca imagen, teniendo en cuenta las velocidades de conexión y los ordenadores que había entonces.
Recuerdo que mi vida informática empecé con un IBM 8086, sin disco duro, el siguiente fué un 286, pasando por un 386, el 486 y el pentium. Fué con el pentium con el que descubrí internet, conectando con un modem de 56k, con los problemas que ocasionaba que si querías navegar te quedabas sin teléfono y podía pasar que te “pidieran” que dejaras de utilizarlo para poder llamar. Eran otros tiempos, sin móviles, y nos apañábamos con lo que teníamos.
Por aquel entonces no estaba ni google, ni Metacom SBD, ni las redes sociales, ahora seria impensable, pero utilizábamos terra y altavista.

Evolución de youtube
Desde 2009 a día de hoy, 2018
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017

Noviembre de 2018

Como se puede apreciar, se empieza con un diseño simple con mas texto que imágenes, con una resolución fija, normalmente de 800*600 o como mucho de 1024×768. Las paginas se hacían para un resolución, si tenias una pantalla mas pequeña tenias scroll por todas partes.

Otro detalle por el que han pasado las paginas web es la tecnología utilizada, por debajo está basado en HTML, puede utilizar javascript y css. Por encima también hay diferentes tecnologías que pueden generar ese “lenguaje” que al final es el que entiende en navegador, como Java o PHP.

Hubo un tiempo en el que las web se hacían utilizando tecnología flash, eran mucho mas vistosas pero requerían otra manera de hacer las paginas, no se utilizaba el HTML sino que toda la información estaba contenida en un ficheros swf. para que funcionaran necesitaban un reproductor en el navegador, que normalmente se tenia que instalar aparte, que necesitaba de actualizaciones aparte de las del navegador y que era utilizado por sus agujeros de seguridad como entrada a los equipos por parte de los hackers. Esa tecnología fue muy criticada por Steve Jobs, y los dispositivos de Apple (iphone y ipad) no lo incluyeron, el paso del tiempo le ha dado la razón y a día de hoy se considera muerto, ha sido sustituido por HTML5, que incluye muchas de las características que faltaban a html y que flash proveía. Cada día disminuye el uso de flash y aumenta el de html5.

Otro de los puntos importantes a la hora de hablar de la web es el tema del diseño móvil, en 2018 el uso del móvil para navegar supera al ordenador, por lo que es muy importante que una web se vea bien tanto en dispositivo móvil como en una pantalla grande. Para eso hay dos estrategias, paginas que realizan dos proyectos diferentes, con el coste que eso conlleva, y que al entrar en la web detectan cual es el dispositivo y te redirigen de uno a otro, como por ejemplo facebook, con su web movil https://mobile.facebook.com/ y paginas que son responsive, y se adaptan a la pantalla como por ejemplo Metacom SBD. Esta importancia del diseño móvil llega incluso a Google, donde su algoritmo para aparecer en las búsquedas premia a las paginas que se ven bien en versión móvil.

Por lo que es muy importante contar con un buen equipo de marketing que pueda dar valor a la web, que sepa orientar y conseguir el resultado ideal.

Redimensionar caja de texto HTML en funcion del tamaño del texto

Si tenemos un textarea (o varios) podemos hacer que se adapte al contenido del texto para evitar barras de scroll con el siguiente codigo:

   <form id="f_example">
      <textarea id="t1"></textarea>
      <textarea id="t2"></textarea>
   </form>
$('#f_example').on( 'change keyup keydown paste cut', 'textarea', function (){
    	$(this).height(0).height(this.scrollHeight);
		
	}).find( 'textarea' ).change();

Optimizar tiempo de carga web con imágenes lazy

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

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&oacute;n o BR&Uacute;JULA

El BOT se puede añadir por el nombre acuteHTMLbot

Mostrar placeholder siempre en input HTML

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

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

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

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

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 )

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

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.