Páginas

viernes, 24 de septiembre de 2021

Qué quiere decir Charset=”UTF-8”

Casi todas las páginas html que circulan por la red incluyen un atributo que dice:

Charset=”UTF-8”

esto sirve para indicar al browser como tiene que traducir la cadena de ceros y unos que recibe y convertirlos en caracteres legibles: letras, números o símbolos especiales.
Para entender lo que es UTF-8 (UTF es Unicode Transformation Format) hay hablar primero de Unicode. Unicode es un estándar ampliamente aceptado, mediante el cual a cada carácter se le asigna un número lo identifica. Por ejemplo, el carácter A mayúscula se identifica con el número hexadecimal 41 o lo que es lo mismo con el número decimal 65. Con Unicode tenemos identificados los caracteres de forma unívoca, es decir si en un ordenador está almacenado un 65 (de determinada manera) este representa a una A mayúscula.
Los números en el ordenador de almacenan en base binaria, ya que solo manejan ceros y unos. Entonces lo primero que tenemos que hacer con el 65 que representa al carácter A mayúscula es convertirlo en un número binario. Para convertir de decimal a binario existe un algoritmo que consiste en ir dividiendo el número por 2 hasta que el cociente de la división es 1. Para explicarlo con un ejemplo breve veamos cómo se traduce un número 4 decimal a binario.

Una vez hechas las divisiones se toman el cociente de la última y todos los restos de las anteriores en orden inverso a como se han obtenido. En este caso el resultado es que un 4 decimal se convierte en un 100 binario. De la misma manera 65 se convierte en 1000001.
Una vez que sabemos cómo obtener el binario de un número llega el algoritmo UTF-8 para determinar cómo almacenar este binario en los bytes de la memoria del ordenador. Un byte es la unidad de memoria que el ordenador maneja y se compone de 8 bits, también se le llama octeto. UTF-8 almacena cada carácter en 1, 2, 3 o 4 bytes. Hay que tener en cuenta que Unicode asigna identificadores para todos los caracteres existentes en cualquier idioma y esto conlleva a que con sólo 8 bits no sea suficiente para representar todos estos caracteres.
Por ejemplo, si se trata de codificar una A que en binario se representa por 7 ceros y unos, esta se almacena en un byte añadiendo un cero para completar el byte, o sea 01000001. Pero hay caracteres como ① que se traducen en más de 7 ceros y unos. Este carácter tiene asignado el decimal 9312 que se convierte en el binario 10010001100000. Este número binario no se puede almacenar en 7 bits, ya que cada bit contiene o un cero o un uno y necesita entonces 14 bits. Por lo tanto como la unidad de información que maneja el ordenador es el byte, este carácter necesita al menos 2 bytes para ser almacenada. No obstante según el algoritmo de codificación UTF-8, este carácter se almacena en 3 bytes. El motivo es que UTF-8 sigue la siguiente convención:

Ceros y unos del binario Código binario del número Codificación UTF-8
Hasta 7 xxxxxxx 0xxxxxxx
Hasta 10 yyyyyxxxxxx 110yyyyy 10xxxxxx
Hasta 14 zzzzyyyyyyxxxxxx 1110zzzz 10yyyyyy 10xxxxxx
Hasta 19 uuuwwzzzzyyyyyyxxxxxx 11110uuu 10wwzzzz 10yyyyyy 10xxxxxx

Llegar a comprender a fondo estos asuntos, es la base para entender otras cosas que se construyen sobre ellos.

domingo, 12 de septiembre de 2021

Javascript: Ejemplos de grupos y rangos

Buscar cadenas mediante grupos y rangos.


Caracter Significado
x|y Busca coincidencia de 'x' o 'y'
[xyz] Busca coincidencia 'x, 'y' o 'z'
[x-z] Busca coincidencia del rango desde 'x' hasta 'z'
[^xyz] Encuentra coincidencia si no hay ningún caracter del patrón, en este caso: ni 'x', ni 'y' ni 'z'
[^a-c] Encuentra coincidencia si no hay ningún caracter del rango. En este caso: ni 'a, no 'b', ni 'c'
(x) Busca coincidencia del grupo. En este caso 'x'
/n Siendo n un número positivo es una referencia posicional al grupo
(?xyz) Busca xyz y establece el nombre name para ese grupo. Luego se puede volver a utilizar
(?:x) Busca x el grupo no se puede volver a utilizar

Ejemplos



Espero que esto ayude

lunes, 30 de agosto de 2021

Javascript: Ejemplo de Promise y Async/Await, manejando la asincronía

Ejemplo de uso del objeto Promise y de las palabras Async/await para manejar la asincronía no bloqueante que es característica de javascript.

El ejemplo contiene tres piezas de código:


