All posts by josejavierfm

Cargar una imagen si falla la principal

Si en nuestra pagina cargamos una imagen que no está en nuestro servidor nos arriesgamos a que esa imagen deje de estar disponible y nos encontremos que no carga y nuestra web quede fea.

Para evitar eso podemos indicar una imagen de “reserva” que se cargará si no lo hace la principal.

Para ello definimos una función javascript:

<script>
    function imgError(image,url) {
    image.onerror = "";
    image.src = url;
    return true;
}
</script>
<img src="https://www.imagenquepuedefallar.com/imagen/image.png" onerror="imgError(this,'image/generic.png')"/>

Ver consola javascript de Android en el ordenador

Para poder ver la consola del móvil en el ordenador es necesario activar la depuración USB, para ello hay que activar el menú de desarrollador en el móvil.
Una vez que lo tengamos, hay cientos de tutoriales, lo importante son los pasos en el ordenador.
Lo primero es conectar el teléfono al ordenador con cable USB.
En el móvil hay que activar la opción de transferencia de archivos, (hay marcas que por defecto al conectarlo solo cargan).


Luego es posible que también pregunte si confía en el ordenador, la respuesta es obvia.
Y ahora vamos al lío.
Abrimos chrome en el ordenador y con el botón derecho pulsamos en inspeccionar.

Una vez que se abre la consola nos vamos al menu de opciones -> Mas opciones -> dispositivos remotos

Aquí nos debería aparecer el dispositivo conectado.

Podemos usar alguna de las pestañas ya abiertas o abrir una nueva con la dirección que queremos


una vez abierta, pulsamos en inspeccionar y se nos abre una ventana que nos muestra la pagina que estamos viendo en el navegador y donde podemos acceder a la consola de javascript.

Lenguajes de programación

Llevo muchos años programando y a lo largo de este tiempo he pasado por muchos lenguajes de programación. Empecé a trabajar con Visual basic, allá por el año 2000, con su versión 6, aunque al poco pase a la versión de .net, si no recuerdo mal en 2002, por necesidades del proyecto en el que estaba, además me toco empezar con c# también en el año 2002, con ellos realicé mis trabajos fin de carrera en la universidad. Bueno, para ser exactos en la universidad el primer lenguaje que recuerdo fue c++ con sus punteros, y con unos entornos muy simples, que hacían que salieran errores con mucha frecuencia; porque pascal hacia ya muchos años que no se utilizaba, pero nos lo enseñaron igual.

Por mi cuenta aprendí PHP y durante muchos años mi trabajo me ha llevado por ese camino, con este lenguaje he visto distintos frameworks, pero no me he atado con ninguno, en paralelo aprendi Java, que también he utilizado en mis trabajos.
Por iniciativa propia me apunté a un curso para hacer aplicaciones de IOS, y conocí objective-c, con el que llegué a publicar una decena de aplicaciones para móvil y tablet, algunas propias y otras para clientes, a día de hoy todavía alguna está disponible en el market, si bien no tiene muchas descargas, se utiliza prácticamente a diario.

Como le cogí el gusto a las aplicaciones móviles, me metí también en hacerlas para Android, aunque aquí se repite el lenguaje, pues Java fue la opción elegida.
Con el tiempo se ha ido dejando de utilizar objective-c y ha tocado reciclarse, otro curso para poder aprender Swift, versión 3, aunque ya van por la 4, y reconozco que este lenguaje incluye demasiados cambios entre versiones….
He hecho también un curso para ver Python, que no he llegado a utilizar profesionalmente en ningún proyecto y pensando no soy capaz de recordar ninguno mas… porque Javascript no lo incluyo como lenguaje de programación…

Me ha dado por pensar si no será hora de ver algún lenguaje nuevo, pues en este oficio, hay que estar en continuo reciclaje, y los mercados son cambiantes.
Una búsqueda rápida en google nos muestra los lenguajes de programación de 2010


https://desarrolloweb.com/de_interes/ranking-lenguajes-programacion-noviembre-2010-4397.html

Y los que se usan en 2018

Lenguajes Programación más populares 2018 (Ranking Tiobe)

 