1) sincronizar1.js

En este código se muestra como la función setTimeout desencadena una función asíncrona no bloqueante que asigna valor a una variable global. El resultado de ejecutar sincronizar1.js es:

El resultado es que cuando se muestra la variable todavía no ha pasado un segundo y contiene el valor inicial, es decir nada.

2) sincronizar2.js

En este código se muestra el mismo ejemplo y cómo con un objeto de tipo Promesa se accede al valor de la variable global cuando esta está cargada.

El resultado es que cuando se ejecuta el método .then del objeto Promise, la variable ya está cargada con el valor 'Buenos dias'. Pero el console log del método .then se ejecuta al final.

3) sincronizar3.

En este código se muestra el mismo ejemplo combinando la Promesa con el uso de las palabras clave Async/await, consiguiendo ejecutar las sentencias en el orden deseado.

El resultado es que además de que la variable contiene 'Buenos días' las sentencias console se muestran en orden 1, 2 y luego 3.

Referencias

Puedes obtener la explicación en mi video en youtube
Puedes obtener el código javascript en Mi repositorio de Github

lunes, 23 de agosto de 2021

Herramientas para desarrolladores de Chrome

El desarrollo de software en cualquier lenguaje de programación o entorno de trabajo entraña dificultades.

Para escribir código se utilizan IDEs (integrated development environment) que suministran al programador herramientas para facilitar su trabajo. Entre estas herramientas están las de depuración (debug). Los debuggers son muy útiles para los desarrolladores puesto que incorporan funcionalidad para ayudarle a buscar errores y problemas que de otra forma tendrían que buscar de forma manual e intuitiva.

En el caso de desarrollos para aplicaciones web, las herramientas de depuranción de los IDEs sirven para depurar el código que genera html, css y javascript que se envía al browser.Una vez que ese código es generado y enviado la única forma de depurarlo es en el browser que es el que lo está inerpretando. 

Google Chrome incorpora herramientas de depuración. Los demás browsers también tienen este ripo de herramientas pero las mas completas son las de Chrome. Con Chrome sobre una página html cargada en el browser se pueden analizar numerosos aspectos que ayudan a localizar malos funcionamientos y errores. Las herramientas de desarrollador de Chrome, permiten: 

  • Localizar un elemento del DOM (Document Object Model) tanto desde la vista del usuario como desde el código fuente.
  • Saber que estilos se están aplicando a cada elemento. Si se están aplicando de forma directa (inline), por hoja de estilo, porque se han heredado de algún elemento padre o porque son el valor de defecto.
  • Consultar los mensajes que el browser genera o los que genera el programador utilizando el objeto "console" de javascript.
  • Se puede consultar el número de línea en el que se ha producido un error para subsanarlo.
  • Se pueden poner puntos de ruptura (breakpoints) para detener el programa donde convenga al programador y luego avanzar instrucción a instrucción para ver como progresa el flujo de control del programa.
  • Se puede consultar el contenido de las variables e incluso modificar su valor para observar el comportamiento del programa con los nuevos valores almacenados.
  • Se puede saber el tiempo que tarda en cargarse cada elemento de la página.
  • etc.

Si quieres ver una pequeña intro al funcionamiento de estas herramientas, puedes reproducir los videos Herramientas de desarrollador de Chrome (1ª parte) aquí y Herramientas de desarrollador de Chrome (2ª parte) aquí

Espero que esta información te sea de utilidad y te ayude a escribir código siendo más feliz. Y serás más feliz porque si lo utilizas entenderás mejor lo que está sucediendo trás tú programación.

 

martes, 10 de agosto de 2021

Enseñando scratch a los niños

Crear programas para ordenadores o teléfonos desarrolla las habilidades para la resolución de problemas lógicos. Si se enseña a programar a un niño se potencian estás habilidades a una edad temprana que es cuando mejor se aprende y este aprendizaje es muy útil para mejorar sus procesos cognitivos.

El Instituto Tecnológico de Massachussets (MIT) ha desarrollado un lenguaje de programación visual que permite a los pequeños de 8 a 16 años aprender los conceptos de programación de ordenadores. Existe una versión junior, ScratchJr que está diseñado para niños de 5 a 7 años.

Con Scratch se pueden hacer programas muy sencillos, pero a la vez incorpora estructuras que tienen los lenguajes de programación profesionales. Se programa con bloques que están agrupados por las acciones que realizan y están identificados por colores. Se puede mover los objetos por la pantalla, agrandarlos y empequeñecerlos, hacer que desaparezcan y aparezcan, que emitan sonidos, que muestren bocadillos, tomar decisiones condicionales, ejecutar bucles, crear variables, etc. Se aprende rápido lo más básico y también hay campo para profundizar.

La plataforma está además preparada para que los pequeños programadores puedan compartir sus creaciones con otros. Además hay múltiples sitios donde se ofrecen ideas para avanzar en el aprendizaje en forma de retos. Estos retos consisten en proyectos ya llevados a cabo que se presentan para que el programador los intente reproducir y sobre los cuales se puede consultar su código para aprender como están hechos.

En este artículo quiero presentaros un canal de youtube en el que he dejado unos videos para iniciar a los adultos en el uso de Scratch. El objetivo de estos videos es que una vez que entiendas como Scratch funciona, puedas transmitirselo a los pequeños que tengas alrededor.

Los videos están en Introducción a Scratch y hay otros dos que enseñan un proyecto más completo: El gato se va al castillo (Parte 1) y El gato se va al castillo (Parte 2).

Para acceder a Scratch pulsa aquí

domingo, 6 de junio de 2021

JavaScript: Ejemplos de aserciones en expresiones regulares

Incluyen límites para cadenas, palabras y caracteres. También búsquedas de cadenas que están precedidas o seguidas por otras subcadenas.


Caracter Significado
^ Busca coincidencia al comienzo cadena
$ Busca coincidencia al final cadena
\b Busca límites de palabra. Una palabra empieza y termina donde un caracter de palabra no es precedido o seguido por otro caracter de palabra. Se consideran caracteres de palabra las letras mayúsculas y minúsculas del alfabeto latino, los números y el caracter de subrayado.
\B Busca límites de no palabra. Es decir el caracter anterior o siguiente a un caracter son del mismo tipo del propio caracter
x(?=y) Búsqueda hacía delante. Coincide x solo si x está seguida de y
x(?!y) Búsqueda hacía delante negativa. Coincide x solo si x no está seguida de y
(?<=y)x Búsqueda hacía detrás. Coincide x solo si x está precedida de y
(?<!y)x Búsqueda hacía detrás negativa. Coincide x solo si x no está precedida de y

Ejemplos



Espero que esto ayude

miércoles, 12 de mayo de 2021

Javascript: Expresiones regulares

Una expresión regular es un patrón usado para buscar coincidencias de combinaciones de caracteres dentro de otras cadenas de caracteres (strings). En JavaScript, estos patrones son objetos. 

Estos patrones se pueden usar como métodos del objeto tipo RegExp con los métodos exec() y test() y también con objetos String con los métodos match(), matchAll(), replace(), replaceAll(), search() y split(). 

Creación de expresiones regulares

Para crear expresiones regulares existen 2 maneras: 

  • Usando un literal que consiste en un patrón encerrado entre //. 

de esta forma la compilación del patrón se realiza cuando el script se carga. En los casos en los que la expresión regular permanece constante, esta manera mejora el rendimiento.

  • Usando el constructor de RegExp

usando la función constructor la compilación se hace en tiempo de ejecución. Se debe usar esta forma cuando la expresión regular cambia durante la ejecución o no se conoce el patrón de antemano y se obtiene durante la ejecución del script.

Utilizando patrones 

Una expresión regular está compuesta simplemente de caracteres tal como /abc/ o una combinación de caracteres simples y otros especiales tal como /ab*c/. 

En el caso de /abc/ este patrón busca la coincidencia con la cadena abc dentro de la cadena analizada. Por ejemplo: 

 En el caso de /ab*c/, el caracter * es un caracter especial que indica en el patrón que el caracter b en este caso se puede presentar 1 o varias veces. Por ejemplo: 

 

Qué patrones se pueden construir

Entonces un patrón está compuesto por una cadena de caracteres entre barras oblicuas (slashes). Los caracteres pueden representarse a ellos mismos (caracteres simples) o pueden tener un significado especial (carateres especiales). Según la clasificación que hacen en MDN Web Docs de los tipos de caracteres especiales son:

  • Aserciones.- indican el comienzo y el final de líneas y palabras, y otros patrones. Ejemplos de aserciones
  • Clases de caracteres.- Distingue diferentes tipos de caracteres. Por ejemplo, distinguir entre letras y dígitos.
  • Grupos y rangos.- indican grupos y rangos de caracteres. Ejemplos de grupos y rangos
  • Cuantificadores.-  indica el número de repeticiones.
  • Caracteres de escape de propiedades Unicode.- indica por ejemplo, letras mayúsculas y minúsculas, símbolos matemáticos y de puntuación.

Conclusiones

Merece la pena que todo programador le dedique algunas hora a aprender como se manejan las expresiones regulares. Esto ayuda a que en el momento de tener que usarlas se manejen con soltura y no sean una piedra en el camino para poder entender o construir el código. Y no se aprenden en 5 minutos.