Y parece que no ha cambiado mucho en estos años, Java sigue siendo el ganador indiscutible y C, tanto c como c++ siguen en el podio.

ya por curiosidad he buscado el año 2000 donde Java no era la primera opción

El lenguaje de los grandes programadores

Veo también que PHP ha bajado bastante, aunque sigue siendo la tecnología mas utilizada en Internet

Aproximadamente el 78% de todos los sitios web utilizan alguna versión de PHP, pero la mayoría usa versiones viejas.

Hay un lenguaje que se me pasa por la cabeza y del que nunca he visto nada y es Ruby, para utilizar con el entorno de Ruby on Rails

Volviendo a google hago una búsqueda de que lenguaje aprender en 2019 y me quedo con la entrada de 5 lenguajes y veo que no voy mal, conozco 4 de 5 y en menciones honorificas tienen a Ruby, por lo que no parece mala idea conocerlo.

Como proteger tu contraseña de wifi

Cada vez utilizamos mas cosas sin cables, lo queremos todo wireless, teléfonos, auriculares…
Y ademas cada vez tenemos/queremos mas cosas conectadas, televisiones, que se conectan a Internet y se convierten en Smarttv (nos permiten ver vídeos en youtube, escuchar música en Spotyfy o ver series y películas de compañías como Netflix, HBO o amazon prime video), neveras ( que se conectan a Internet y pueden ordenar productos a medidas que se van gastando, yo esto todavía lo veo un poco verde, pero en unos años será lo normal… ), termostatos ( que puedes controlar desde el móvil para encender o apagar la calefacción desde la calle, o los hay mas inteligentes, que en función de la ubicación predefinida en los ajustes y de los datos de temperatura y humedad que obtienen de servicios web de meteorología, son capaces de adaptar su programación de manera automática, así para un día de invierno pero que está soleado, sube menos la calefacción que si está nublado), cámaras (que te permiten ver tu casa desde cualquier lugar del mundo, esto también sirve para poder ver a tus mascotas cuando están solas en casa), hace poco vi en una conocida tienda de marca china que abrió tiendas en España una tetera ( o calentador de agua ) que tenia conexión wifi, creo que tendrá pocas opciones (apagar o encender) pero es un claro síntoma de que todo pasa por estar conectado, y para ello el requisito mas importante es tener conexión a Internet, y lo segundo es tener WIFI, porque seamos realistas no nos imaginamos ya esos aparatos con conexión por cable, llenando la casa de tomas RJ-45.
La lista puede seguir si añadimos persianas automáticas ( pero no solo por tener un botón de subir o bajar sino que tienen un modulo que permite recibir señales que desde una consola central, junto con sensores dentro de la casa y datos de fuera, permiten bajar las persianas por ejemplo si se pone a llover….) y todos aquellos que seguro que ya existen pero que todavia no conocemos.
Eso se nota rápidamente cuando abres los ajustes de red de tu ordenador y/o tableta/movil y ves una lista interminable de conexiones wifi

Como se puede ver en la imagen y ocurre en la gran mayoría de los casos, las redes son seguras ( tienen un candado al lado que lo indica ).
¿Pero son realmente seguras? El hecho de ver un candado nos tiene que dar confianza?
Existen aplicaciones para robar wifi por lo que tenemos que encontrar aplicaciones para proteger tu contraseña de wifi, aunque estas como tal no existen, sino que lo que hay que hacer es seguir una serie de pasos para evitar que nuestra red sea vulnerable, voy a ponerlas en el orden que yo creo que es mas importante:
– Cambiar la clave del WIFI, todos los router vienen con una red y clave definidas (suele verse en una pegatina en la parte inferior)
– Cambiar la clave de administrador del router, (también suele tener una por defecto para el modelo y se puede averiguar por Internet)
– Ocultar la red, ( para muchos usuarios si una red no aparece en la lista de redes disponibles, es como si no existiera )
– Filtrar por MAC, (que no se pueda conectar cualquiera a la red, esto tiene el problema de que viene gente a tu casa y si les quieres dar acceso no están fácil como decirles la clave… pero son los inconvenientes que da el aumento de seguridad…. )

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.

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ón o BRÚJULA

El BOT se puede añadir por el nombre acuteHTMLbot