BlackeyeB - freeCodeCamp.org

¿Qué es el modelo de objetos del documento (DOM) y por qué deberías saber cómo usarlo?

BlackeyeB — Thu, 11 May 2023 00:53:55 +0000

Artículo original: What’s the Document Object Model, and why you should know how to use it.

Si has estudiado HTML, creaste tus primeras etiquetas, aprendiste sobre CSS, creaste hermosos formularios, botones increíbles, páginas receptivas y comenzaste a mostrarles a todos lo increíble que era todo eso.

Y ahora decides que quieres dar un paso más en tu aprendizaje y empiezas a preguntarte: “¿Cómo puedo agregar animación a mi página? ¡Ojalá ese botón hiciera alguna animación en mi página cuando haces clic en él!”

Bueno, ahí es donde viene el DOM para resolver tu problema. Probablemente, hayas escuchado mucho al respecto, pero es posible que aún no sepas qué es y qué problemas resuelve. Así que profundicemos.

Entonces, ¿qué es el DOM?

¿Conoces todas esas animaciones geniales que ves a tu alrededor, que te hacen pensar: "Vaya, me gustaría poder hacer algo así"? Todas esas animaciones se realizan manipulando el DOM. Ahora te explicaré cómo comenzar a manipularlo y hacer que tus sitios web se vean geniales.

El DOM (Modelo de Objetos del Documento, por sus siglas en inglés: Document Object Model) es una interfaz que representa cómo el navegador lee tus documentos HTML y XML. Permite que un lenguaje (JavaScript) manipule, estructure y estilice tu sitio web. Una vez que el navegador lee tu documento HTML, crea un árbol de representación llamado Modelo de Objetos del Documento y define cómo se puede acceder a ese árbol.

Ventajas

Manipulando el DOM, tienes infinitas posibilidades. Puedes crear aplicaciones que actualicen los datos de la página sin necesidad de actualizar. Además, puedes crear aplicaciones personalizables por el usuario y luego cambiar el diseño de la página sin actualizar. Puedes arrastrar, mover y eliminar elementos.

Como dije, tienes infinitas posibilidades, solo necesitas usar tu creatividad.

Representación por el navegador

El árbol de representación que crea el navegador tras leer tu documento.

En la imagen de arriba, podemos ver el árbol de representación y cómo lo crea el navegador. En este ejemplo, tenemos cuatro elementos importantes que verás mucho:

Documento: Trata todos los documentos HTML.
Elementos: Todas las etiquetas que están dentro de tu HTML o XML se convierten en un elemento DOM.
Texto: Todo el contenido de las etiquetas.
Atributos: Todos los atributos de un elemento HTML específico. En la imagen, el atributo class=”hero” es un atributo del elemento < p>.

Manipulando el DOM

Ahora estamos llegando a la mejor parte: Comenzar a manipular el DOM. Primero, vamos a crear un elemento HTML como ejemplo para ver algunos métodos y cómo funcionan los eventos.

                            Entendiendo el DOM (Document Object Model)                    00:00:00

Muy sencillo, ¿verdad? Ahora vamos a aprender más sobre los métodos DOM: cómo obtener nuestros elementos y comenzar a manipularlos.

Métodos

El DOM tiene muchos métodos. Son la conexión entre nuestros nodos (elementos) y eventos, algo de lo que aprenderemos más adelante. Te mostraré algunos de los métodos más importantes y cómo se usan. Hay muchos más métodos que no voy a mostrarte aquí, pero puedes verlos todos aquí.

getElementById()

Este método devuelve el elemento que contiene el ID de nombre pasado. Como sabemos, las identificaciones deben ser únicas, por lo que es un método muy útil para obtener solo el elemento que desea.

var myStart = document.getElementsById('start');

myStart : Nuestro nombre de variable que se parece a nuestra identificación pasada.

start : id pasado. Y en caso de que no tengamos ningún id con ese nombre en concreto, devuelve nulo.

getElementsByClassName()

Este método devuelve una colección HTML de todos los elementos que contienen la clase de nombre específico pasado.

var myContainer = document.getElementsByClassName('container');

myContainer: Nuestro nombre de variable que se parece a nuestra clase pasada.

.container: Nuestra clase pasada. En caso de que no tengamos ninguna clase con ese nombre en concreto, devuelve nulo.

getElementsByTagName()

Esto funciona de la misma manera que los métodos anteriores: También devuelve una colección HTML, pero esta vez con una sola diferencia: Devuelve todos esos elementos con el nombre de la etiqueta pasado.

var buttons = document.getElementsByTagName('button');

buttons: Nuestro nombre de variable que se parece a nuestro nombre de etiqueta pasado.

button: nombre de la etiqueta que queremos obtener.

querySelector()

Devuelve el primer elemento que tiene el selector CSS específico pasado. Solo recuerda que el selector debe seguir la sintaxis CSS. En caso de no tener ningún selector , devuelve nulo.

var resetButton = document.querySelector('#reset');

resetButton: Nuestro nombre de variable que se parece a nuestro selector pasado.

#reset: el selector pasado, y si no tiene ningún selector que coincida, devuelve nulo.

querySelectorAll()

Muy similar al método querySelector(), pero con una única diferencia: devuelve todos los elementos que coinciden con el selector CSS pasado. El selector también debe seguir la sintaxis CSS. En caso de no tener ningún selector, devuelve nulo.

var myButtons = document.querySelector('#buttons');

myButtons: Nuestro nombre de variable que se parece a nuestro selector pasados.

#botones: selector pasado, si no tiene ningún selector que coincida, devuelve nulo.

Estos son algunos de los métodos DOM más utilizados. Hay varios métodos más que puedes usar, como createElement(), que crea un nuevo elemento en tu página HTML, y setAttribute() que te permite establecer nuevos atributos para elementos HTML. Puedes explorarlos por tu cuenta.

Nuevamente, puedes encontrar todos los métodos aquí, en el lado izquierdo, en Métodos . Realmente te recomiendo que eches un vistazo a algunos de los otros porque es posible que pronto necesites alguno de ellos.

Ahora, vamos a aprender acerca de los eventos; después de todo, sin ellos no podemos hacer animaciones en nuestras páginas.

Eventos

Los elementos DOM tienen métodos, como acabamos de comentar, pero también tienen eventos. Estos eventos son los encargados de hacer posible la interactividad en nuestra página. Pero aquí hay una cosa que quizás no sepas: los eventos también son métodos.

myStart.addEventListener('click', function(event) {

Click

Uno de los eventos más utilizados es el evento click. Cuando el usuario hace clic en un elemento específico, realizará alguna acción.

// Haz algo aquí.

}, false);

Los parámetros de addEventListener() son:

El tipo de evento que quieras (en este caso ' click ').
Una función callback (de devolución de llamada)
El useCapture por defecto es falso. Indica si quieres o no “capturar” el evento.

select

Este evento es para cuando quieres enviar (dispatch) algo cuando se selecciona un elemento específico. En ese caso , enviaremos una alerta simple .

myStart.addEventListener('select', function(event) {

alert('Element selected!');

}, false);

Estos son algunos de los eventos más utilizados. Por supuesto, tenemos muchos otros eventos que puedes usar, como eventos de arrastrar y soltar: cuando un usuario comienza a arrastrar algún elemento, puede realizar alguna acción, y cuando suelta ese elemento, puedes realizar otra acción.

Ahora, veremos cómo podemos recorrer el DOM y usar algunas propiedades.

Recorriendo el DOM

Puedes recorrer el DOM y usar algunas propiedades que veremos ahora. Con estas propiedades, puedes devolver elementos, comentarios, texto, etc.

.childNodes

Esta propiedad devuelve una lista de nodos secundarios del elemento dado. Devuelve texto, comentarios, etc. Cuando quieras usarlo, debes tener cuidado.

var container = document.querySelector('.container');

var getContainerChilds = container.childNodes;

.firstChild

Esta propiedad devuelve el primer hijo del elemento dado.

var container = document.querySelector('.container');

var getFirstChild = container.firstChild;

.nodeName

Esta propiedad devuelve el nombre del elemento dado. En este caso, pasamos un div , por lo que devolverá " div ".

var container = document.querySelector('.container');

var getName = container.nodeName;

.nodeValue

Esta propiedad es específica para textos y comentarios , ya que devuelve o establece el valor del nodo actual . En este caso, dado que pasamos un div, devolverá nulo .

var container = document.querySelector('.container')

var getValue = container.nodeValue;

.nodeType

Esta propiedad devuelve el tipo del elemento dado. En este caso, devuelve “ 1 ”.

var container = document.querySelector('.container')

var getValue = container.nodeType;

Pero, ¿qué significa " 1 " de todos modos? Es básicamente el tipo de nodo del elemento dado. En este caso, es un _ELEMENT_NODE_ y devuelve nulo. Si esto fuera un atributo, nos sería devuelto como " 2 " y el valor del atributo.

Una tabla que contiene todos los tipos de nodeTypes y el nodeName y nodeValue devueltos por cada uno de ellos.

Puede leer más sobre los tipos de nodos aquí.

Elements

Estas propiedades, en lugar de las anteriores, nos devuelven solo elementos. Se usan y recomiendan con más frecuencia porque pueden causar menos confusión y son más fáciles de entender.

.parentNode

Esta propiedad devuelve el padre del nodo dado.

var container = document.querySelector('.container')

var getParent = container.parentNode;

.firstElementChild

Devuelve el primer elemento secundario del elemento dado.

var container = document.querySelector('.container')

var getValue = container.firstElementChild;

.lastElementChild

Devuelve el último elemento secundario del elemento dado.

var container = document.querySelector('.container')

var getValue = container.lastElementChild;

Estas son algunas de las muchas propiedades que tiene el DOM. Es muy importante que conozcas los conceptos básicos sobre el DOM, cómo funciona, sus métodos y propiedades, porque algún día puedes necesitarlo.

Conclusión

El DOM nos proporciona varias API importantes para crear aplicaciones fantásticas e innovadoras. Si entiendes los conceptos básicos, puedes crear cosas increíbles. Si deseas leer más sobre el DOM, puedes hacer clic aquí y leer todos los documentos de MDN.

¡Sígueme en Twitter!
⭐ ¡ Sígueme en GitHub!

Estoy buscando una oportunidad remota, si puedes darme alguna, me encantaría saber sobre ella, ¡así que contáctame!

Constructores en Dart: Casos de uso y ejemplos

BlackeyeB — Fri, 05 May 2023 00:59:50 +0000

Artículo original: Constructors in Dart – Use Cases and Examples

La mayoría de nosotros estamos familiarizados con el concepto de constructores. Nos permiten crear diferentes instancias de nuestras clases. Podemos especificar de qué parámetros debe depender la clase cuando se crea una instancia y ocultar la lógica de inicialización interna.

Podemos tener muchos constructores para diferentes casos de uso, o podemos confiar en el predeterminado.

En dart, los constructores juegan un papel similar, pero tienen algunas variaciones que no existen en la mayoría de los lenguajes de programación. Este artículo repasa los diferentes casos de uso y ejemplos de constructores.

En todos los ejemplos de este artículo, usaremos la siguiente clase:

class Coche {
   String fabricacion;
   String modelo;
   String anyoFabricacion;
   bool tieneABS;
}

Cómo empezar con los constructores en Dart

Si no especificas ningún constructor en Dart, crearás un constructor predeterminado.

Esto no significa que verás un constructor predeterminado generado en su clase. En cambio, al crear una nueva instancia de tu clase, se llamará a este constructor. No tendrá argumentos y llamará al constructor de la superclase, sin argumentos también.

Para declarar un constructor en tu clase, puedes hacer lo siguiente:

class Coche {
	String fabricacion;
   	String modelo;
   	String anyoFabricacion;
   	bool tieneABS;
   
   	Coche(String fabricacion, String modelo, int anyo, bool tieneABS) {
    	this.fabricacion = fabricacion;
      	this.modelo = modelo;
      	this.anyoFabricacion = anyo;
      	this.tieneABS = tieneABS;
   	}
}

Como puedes imaginar, debe haber una mejor manera de inicializar nuestros campos de clase, y en Dart, la hay:

class Coche {
	String fabricacion;
   	String modelo;
   	String anyoFabricacion;
   	bool tieneABS;
   
   	Coche(this.fabricacion, this.modelo, this.anyoFabricacion, this.tieneABS);
}

La forma que usamos arriba es una sintaxis sencilla que Dart tiene para simplificar la asignación.

Photo by Alessio Lin / Unsplash

Funciones de constructor más complejas

En otros idiomas, es posible sobrecargar tu constructor. Esto significa que puedes tener diferentes constructores con el mismo nombre, pero con una firma diferente (o un conjunto diferente de argumentos).

Constructores con nombre en Dart

En Dart, esto no es posible, pero hay una forma de hacer algo semejante. Se llama constructores con nombre. Dar a tus constructores diferentes nombres le permite a tu clase tener muchos constructores y también representar mejor sus casos de uso fuera de la clase.

class Coche {
	String fabricacion;
   	String modelo;
   	String anyoFabricacion;
   	bool tieneABS;
   
   	Coche(this.fabricacion, this.modelo, this.anyoFabricacion, this.tieneABS);
   
   	Coche.sinABS(this.fabricacion, this.modelo, this.anyoFabricacion): tieneABS = false;
}

Ejemplo de constructor con nombre

El constructor sinABS inicializa la variable de instancia tieneABS en falso, antes de que se ejecute el cuerpo del constructor. Esto se conoce como lista de inicializadores y puede inicializar varias variables, separadas por una coma.

El caso de uso más común para las listas de inicializadores es inicializar los campos finales declarados por tu clase.

✋ Cualquier cosa que se coloque en el lado derecho de los dos puntos (:) no tiene acceso a this.

Constructores de Factorías en Dart

Un constructor de factoría es un constructor que se puede usar cuando no necesariamente deseas que un constructor cree una nueva instancia de tu clase.

Esto podría ser útil si tienes instancias de tu clase en la memoria y no deseas crear una nueva cada vez (o si la operación de crear una instancia es costosa).

Otro caso de uso es si tienes cierta lógica en tu constructor para inicializar un campo final que no se puede hacer en la lista de inicializadores.

class Coche {
	String fabricacion;
   	String modelo;
   	String anyoFabricacion;
   	bool tieneABS;
   
   	factory Coche.ford(String modelo, String anyoFabricacion, bool tieneABS) {
    	return CocheFord(modelo, anyoFabricacion, tieneABS);
    }
}

class CocheFord extends Coche {
	CocheFord(String modelo, String anyoFabricacion, bool tieneABS): super("Ford", modelo, anyoFabricacion, tieneABS);
 
}

Ejemplo de constructor de factoría

Constructores avanzados en Dart

Constructores de constantes y constructores de redireccionamiento en Dart

Dart también te permite crear constructores de constantes. ¿Qué significa exactamente? Si tu clase representa un objeto que nunca cambiará después de su creación, puede beneficiarse del uso de un constructor de constante. Debes asegurarte de que todos los campos de tu clase sean definitivos.

class FordFocus {
   static const FordFocus fordFocus = FordFocus("Ford", "Focus", "2013", true);
   
   final String fabricacion;
   final String modelo;
   final String anyoFabricacion;
   final bool tieneABS;
   
   const FordFocus(this.fabricacion, this.modelo, this.anyoFabricaion, this.tieneABS);
   
}

Ejemplo de constructor de constante

Cuando deseas que un constructor llame a otro constructor en segundo plano, se le denomina constructores de redireccionamiento.

class Coche {
	String fabricacion;
   	String modelo;
   	String anyoFabricacion;
   	bool tieneABS;
   
   	Coche(this.fabricacion, this.modelo, this.anyoFabricacion, this.tieneABS);
   
   	Coche.sinABS(this.fabricacion, this.modelo, this.anyoFabricacion): this(fabricacion, modelo, anyoFabricacion, false);
}

Ejemplo de constructor de redirección

Para acabar

Cada uno de los constructores que discutimos tiene un propósito y un caso de uso diferente. Depende de ti determinar y comprender cuándo usar cada uno. Con suerte, este artículo te dio el conocimiento necesario para hacerlo.

Qué es Flutter y por qué deberías aprenderlo en 2020

BlackeyeB — Mon, 01 May 2023 13:43:44 +0000

Artículo original: What is Flutter and Why You Should Learn it in 2020

Este año, las aplicaciones móviles continúan siendo cada vez más populares. Por suerte hay muchas herramientas de programación disponibles para los desarrolladores que quieran crearlas. Entre estas herramientas está Flutter, que se ha destacado últimamente.

¿Qué es Flutter?

Flutter es un framework de interfaz de usuario móvil gratuito y de código abierto creado por Google y lanzado en mayo de 2017. En pocas palabras, te permite crear una aplicación móvil nativa con una sola base de código. Esto significa que puedes usar un lenguaje de programación y una base de código para crear dos aplicaciones diferentes (para iOS y Android).

Flutter consta de dos partes importantes:

Un SDK (Software Development Kit): Una colección de herramientas que te ayudarán a desarrollar tus aplicaciones. Esto incluye herramientas para compilar tu código en código de máquina nativo (código para iOS y Android).
Un framework (biblioteca de interfaz de usuario basada en widgets): Una colección de elementos de interfaz de usuario reutilizables (botones, entradas de texto, controles deslizantes, etc.) que puedes personalizar según tus propias necesidades.

Para desarrollar con Flutter, utilizarás un lenguaje de programación llamado Dart. El lenguaje fue creado por Google en octubre de 2011, pero ha mejorado mucho en los últimos años.

Dart se enfoca en el desarrollo front-end y puedes usarlo para crear aplicaciones móviles y web.

Si sabes un poco de programación, Dart es un lenguaje de programación de objetos escritos. Puedes comparar la sintaxis de Dart con JavaScript.

"Flutter es el conjunto de herramientas de interfaz de usuario de Google para crear bonitas aplicaciones compiladas de forma nativa para dispositivos móviles, web y de escritorio a partir de una única base de código". - Google, flutter.dev

¿Por qué deberías aprender Flutter?

Seleccioné algunas de las razones por las que me gusta Flutter y por las que quiero usarlo el próximo año. Te daré detalles y mis comentarios a continuación.

Empresas que usan Flutter

Fácil de aprender y usar

Flutter es un framework moderno, ¡y puedes sentirlo! Es mucho más sencillo crear aplicaciones móviles con él. Si has usado Java, Swift o React Native, notarás cómo Flutter es diferente.

Personalmente, nunca me gustó el desarrollo de aplicaciones móviles antes de comenzar a usar Flutter.

Lo que me encanta de Flutter es que puedes crear una aplicación nativa real sin un montón de código.

Compilación rápida: Máxima productividad

Gracias a Flutter, puedes cambiar tu código y ver los resultados en tiempo real. Se llama recarga en caliente. Solo se necesita un breve período de tiempo después de guardar para actualizar la aplicación en sí.

Las modificaciones significativas te obligan a recargar la aplicación. Pero si trabajas en el diseño, por ejemplo, y cambias el tamaño de un elemento, ¡es en tiempo real!

Ideal para MVP (producto viable mínimo) de startup

Si deseas mostrar tu producto a los inversores lo antes posible, Flutter es una buena opción.

Aquí están mis 4 razones principales para usarlo para tu MVP:

Es más económico desarrollar una aplicación móvil con Flutter porque no necesitas crear y mantener dos aplicaciones móviles (una para iOS y otra para Android).
Un desarrollador es todo lo que necesitas para crear tu MVP.
Es eficaz: No notarás la diferencia entre una aplicación nativa y una aplicación Flutter.
Es bonito: Puedes usar fácilmente los widgets proporcionados por Flutter y personalizarlos para crear una interfaz de usuario valiosa para tus clientes (puedes encontrar ejemplos de aplicaciones creadas con Flutter a continuación).

Ejemplo de la aplicación Flutter - Lista de tareas pendientes

Buena documentación

Es importante que la nueva tecnología tenga una buena documentación. ¡Pero no siempre es el caso!

Puedes aprender mucho de la documentación de Flutter, y todo está muy detallado con ejemplos sencillos para casos de uso básicos. Cada vez que tuve un problema con uno de mis widgets en mi código, pude consultar la documentación y la respuesta estaba allí.

Arquitectura de documentación de Flutter

Una comunidad en crecimiento

Flutter tiene una comunidad sólida, ¡y es solo el comienzo!

Como sabrás, me encanta compartir mis conocimientos y contenido útil sobre programación en mi sitio web. Necesito saber que estoy trabajando en una tecnología llena de potencial con muchos patrocinadores.

Cuando comencé a usar Flutter, lo primero que hice fue buscar comunidades, y para mi sorpresa… hay una cantidad considerable de lugares para intercambiar información de Flutter.

Te daré algunos ejemplos de lugares que me encanta visitar a diario. No dudes en enviarme un mensaje en Twitter con tus sugerencias.

Flutter Awesome: Una lista increíble que selecciona las mejores bibliotecas y herramientas de Flutter. Este sitio web publica contenido diario con muchos ejemplos, plantillas de aplicaciones, consejos, etc.
Awesome Flutter: Un repositorio de GitHub (vinculado a Flutter Awesome) con una lista de artículos, videos, componentes, utilidades, etc.
It’s all widgets!: Una lista abierta de aplicaciones creadas con Flutter.
Flutter Community: Una publicación de Medium donde puedes encontrar artículos, tutoriales y mucho más.

Compatible con Android Studio y VS Code

Flutter está disponible en diferentes IDEs. Los dos principales editores de código para desarrollar con esta tecnología son Android Studio (IntelliJ) y VS Code.

Android Studio es un software completo con todo ya integrado. Debes descargar los complementos Flutter y Dart para comenzar.

VS Code es una herramienta ligera y todo se puede configurar a través de complementos del marketplace.

Uso Android Studio porque no necesito configurar muchas cosas para que funcione.

¡Eres libre de elegir tu IDE preferido!

Bonus Extra

Freelance

Si quieres empezar a hacer algún trabajo freelance, deberías pensar en usar Flutter.

En 2020, creo que esta tecnología va a explotar. Y eso significa que mucha gente buscará desarrolladores que sepan cómo usarlo.

La mayor plataforma para autónomos de Francia, llamada Malt, publicó recientemente las tendencias tecnológicas de este año. Flutter creció un +303 % en esta plataforma entre 2018 y 2019.

Flutter statistics - Malt

Conclusión

Bueno, ¿qué piensas de Flutter? ¿Empezarás a aprenderlo el próximo año?

Espero que esta introducción te haya interesado y motivado. Siéntete libre de compartir este artículo si te ha gustado.

Si quieres más contenido como este, puedes seguirme en Twitter , donde tuiteo sobre desarrollo web, superación personal y mi viaje como desarrollador full stack.

Interfaces de Java explicadas con ejemplos

BlackeyeB — Mon, 01 May 2023 01:13:10 +0000

Artículo original: Java Interfaces Explained with Examples

La interfaz en Java es un poco como la Clase, pero con una diferencia significativa: una interface puede tener firmas de métodos, campos y métodos predeterminados. Desde Java 8, también puedes crear métodos predeterminados. En el siguiente bloque puedes ver un ejemplo de interfaz:

public interface Vehiculo {
    public String matricula = "";
    public float maxVel
    public void arrancar();
    public void detener();
    default void claxon(){
      System.out.println("Sonando claxon");
   }
}

La interfaz anterior contiene dos campos, dos métodos y un método predeterminado. Solo, no es de mucha utilidad, pero normalmente se usan junto con las Clases. ¿Cómo? Simple, tienes que asegurarte de que alguna clase lo implemente (implements).

public class Coche implements Vehiculo {
    public void arrancar() {
        System.out.println("arrancando motor...");
    }
    public void detener() {
        System.out.println("deteniendo motor...");
    }
}

Ahora, hay una regla básica: la clase debe implementar todos los métodos que hay en la interfaz. Los métodos deben tener exactamente la misma firma (nombre, parámetros y excepciones) como se describe en la interfaz. Sin embargo, la clase no necesita declarar los campos, solo los métodos.

Instancias de una interfaz

Una vez que creas una clase Java que implements (implementa) cualquier interfaz, se puede hacer referencia a la instancia del objeto como una instancia de la interfaz. Este concepto es similar al de creación de instancias de herencia.

// siguiendo nuestro ejemplo anterior

Vehiculo tesla = new Coche();

tesla.arrancar(); // arrancar el motor...

Una interfaz no puede contener métodos constructores. Por lo tanto, no puedes crear una instancia de una interfaz en sí. Debes crear una instancia de alguna clase que implemente una interfaz para hacer referencia a ella.

Piensa en las interfaces como un formulario de contrato en blanco o una plantilla.

¿Qué puedes hacer con esta función? ¡Polimorfismo! ¡Puedes usar solo interfaces para referirte a instancias de objetos!

class Camion implements Vehiculo {
    public void arrancar() {
        System.out.println("arrancando el motor del camión...");
    }
    public void detener() {
        System.out.println("deteniendo el motor del camión...");
    }
}

class Arrancador {
    // método estático, se puede llamar sin instanciar la clase
    public static void arrancarMotor(Vehiculo vehiculo) {
        vehiculo.arrancar();
    }
}

Vehiculo tesla = new Coche();
Vehiculo tata = new Camion();

Arrancador.arrancarMotor(tesla); // arrancando motor...
Arrancador.arrancarMotor(tata); // arrancar el motor del camión...

Pero, ¿qué hay de las múltiples interfaces?

Sí, puedes implementar varias interfaces en una sola clase. Mientras estaba en Herencia dentro de las clases estaba restringido a heredar solo una clase, aquí puedes ampliar cualquier cantidad de interfaces. Pero no olvides implementar todos los métodos de todas las interfaces, de lo contrario, la compilación fallará.

public interface GPS {
    public void obtenerCoordenadas();
}

public interface Radio {
    public void iniciarRadio();
    public void detenerRadio();
}

public class Smartphone implements GPS,Radio {
    public void obtenerCoordenadas() {
        // devuelve algunas coordenadas
    }
    public void iniciarRadio() {
      // iniciar Radio
    }
    public void detenerRadio() {
        // detener Radio
    }
}

Algunas características de las interfaces

Puedes colocar variables dentro de una interfaz, aunque no será una decisión sensata, ya que las clases no están obligadas a tener la misma variable. En resumen, ¡evita colocar variables!
Todas las variables y métodos en una interfaz son públicos, incluso si omites la palabra clave public.
Una interfaz no puede especificar la implementación de un método en particular. Depende de las Clases hacerlo. Aunque ha habido una excepción reciente (ver más abajo).
Si una clase implementa varias interfaces, existe una posibilidad remota de superposición de la firma del método. Dado que Java no permite múltiples métodos de la misma firma exacta, podría generar problemas. Consulta esta pregunta para obtener más información.

Métodos predeterminados de la interfaz

Antes de Java 8, no teníamos forma de dirigir una interfaz para que tuviera una implementación de método particular, lo que genera mucha confusión y roturas de código si la definición de una interfaz cambia repentinamente.

Pongamos que escribes una biblioteca de código abierto, que contiene una interfaz. Digamos que tus clientes, es decir, prácticamente todos los desarrolladores de todo el mundo, lo están usando mucho y están contentos. Ahora has tenido que actualizar la biblioteca agregando una nueva definición de método a la interfaz para admitir una nueva característica. Pero eso rompería todas las compilaciones, ya que todas las clases que implementan esa interfaz tienen que cambiar ahora. ¡Qué catástrofe!

Afortunadamente, Java 8 ahora nos proporciona métodos default (predeterminados) para interfaces. ¡Un método default puede contener su propia implementación directamente dentro de la interfaz! Entonces, si una Clase no implementa un método predeterminado, el compilador tomará la implementación mencionada dentro de la Interfaz. Bonito, ¿no? Entonces, en tu biblioteca, puede agregar cualquier cantidad de métodos predeterminados en las interfaces sin miedo a estropear nada.

public interface GPS {
    public void obtenerCoordenadas();
    default public void obtenerCoordenadasAproximadas() {
        // implementación para devolver coordenadas de fuentes aproximadas
        // como wifi y móvil
        System.out.println("Obteniendo coordenadas aproximadas por wifi y GSM...");
    }
}

public interface Radio {
    public void iniciarRadio();
    public void detenerRadio();
}

public class Smartphone implements GPS,Radio {
    public void obtenerCoordenadas() {
        // devuelve algunas coordenadas
    }
    public void iniciarRadio() {
      // iniciar Radio
    }
    public void detenerRadio() {
        // detener Radio
    }

    // sin implementación de getRoughCoordinates()
}

Smartphone motoG = new Smartphone();
motog.obtenerCoordenadasAproximadas(); // Obteniendo coordenadas aproximadas por wifi y GSM...

Pero, ¿qué sucede si dos interfaces tienen la misma firma de método?

Gran pregunta. En ese caso, si no proporcionas la implementación en la clase, el pobre compilador se confundirá y simplemente fallará. También debes proporcionar una implementación de método predeterminada dentro de la Clase. También hay una forma ingeniosa de usar super para llamar a la implementación que te gusta:

public interface Radio {
    // public void iniciarRadio();
    // public void detenerRadio();

    default public void siguiente() {
        System.out.println("Siguiente emisora de Radio");
    }
}

public interface ReproductorMusica {
    // public void iniciar();
    // public void pausar();
    // public void detener();

    default public void siguiente() {
        System.out.println("Siguiente canción del Reproductor de Música");
    }
}

public class Smartphone implements Radio, ReproductorMusica {
    public void siguiente() {
        // Supongamos que deseas llamar a siguiente del ReproductorMusica
        ReproductorMusica.super.siguiente();
    }
}

Smartphone motoG = new Smartphone();
motoG.siguiente();  // Siguiente desde ReproductorMusica

Métodos estáticos en interfaces

Otra novedad de Java 8 es la capacidad de agregar métodos estáticos a las interfaces. Los métodos estáticos en interfaces son casi idénticos a los métodos estáticos en clases concretas. La única gran diferencia es que los métodos static no se heredan en las clases que implementan la interfaz. Esto significa que se hace referencia a la interfaz cuando se llama al método estático, no a la clase que lo implementa.

interface ReproductorMusica {
  public static void comercial(String patrocinador) {
    System.out.println("Nuevo mensaje de " + patrocinador);
  }
  
  public void play();
}


class Smartphone implements ReproductorMusica {
	public void reproducir() {
		System.out.println("Reproduciendo desde el Smartphone");
	}
}

class Main {
  public static void main(String[] args) {
    Smartphone motoG = new Smartphone();
    ReproductorMusica.comercial("Motorola"); 
    // Llamada a la interfaz no a la clase implementada
    // motoG.comercial("Motorola");  // Esto causaría un error de compilación
  }
}

Heredar una interfaz

También es posible en Java que una interfaz herede otra interfaz usando, la palabra clave extends:

public interface Reproductor {
    public void iniciar();
    public void pausar();
    public void detener();
}

public interface ReproductorMusica extends Reproductor {
    default public void siguiente() {
        System.out.println("siguiente canción del Reproductor de Música");
    }
}

Eso significa que la clase que implementa ReproductorMusica tiene que implementar todos los métodos de ReproductorMusica así como los de Reproductor:

public class SmartPhone implements ReproductorMusica {
    public void iniciar() {
        System.out.println("iniciar");
    }
    public void detener() {
        System.out.println("detener");
    }
    public void pausar() {
        System.out.println("pausar");
    }
}

¡Ahora ya tienes una buena comprensión de las interfaces de Java! Obtén información sobre las clases abstractas para ver cómo Java te brinda otra forma de definir contratos.

Algoritmos de ordenación explicados con ejemplos en JavaScript, Python, Java y C++

BlackeyeB — Mon, 01 May 2023 00:45:12 +0000

Artículo original: Sorting Algorithms Explained with Examples in JavaScript, Python, Java, and C++

¿Qué es un algoritmo de ordenación?

Los algoritmos de ordenación son un conjunto de instrucciones que toman un arreglo o lista como entrada y organizan los elementos en un orden particular.

Las ordenaciones suelen ser numéricas o una forma de orden alfabético (o lexicográfico), y pueden ser en orden ascendente (AZ, 0-9) o descendente (ZA, 9-0).

Por qué los algoritmos de ordenación son importantes

Dado que a menudo pueden reducir la complejidad de un problema, los algoritmos de ordenación son muy importantes en informática. Estos algoritmos tienen aplicaciones directas en algoritmos de búsqueda, algoritmos de bases de datos, métodos divide y vencerás, algoritmos de estructura de datos y muchos más.

Compensaciones de los algoritmos de ordenación

Al elegir un algoritmo de ordenación, se deben hacer algunas preguntas: ¿Cuán grande es la colección que se ordena? ¿Cuánta memoria hay disponible? ¿La colección necesita crecer?

Las respuestas a estas preguntas pueden determinar qué algoritmo funcionará mejor para cada situación. Algunos algoritmos como la ordenación por combinación pueden necesitar mucho espacio o memoria para ejecutarse, mientras que la ordenación por inserción no siempre es la más rápida, pero no requiere muchos recursos para ejecutarse.

Debes determinar cuáles son tus requisitos y considerar las limitaciones de tu sistema antes de decidir qué algoritmo de ordenación usar.

Algunos algoritmos de ordenación comunes

Algunos de los algoritmos de ordenación más comunes son:

Selection sort (selección)
Bubble sort (burbuja)
Insertion sort (inserción)
Merge sort (combinación)
Quick sort (rápida)
Heap sort (montón)
Counting sort (conteo)
Radix sort (raíz)
Bucket sort (cubo)

Pero antes de entrar en cada uno de estos, aprendamos un poco más sobre qué clasifica a un algoritmo de ordenación.

Clasificación de un algoritmo de ordenación

Los algoritmos de ordenación se pueden clasificar en función de los siguientes parámetros:

La cantidad de intercambios o inversiones requeridas: Esta es la cantidad de veces que el algoritmo intercambia elementos para ordenar la entrada. La ordenación por selección requiere el número mínimo de intercambios.
El número de comparaciones: Este es el número de veces que el algoritmo compara elementos para ordenar la entrada. Usando la notación Big-O , los ejemplos de algoritmos de ordenación enumerados anteriormente requieren al menos O(nlogn)comparaciones en el mejor de los casos y O(n^2) comparaciones en el peor de los casos para la mayoría de los resultados.
Ya sea que usen recursividad o no: Algunos algoritmos de ordenación, como la ordenación rápida, usan técnicas recursivas para ordenar la entrada. Otros algoritmos de ordenación, como la ordenación por selección o la ordenación por inserción, utilizan técnicas no recursivas. Por último, algunos algoritmos de ordenación, como la ordenación por fusión, utilizan técnicas tanto recursivas como no recursivas para ordenar la entrada.
Ya sean estables o inestables: Los algoritmos de ordenación estables mantienen el orden relativo de los elementos con valores iguales o claves. Los algoritmos de ordenación inestables no mantienen el orden relativo de los elementos con valores/claves iguales.

Por ejemplo, imagina que tienes el arreglo de entrada [1, 2, 3, 2, 4]. Y para ayudar a diferenciar entre los dos valores iguales, 2 actualicémoslos a 2a y 2b, creando el arreglo de entrada [1, 2a, 3, 2b, 4].

Los algoritmos de ordenación estables mantendrán el orden de 2a y 2b, lo que significa que el arreglo de salida será [1, 2a, 2b, 3, 4]. Los algoritmos de ordenación inestables no mantienen el orden de los valores iguales y el arreglo de salida puede ser [1, 2b, 2a, 3, 4].

La ordenación por inserción, la ordenación por fusión y la ordenación por burbuja son estables. La ordenación en montón y la ordenación rápida son inestables.
La cantidad de espacio adicional requerido: Algunos algoritmos de ordenación pueden ordenar una lista sin crear una lista completamente nueva. Estos se conocen como algoritmos de ordenación en el lugar y requieren un O(1) espacio adicional constante para la ordenación. Mientras tanto, los algoritmos de ordenación fuera de lugar crean una nueva lista durante la ordenación.

La ordenación por inserción y la ordenación rápida son algoritmos de ordenación en el lugar, ya que los elementos se mueven alrededor de un punto de pivote y no usan un arreglo separado.

Merge sort es un ejemplo de un algoritmo de ordenación fuera del lugar, ya que el tamaño de la entrada debe asignarse de antemano para almacenar la salida durante el proceso de ordenación, lo que requiere memoria adicional.

Bucket Sort (Ordenación de cubo)

La ordenación de cubos es un algoritmo de ordenación por comparación que opera en elementos dividiéndolos en diferentes cubos y luego ordenando estos cubos individualmente. Cada depósito se ordena individualmente utilizando un algoritmo de ordenación independiente, como la ordenación por inserción, o aplicando el algoritmo de ordenación de cubos de forma recursiva.

La ordenación de cubos es principalmente útil cuando la entrada se distribuye uniformemente en un rango. Por ejemplo, imagina que tienes una gran variedad de enteros de punto flotante distribuidos uniformemente entre un límite superior e inferior.

Puedes usar otro algoritmo de ordenación, como la ordenación por combinación, la ordenación por montones o la ordenación rápida. Sin embargo, esos algoritmos garantizan una complejidad de tiempo en el mejor de los casos de O(nlogn).

Usando la ordenación de cubos, la ordenación del mismo arreglo se puede completar a O(n)tiempo.

Pseudocódigo para ordenación de cubo:

void bucketSort(float[] a,int n)

{

    for(each floating integer 'x' in n)

    {
        insert x into bucket[n*x]; 
    }

    for(each bucket)

    {
        sort(bucket);
    }

}

Counting Sort (Ordenación de conteo)

El algoritmo de ordenación por conteo funciona creando primero una lista de los conteos u ocurrencias de cada valor único en la lista. Luego crea una lista ordenada final basada en la lista de conteos.

Una cosa importante que debes recordar es que la ordenación por conteo solo se puede usar cuando conoces de antemano el rango de valores posibles en la entrada.

Ejemplo:

Digamos que tienes una lista de números enteros del 0 al 5:
 
input = [2, 5, 3, 1, 4, 2]

Primero, debes crear una lista de recuentos para cada valor único en
la lista `entrada`. Como sabes que el rango de la `entrada` es de 0 a
5, puedes crear una lista con cinco marcadores de posición para los valores del 0 al 5, respectivamente:

count = [0, 0, 0, 0, 0, 0]
  # val: 0  1  2  3  4  5

Luego, revisas la lista `input` e iteras el índice para cada valor en uno.

Por ejemplo, el primer valor en la lista `input` es 2, por lo que agrega uno
al valor en el segundo índice de la lista `count`, que representa
el valor 2:

count = [0, 0, 1, 0, 0, 0]
  # val: 0  1  2  3  4  5
       
El siguiente valor en la lista `input` es 5, por lo que agrega uno al valor en el último índice de la lista `count`, que representa el valor 5:

count = [0, 0, 1, 0, 0, 1]
  # val: 0  1  2  3  4  5

Continúa hasta que tengas el recuento total de cada valor en la `entrada`
lista:

count = [0, 1, 2, 1, 1, 1]
  # val: 0  1  2  3  4  5

Finalmente, dado que sabes cuántas veces cada valor en la lista `input`
aparece, puedes crear fácilmente una lista de `salida` ordenada. Bucle a través de la lista `recuento`, y para cada recuento, agrega el valor correspondiente (0 - 5) al arreglo `output` tantas veces.

Por ejemplo, no había 0 en la lista de 'entradas', pero había una aparición del valor 1, por lo que agrega ese valor al arreglo `output`
una vez:

output = [1]

Luego hubo dos apariciones del valor 2, por lo que las agrega a la
lista `output`:

output = [1, 2, 2]

Y así sucesivamente hasta que tengas la lista final ordenada de "salida" (output):

output = [1, 2, 2, 3, 4, 5]

Propiedades

Complejidad de espacio:O(k)
Rendimiento del mejor caso:O(n+k)
Rendimiento del caso promedio:O(n+k)
Rendimiento en el peor de los casos:O(n+k)
Estable: Sí ( kes el rango de los elementos en el arreglo)

Implementación en JavaScript

let numbers = [1, 4, 1, 2, 7, 5, 2];
let count = [];
let output =[];
let i = 0;
let max = Math.max(...numbers);

// inicializa el contador
for (i = 0; i <= max; i++) {
  count[i] = 0;
}

// inicializa el arreglo de salida
for (i = 0; i < numbers.length; i++) {
  output[i] = 0;
}

for (i = 0; i < numbers.length; i++) {
  count[numbers[i]]++;
}

for (i = 1; i < count.length; i++) {
  count[i] += count[i-1];
}

for (i = numbers.length - 1; i >= 0; i--) { 
  output[--count[numbers[i]]] = numbers[i];
}

// arreglo ordenado de salida
for (i = 0; i < output.length; i++) {
  console.log(output[i]);
}

Implementación de C++

#include 

#include 

void countSort(int upperBound, int lowerBound, std::vector < int > numbersToSort) 
// Límites inferior y superior de los números en el vector
{
  int i;
  int range = upperBound - lowerBound; // Crea un rango lo suficientemente grande para obtener todos los números entre el mínimo y el máximo
  std::vector < int > counts(range + 1); // Inicializar conteos del tamaño del rango
  std::fill(counts.begin(), counts.end(), 0); // Rellenar vector de ceros
  std::vector < int > storedNumbers(numbersToSort.size()); // Inicializar los números almacenados del mismo tamaño que el vector de entrada
  std::fill(storedNumbers.begin(), storedNumbers.end(), 0); // Rellenar vector de números almacenados de ceros
  for (i = 0; i < numbersToSort.size(); i++) {
    int index = numbersToSort[i] - lowerBound; // Por ejemplo, si 5 es el límite inferior y numberToSort[i] es 5, el índice será 0 y el
    counts[index] += 1; // recuento de 5 se almacenará en recuentos[0]
  }

  for (i = 1; i < counts.size(); i++) {
    counts[i] += counts[i - 1];
  }

  for (i = numbersToSort.size() - 1; i >= 0; i--) { // Copiar elementos de numbersToSort a storedNumbers según el conteo
    storedNumbers[--counts[numbersToSort[i] - lowerBound]] = numbersToSort[i];
  }

  for (i = 0; i < storedNumbers.size(); i++) {
    std::cout << storedNumbers[i];
    if (i != storedNumbers.size() - 1)
      std::cout << ", ";
  }
  std::cout << std::endl;
}

Implementación en Swift

func countingSort(_ array: [Int]) {
  // Crea un arreglo para almacenar el conteo de cada elemento
  let maxElement = array.max() ?? 0
  var countArray = [Int](repeating: 0, count: Int(maxElement + 1))
  
  for element in array {
    countArray[element] += 1
  }
  
  for i in 1 ..< countArray.count {
    countArray[i] += countArray[i-1];
  }
  
  var sortedArray = [Int](repeating: 0, count: array.count)
  
  // copia elementos del arreglo a sortedArray de acuerdo con el conteo
  for i in (0 ..< array.count) .reversed() {
    countArray[array[i]] -= 1
    sortedArray[countArray[array[i]]] = array[i];
  }
  
  print(sortedArray)
}

Insertion Sort (Ordenación de inserción)

La ordenación por inserción es un algoritmo de ordenación simple para una pequeña cantidad de elementos.

Ejemplo:

En la ordenación por inserción, compara el elemento key con los elementos anteriores. Si los elementos anteriores son mayores que el elemento key, mueve el elemento anterior a la siguiente posición.

Comienza desde el índice 1 hasta el tamaño del arreglo de entrada.

[ 8 3 5 1 4 2 ]

Paso 1 :

      key = 3 //a partir del 1er índice.

      Aquí `key`(clave) se comparará con los elementos anteriores.

      En este caso, `key` se compara con 8. como 8 > 3, mueve el elemento 8
      a la siguiente posición e inserta `key` en la posición anterior.

      Result: [ 3 8 5 1 4 2 ]

Paso 2 :

      key = 5 //2º índice

      8 > 5 // mueve 8 al segundo índice e inserta 5 en el primer índice.

      Result: [ 3 5 8 1 4 2 ]

Paso 3 :

      //3er índice

      8 > 1     => [ 3 5 1 8 4 2 ]  

      5 > 1     => [ 3 1 5 8 4 2 ]

      3 > 1     => [ 1 3 5 8 4 2 ]

      Result: [ 1 3 5 8 4 2 ]

Paso 4 :

      key = 4 // 4º índice

      8 > 4   => [ 1 3 5 4 8 2 ]

      5 > 4   => [ 1 3 4 5 8 2 ]

      3 > 4   ≠>  stop

      Result: [ 1 3 4 5 8 2 ]

Paso 5 :

      key = 2 // 5º índice

      8 > 2   => [ 1 3 4 5 2 8 ]

      5 > 2   => [ 1 3 4 2 5 8 ]

      4 > 2   => [ 1 3 2 4 5 8 ]

      3 > 2   => [ 1 2 3 4 5 8 ]

      1 > 2   ≠> stop

      Result: [1 2 3 4 5 8]

El algoritmo que se muestra a continuación es una versión ligeramente optimizada para evitar cambiar el elemento key en cada iteración. Aquí, el elemento key se intercambiará al final de la iteración (paso).

    InsertionSort(arr[])
      for j = 1 to arr.length
         key = arr[j]
         i = j - 1
         while i > 0 and arr[i] > key
            arr[i+1] = arr[i]
            i = i - 1
         arr[i+1] = key

Aquí hay una implementación detallada en JavaScript:

function insertion_sort(A) {
    var len = array_length(A);
    var i = 1;
    while (i < len) {
        var x = A[i];
        var j = i - 1;
        while (j >= 0 && A[j] > x) {
            A[j + 1] = A[j];
            j = j - 1;
        }
        A[j+1] = x;
        i = i + 1;
    }
}

A continuación se muestra una implementación rápida en Swift:

  var array = [8, 3, 5, 1, 4, 2]

  func insertionSort(array:inout Array) -> Array{
      for j in 0.. 0 && array[i] > key){
              array[i+1] = array[i]
              i = i-1
          }
          array[i+1] = key
      }
      return array
  }

El ejemplo de Java se muestra a continuación:

public int[] insertionSort(int[] arr)
      for (j = 1; j < arr.length; j++) {
         int key = arr[j]
         int i = j - 1
         while (i > 0 and arr[i] > key) {
            arr[i+1] = arr[i]
            i -= 1
         }
         arr[i+1] = key
      }
      return arr;

Y en c...

void insertionSort(int arr[], int n) 
{ 
   int i, key, j; 
   for (i = 1; i < n; i++) 
   { 
       key = arr[i]; 
       j = i-1;
       while (j >= 0 && arr[j] > key) 
       { 
           arr[j+1] = arr[j]; 
           j = j-1; 
       } 
       arr[j+1] = key; 
   } 
}

Propiedades:

Complejidad de espacio: O(1)
Complejidad de tiempo: O(n), O(n* n), O(n* n) para los mejores, promedios y peores casos respectivamente.
Mejor caso: El arreglo ya está ordenado
Caso promedio: El arreglo se ordena aleatoriamente
En el peor de los casos: El arreglo se ordena de forma inversa.
Ordenación en el lugar: Sí
Estable: Sí

Heapsort (Ordenación por montones)

Heapsort es un algoritmo de ordenación eficiente basado en el uso de montones máximos/mínimos. Un montón es una estructura de datos basada en un árbol que satisface la propiedad del montón, es decir, para un montón máximo, la clave de cualquier nodo es menor o igual que la clave de su padre (si tiene un padre).

Esta propiedad se puede aprovechar para acceder al elemento máximo en el montón en tiempo O (logn) usando el método maxHeapify. Realizamos esta operación n veces, cada vez que movemos el elemento máximo en el montón a la parte superior del montón y lo extraemos del montón y lo colocamos en un arreglo ordenado. Por lo tanto, después de n iteraciones, tendremos una versión ordenada del arreglo de entrada.

El algoritmo no es un algoritmo en el lugar y requeriría que se construyera primero una estructura de datos de montón. El algoritmo también es inestable, lo que significa que al comparar objetos con la misma clave, no se conservará el orden original.

Este algoritmo se ejecuta en tiempo O(nlogn) y espacio adicional O(1) [O(n) incluido el espacio requerido para almacenar los datos de entrada] ya que todas las operaciones se realizan completamente en el lugar.

La complejidad de tiempo del caso mejor, peor y promedio de Heapsort es O (nlogn). Aunque heapsort tiene una mejor complejidad en el peor de los casos que quicksort, una ordenación rápida bien implementada se ejecuta más rápido en la práctica. Este es un algoritmo basado en la comparación, por lo que se puede usar para conjuntos de datos no numéricos en la medida en que se pueda definir alguna relación (propiedad del montón) sobre los elementos.

Una implementación en Java es como se muestra a continuación:

import java.util.Arrays;
public class Heapsort {

	public static void main(String[] args) {
		//test array
        //arreglo de prueba
		Integer[] arr = {1, 4, 3, 2, 64, 3, 2, 4, 5, 5, 2, 12, 14, 5, 3, 0, -1};
		String[] strarr = {"hope you find this helpful!", "wef", "rg", "q2rq2r", "avs", "erhijer0g", "ewofij", "gwe", "q", "random"};
		arr = heapsort(arr);
		strarr = heapsort(strarr);
		System.out.println(Arrays.toString(arr));
		System.out.println(Arrays.toString(strarr));
	}
	
	//O(nlogn) TIME, O(1) SPACE, NOT STABLE
    //O(nlogn) TIEMPO, O(1) ESPACIO, NO ESTABLE
	public static > E[] heapsort(E[] arr){
		int heaplength = arr.length;
		for(int i = arr.length/2; i>0;i--){
			arr = maxheapify(arr, i, heaplength);
		}
		
		for(int i=arr.length-1;i>=0;i--){
			E max = arr[0];
			arr[0] = arr[i];
			arr[i] = max;
			heaplength--;
			arr = maxheapify(arr, 1, heaplength);
		}
		
		return arr;
	}
	
	//Creates maxheap from array
//Crea maxheap a partir de un arreglo
	public static > E[] maxheapify(E[] arr, Integer node, Integer heaplength){
		Integer left = node*2;
		Integer right = node*2+1;
		Integer largest = node;
		
		if(left.compareTo(heaplength) <=0 && arr[left-1].compareTo(arr[node-1]) >= 0){
			largest = left;
		}
		if(right.compareTo(heaplength) <= 0 && arr[right-1].compareTo(arr[largest-1]) >= 0){
			largest = right;
		}	
		if(largest != node){
			E temp = arr[node-1];
			arr[node-1] = arr[largest-1];
			arr[largest-1] = temp;
			maxheapify(arr, largest, heaplength);
		}
		return arr;
	}
}

Implementación en C++

#include 
using namespace std;
void heapify(int arr[], int n, int i) 
{ 
    int largest = i; 
    int l = 2*i + 1;  
    int r = 2*i + 2;
    if (l < n && arr[l] > arr[largest]) 
        largest = l;
    if (r < n && arr[r] > arr[largest]) 
        largest = r;
    if (largest != i) 
    { 
        swap(arr[i], arr[largest]); 
  
        
        heapify(arr, n, largest); 
    } 
} 
  
 
void heapSort(int arr[], int n) 
{ 
    
    for (int i = n / 2 - 1; i >= 0; i--) 
        heapify(arr, n, i); 
  
    
    for (int i=n-1; i>=0; i--) 
    { 

        swap(arr[0], arr[i]); 
  
        
        heapify(arr, i, 0); 
    } 
} 
void printArray(int arr[], int n) 
{ 
    for (int i=0; i

`Ordenación Radix`

Requisito previo: Ordenar por conteo

QuickSort, MergeSort y HeapSort son algoritmos de ordenación basados en comparaciones. CountSort no lo es. Tiene la complejidad de O(n+k), donde k es el elemento máximo del arreglo de entrada. Entonces, si k es O(n), CountSort se convierte en una ordenación lineal, que es mejor que los algoritmos de ordenación basados en comparación que tienen una complejidad de tiempo O(nlogn).

La idea es extender el algoritmo CountSort para obtener una mejor complejidad de tiempo cuando k pasa a O(n2). Aquí viene la idea de Radix Sort.

`El algoritmo:`

Para cada dígito i donde i varía del dígito menos significativo al dígito más significativo de un número, ordena el arreglo de entrada utilizando el algoritmo de ordenación de acuerdo con el i-ésimo dígito. Usamos la ordenación por conteo porque es una ordenación estable.

Ejemplo: Supón que el arreglo de entrada es:

10, 21, 17, 34, 44, 11, 654, 123

Según el algoritmo, ordenaremos el arreglo de entrada según el dígito de uno (dígito menos significativo).

0: 10 1: 21 11 2: 3: 123 4: 34 44 654 5: 6: 7: 17 8: 9:

Entonces, el arreglo se convierte en 10, 21, 11, 123, 24, 44, 654, 17.

Ahora, ordenaremos según el dígito de las decenas:

0: 1: 10 11 17 2: 21 123 3: 34 4: 44 5: 654 6: 7: 8: 9:

Ahora, el arreglo se convierte en: 10, 11, 17, 21, 123, 34, 44, 654.

Finalmente, ordenamos según el dígito de las centenas (dígito más significativo):

0: 010 011 017 021 034 044 1: 123 2: 3: 4: 5: 6: 654 7: 8: 9:

El arreglo se convierte en: 10, 11, 17, 21, 34, 44, 123, 654 que está ordenado. Así es como funciona nuestro algoritmo.

Una implementación en C:

void countsort(int arr[],int n,int place){

        int i,freq[range]={0};         //el rango de números enteros es 10 ya que los dígitos van del 0 al 9

        int output[n];

        for(i=0;i=0;i--){
                output[freq[(arr[i]/place)%range]-1]=arr[i];
                freq[(arr[i]/place)%range]--;
        }
        
        for(i=0;i

`Selection Sort (Ordenación de selección)`

Selection Sort es uno de los algoritmos de ordenación más simples. Este algoritmo recibe su nombre de la forma en que itera a través del arreglo: Selecciona el elemento más pequeño actual y lo cambia de lugar.

Así es como funciona:

Encuentra el elemento más pequeño en el arreglo y lo intercambia con el primer elemento.
Encuentra el segundo elemento más pequeño y lo intercambia con el segundo elemento del arreglo.
Encuentra el tercer elemento más pequeño y lo intercambia con el tercer elemento del arreglo.
Repite el proceso de encontrar el siguiente elemento más pequeño y cambiarlo a la posición correcta hasta que se ordene todo el arreglo.

Pero, ¿cómo escribirías el código para encontrar el índice del segundo valor más pequeño en un arreglo?

Una manera fácil es notar que el valor más pequeño ya se ha cambiado al índice 0, por lo que el problema se reduce a encontrar el elemento más pequeño en el arreglo que comienza en el índice 1.

La ordenación por selección siempre toma el mismo número de comparaciones clave — N(N − 1)/2.

`Implementación en C/C++`

El siguiente programa en C++ contiene una implementación iterativa y recursiva del algoritmo de ordenación por selección. Ambas implementaciones se invocan en la función main().

#include 
#include 
using namespace std;

template
void print_array(T const(&arr)[n]) {
    for (size_t i = 0; i < n; i++)
        std::cout << arr[i] << ' ';
    cout << "\n";
}

int minIndex(int a[], int i, int j) {
    if (i == j)
        return i;
    int k = minIndex(a, i + 1, j);
    return (a[i] < a[k]) ? i : k;
}

void recurSelectionSort(int a[], int n, int index = 0) {
    if (index == n)
        return;
    int k = minIndex(a, index, n - 1);
    if (k != index)
        swap(a[k], a[index]);
    recurSelectionSort(a, n, index + 1);
}

void iterSelectionSort(int a[], int n) {
    for (int i = 0; i < n; i++)
    {
        int min_index = i;
        int min_element = a[i];
        for (int j = i + 1; j < n; j++)
        {
            if (a[j] < min_element)
            {
                min_element = a[j];
                min_index = j;
            }
        }
        swap(a[i], a[min_index]);
    }
}

int main() {
    int recurArr[6] = { 100,35, 500, 9, 67, 20 };
    int iterArr[5] = { 25, 0, 500, 56, 98 };

    cout << "Recursive Selection Sort"  << "\n";
    print_array(recurArr); // 100 35 500 9 67 20
    recurSelectionSort(recurArr, 6);
    print_array(recurArr); // 9 20 35 67 100 500

    cout << "Iterative Selection Sort" << "\n";
    print_array(iterArr); // 25 0 500 56 98
    iterSelectionSort(iterArr, 5);
    print_array(iterArr); // 0 25 56 98 500
}

`Implementación en JavaScript`

function selection_sort(A) {
    var len = A.length;
    for (var i = 0; i < len - 1; i = i + 1) {
        var j_min = i;
        for (var j = i + 1; j < len; j = j + 1) {
            if (A[j] < A[j_min]) {
                j_min = j;
            } else {}
        }
        if (j_min !== i) {
            swap(A, i, j_min);
        } else {}
    }
}

function swap(A, x, y) {
    var temp = A[x];
    A[x] = A[y];
    A[y] = temp;
}

`Implementación en Python`

def seletion_sort(arr):
         if not arr:
         return arr
    for i in range(len(arr)):
         min_i = i
         for j in range(i + 1, len(arr)):
              if arr[j] < arr[min_i]:
                  min_i = j
         arr[i], arr[min_i] = arr[min_i], arr[i]

`Implementación en Java`

public void selectionsort(int array[])
{
    int n = array.length;            // método para encontrar la longitud del arreglo
    for (int i = 0; i < n-1; i++)
    {
        int index = i;
        int min = array[i];                  // tomando el elemento min como i-ésimo elemento del arreglo
        for (int j = i+1; j < n; j++)
        {
            if (array[j] < array[index])
            {
                index = j;
                min = array[j];
            }
        }
        int t = array[index];         //Intercambiar los lugares de los elementos
        array[index] = array[i];
        array[i] = t;
    }
}

`Implementación en MATLAB`

function [sorted] = selectionSort(unsorted)
    len = length(unsorted);
    for i = 1:1:len
        minInd = i;
        for j = i+1:1:len
           if unsorted(j) < unsorted(minInd) 
               minInd = j;
           end
        end
        unsorted([i minInd]) = unsorted([minInd i]);    
    end
    sorted = unsorted;
end

`Propiedades`

Complejidad espacial: O(n)
Complejidad del tiempo: O(n2)
Ordenación en el lugar: Sí
Estable: No

`Bubble Sort (Ordenación de burbuja)`

Al igual que las burbujas se elevan desde el fondo de un vaso, la ordenación de burbujas es un algoritmo simple que ordena una lista, lo que permite que los valores más bajos o más altos aparezcan en la parte superior. El algoritmo atraviesa una lista y compara valores adyacentes, intercambiandolos si no están en el orden correcto.

Con una complejidad en el peor de los casos de O(n^2), la ordenación de burbujas es muy lenta en comparación con otros algoritmos de ordenación como la ordenación rápida. La ventaja es que es uno de los algoritmos de ordenación más fáciles de entender y codificar desde cero.

Desde una perspectiva técnica, la ordenación por burbuja es razonable para ordenar arreglos de tamaño pequeño o especialmente cuando se ejecutan algoritmos de ordenación en ordenadores con recursos de memoria notablemente limitados.

`Ejemplo:`

`Primer paso por la lista:`

Comenzando con [4, 2, 6, 3, 9], el algoritmo compara los dos primeros elementos del arreglo, 4 y 2. Los intercambia porque 2 < 4:[2, 4, 6, 3, 9]
Compara los siguientes dos valores, 4 y 6. Como 4 < 6, estos ya están en orden, y el algoritmo continúa:[2, 4, 6, 3, 9]
Los siguientes dos valores también se intercambian porque 3 < 6:[2, 4, 3, 6, 9]
Los dos últimos valores, 6 y 9, ya están en orden, por lo que el algoritmo no los intercambia.

`Second pass through the list: Segundo paso por la lista:`

2 < 4, por lo que no hay necesidad de intercambiar posiciones:[2, 4, 3, 6, 9]
El algoritmo intercambia los siguientes dos valores porque 3 < 4:[2, 3, 4, 6, 9]
Sin intercambio porque 4 < 6:[2, 3, 4, 6, 9]
De nuevo, 6 < 9, por lo que no se produce intercambio:[2, 3, 4, 6, 9]

La lista ya está ordenada, pero el algoritmo de ordenación de burbujas no se da cuenta de esto. Más bien, necesita completar una pasada completa a través de la lista sin intercambiar ningún valor para saber que la lista está ordenada.

`Tercer paso por la lista:`

[2, 3, 4, 6, 9] => [2, 3, 4, 6, 9]
[2, 3, 4, 6, 9] => [2, 3, 4, 6, 9]
[2, 3, 4, 6, 9] => [2, 3, 4, 6, 9]
[2, 3, 4, 6, 9] => [2, 3, 4, 6, 9]

Claramente, la ordenación por burbujas está lejos de ser el algoritmo de ordenación más eficiente. Aún así, es simple entenderlo e implementarlo por ti mismo.

`Propiedades`

Complejidad del espacio: O(1)
Rendimiento en el mejor caso: O(n)
Rendimiento promedio de casos: O(n*n)
Rendimiento en el peor de los casos: O(n*n)
Estable: Sí

`Vídeo Explicación (en inglés)`

Algoritmo de ordenación de burbujas

`Ejemplo en JavaScript`

let arr = [1, 4, 7, 45, 7,43, 44, 25, 6, 4, 6, 9],
    sorted = false;

while(!sorted) {
  sorted = true;
  for(var i=0; i < arr.length; i++) {
    if(arr[i] < arr[i-1]) {
      let temp = arr[i];
      arr[i] = arr[i-1];
      arr[i-1] = temp;
      sorted = false;
    }
  }
}

`Ejemplo en Java`

public class BubbleSort {
    static void sort(int[] arr) {
        int n = arr.length;
        int temp = 0;
         for(int i=0; i < n; i++){
                 for(int x=1; x < (n-i); x++){
                          if(arr[x-1] > arr[x]){
                                 temp = arr[x-1];
                                 arr[x-1] = arr[x];
                                 arr[x] = temp;
                         }

                 }
         }

    }
    public static void main(String[] args) {

		for(int i=0; i < 15; i++){
			int arr[i] = (int)(Math.random() * 100 + 1);
		}

                System.out.println("array before sorting\n");
                for(int i=0; i < arr.length; i++){
                        System.out.print(arr[i] + " ");
                }
                bubbleSort(arr);
                System.out.println("\n array after sorting\n");
                for(int i=0; i < arr.length; i++){
                        System.out.print(arr[i] + " ");
                }

        }
}

`Ejemplo en C++`

// Implementación recursiva
void bubblesort(int arr[], int n)
{
	if(n==1)	//Initial Case  
//Caso inicial
		return;
	bool swap_flag = false;
	for(int i=0;iarr[i+1])
		{
			int temp=arr[i];
			arr[i]=arr[i+1];
			arr[i+1]=temp;
			swap_flag = true;
		}
	}
               
// SI no se intercambiaron dos elementos en el ciclo, luego regresa, ya que el arreglo está ordenado
	if(swap_flag == false)
		return;
	bubblesort(arr,n-1);	//Recursividad para el arreglo restante
}

`Ejemplo en Swift`

func bubbleSort(_ inputArray: [Int]) -> [Int] {
    guard inputArray.count > 1 else { return inputArray } 
    // asegúrandose de que nuestro arreglo de entrada tenga más de 1 elemento
    var numbers = inputArray // los argumentos de la función son constantes por defecto en Swift, así que hacemos una copia
    for i in 0..<(numbers.count - 1) {
        for j in 0..<(numbers.count - i - 1) {
            if numbers[j] > numbers[j + 1] {
                numbers.swapAt(j, j + 1)
            }
        }
    }
    return numbers // devuelve el arreglo ordenado
}

`Ejemplo en Python`

def bubbleSort(arr): 
    n = len(arr) 
    for i in range(n):
        for j in range(0, n-i-1):
                if arr[j] > arr[j+1] : 
                        arr[j], arr[j+1] = arr[j+1], arr[j]
    print(arr)

`Ejemplo en PHP`

function bubble_sort($arr) {
    $size = count($arr)-1;
    for ($i=0; $i<$size; $i++) {
        for ($j=0; $j<$size-$i; $j++) {
            $k = $j+1;
            if ($arr[$k] < $arr[$j]) {
                // Intercambiar elementos en índices: $j, $k
                list($arr[$j], $arr[$k]) = array($arr[$k], $arr[$j]);
            }
        }
    }
    return $arr; // devuelve el arreglo ordenado
}

$arr = array(1,3,2,8,5,7,4,0);
print("Antes de ordenar");
print_r($arr);

$arr = bubble_sort($arr);
print("Después de ordenar usando ordenación por burbujas");
print_r($arr);

`Ejemplo en C`

#include 

int BubbleSort(int array[], int n);

int main(void) {
  int arr[] = {10, 2, 3, 1, 4, 5, 8, 9, 7, 6};
  BubbleSort(arr, 10);

  for (int i = 0; i < 10; i++) {
    printf("%d", arr[i]);
  }
  return 0;
}
int BubbleSort(int array[], n)
{
for (int i = 0 ; i < n - 1; i++)
  {
    for (int j = 0 ; j < n - i - 1; j++)     //n es la longitud del arreglo
    {
      if (array[j] > array[j+1])      // Para uso en orden decreciente
      {
        int swap   = array[j];
        array[j]   = array[j+1];
        array[j+1] = swap;
      }
    }
  }
}

`Ordenación rápida`

Quick sort es un eficiente algoritmo de ordenación divide y vencerás. La complejidad de tiempo del caso promedio de Quick Sort es O (nlog (n)) y la complejidad de tiempo del peor caso es O (n ^ 2) dependiendo de la selección del elemento pivote, que divide el arreglo actual en dos sub arreglos.

Por ejemplo, la complejidad de tiempo de Quick Sort es aproximadamente O(nlog(n)) cuando la selección del pivote divide el arreglo original en dos subarreglos de tamaño casi igual.

Por otro lado, si el algoritmo, que selecciona el elemento pivote de los arreglos de entrada, genera consistentemente 2 subarreglos con una gran diferencia en términos de tamaños de arreglo, el algoritmo de ordenación rápida puede lograr la complejidad de tiempo del peor caso de O(n^2 ).

Los pasos involucrados en Quick Sort son:

Elige un elemento para que sirva como pivote, en este caso, el último elemento del arreglo es el pivote.
Particionamiento: Ordena el arreglo de tal manera que todos los elementos menores que el pivote estén a la izquierda y todos los elementos mayores que el pivote estén a la derecha.
Llama a Quicksort de forma recursiva, teniendo en cuenta el pivote anterior para subdividir adecuadamente los arreglos izquierdo y derecho. (Se puede encontrar una explicación más detallada en los comentarios a continuación)

`Implementaciones de ejemplo en varios lenguajes`

`Implementación en JavaScript:`

const arr = [6, 2, 5, 3, 8, 7, 1, 4];

const quickSort = (arr, start, end) => {

  if(start < end) {

   // Puedes obtener información sobre cómo se deriva el valor de pivote en los comentarios a continuación
    let pivot = partition(arr, start, end);

   // Asegúrate de leer los comentarios a continuación para comprender por qué se usan pivote - 1 y pivote + 1
// Estas son las llamadas recursivas a quickSort
    quickSort(arr, start, pivot - 1);
    quickSort(arr, pivot + 1, end);
  } 

}

const partition = (arr, start, end) => { 
  let pivot = end;
    // Establece i en start - 1 para que puedas acceder al primer índice en caso de que el valor en arr[0] sea mayor que arr[pivot]
  // Los comentarios posteriores se expondrán sobre el comentario anterior
  let i = start - 1,
      j = start;

  // Incrementa j hasta el índice que precede al pivote
  while (j < pivot) {

    // If the value is greater than the pivot increment j
    // Si el valor es mayor que el pivote incrementa j
    if (arr[j] > arr[pivot]) {
      j++;
    }

    // Cuando el valor en arr[j] es menor que el pivote:
    // incrementa i (arr[i] será un valor mayor que arr[pivot]) e intercambia el valor en arr[i] y arr[j]
    else {
      i++;
      swap(arr, j, i);
      j++;
    }

  }

  //El valor de arr[i + 1] será mayor que el valor de arr[pivot]
  swap(arr, i + 1, pivot);

    //Devuelves i + 1, ya que los valores a la izquierda son menores que arr[i+1], y los valores a la derecha son mayores que arr[i + 1]
   // Como tal, cuando se llama a las ordenaciones rápidas recursivas, los nuevos subconjuntos no incluirán este valor de pivote utilizado anteriormente 
  return i + 1;
}

const swap = (arr, firstIndex, secondIndex) => {
  let temp = arr[firstIndex];
  arr[firstIndex] = arr[secondIndex];
  arr[secondIndex] = temp;
}

quickSort(arr, 0, arr.length - 1);
console.log(arr);

`Implementación en C`

#include  
void swap(int* a, int* b) 
{ 
    int t = *a; 
    *a = *b; 
    *b = t; 
}
int partition (int arr[], int low, int high) 
{ 
    int pivot = arr[high];     
    int i = (low - 1);  
  
    for (int j = low; j <= high- 1; j++) 
    { 
        if (arr[j] <= pivot) 
        { 
            i++;    
            swap(&arr[i], &arr[j]); 
        } 
    } 
    swap(&arr[i + 1], &arr[high]); 
    return (i + 1); 
}
void quickSort(int arr[], int low, int high) 
{ 
    if (low < high) 
    {
        int pi = partition(arr, low, high); 
  
        quickSort(arr, low, pi - 1); 
        quickSort(arr, pi + 1, high); 
    } 
} 
  

void printArray(int arr[], int size) 
{ 
    int i; 
    for (i=0; i < size; i++) 
        printf("%d ", arr[i]); 
    printf("n"); 
} 
  

int main() 
{ 
    int arr[] = {10, 7, 8, 9, 1, 5}; 
    int n = sizeof(arr)/sizeof(arr[0]); 
    quickSort(arr, 0, n-1); 
    printf("Sorted array: n"); 
    printArray(arr, n); 
    return 0; 
}

`Implementación en Python3`

import random

z=[random.randint(0,100) for i in range(0,20)]

def quicksort(z):
    if(len(z)>1):        
        piv=int(len(z)/2)
        val=z[piv]
        lft=[i for i in z if ival]

        res=quicksort(lft)+mid+quicksort(rgt)
        return res
    else:
        return z
        
ans1=quicksort(z)
print(ans1)

`Implementación en MATLAB`

a = [9,4,7,3,8,5,1,6,2];

sorted = quicksort(a,1,length(a));

function [unsorted] =  quicksort(unsorted, low, high)
    if low < high
        [pInd, unsorted] = partition(unsorted, low, high);
        unsorted = quicksort(unsorted, low, pInd-1);
        unsorted = quicksort(unsorted, pInd+1, high);
    end

end

function [pInd, unsorted] = partition(unsorted, low, high)
    i = low-1;
    for j = low:1:high-1
        if unsorted(j) <= unsorted(high)
            i = i+1;
            unsorted([i,j]) = unsorted([j,i]);
            
        end
    end
    unsorted([i+1,high]) = unsorted([high,i+1]);
    pInd = i+1;

end

La complejidad espacial de ordenación rápida es O(n). Esta es una mejora con respecto a otros algoritmos de ordenación de divide y vencerás, que ocupan espacio O(nlong(n)).

La ordenación rápida logra esto cambiando el orden de los elementos dentro del arreglo dado. Compara esto con el algoritmo de ordenación por combinación que crea 2 arreglos, cada longitud n/2, en cada llamada de función.

Sin embargo, existe el problema de que este algoritmo de ordenación es de tiempo O(n*n)si el pivote siempre se mantiene en el medio. Esto se puede superar utilizando un pivote aleatorio.

`Complejidad`

Mejor, promedio, peor, memoria: n log(n)n log(n)n 2log(n). No es un algoritmo estable, y la ordenación rápida generalmente se realiza en el lugar con el espacio de pila O (log (n)).

La complejidad espacial de ordenación rápida es O(n). Esta es una mejora con respecto a otros algoritmos de ordenación de divide y vencerás, que ocupan espacio O(n log(n)).

`Timsort`

Timsort es un algoritmo de ordenación rápido que funciona con una complejidad estable de O(N log(N)).

Timsort es una mezcla de Insertion Sort y Mergesort. Este algoritmo se implementa en Arrays.sort() de Java, así como en sorted() y sort() de Python. Las partes más pequeñas se ordenan mediante Ordenación por inserción y luego se fusionan mediante Mergesort.

Una implementación rápida en Python:

def binary_search(the_array, item, start, end):
    if start == end:
        if the_array[start] > item:
            return start
        else:
            return start + 1
    if start > end:
        return start

    mid = round((start + end)/ 2)

    if the_array[mid] < item:
        return binary_search(the_array, item, mid + 1, end)

    elif the_array[mid] > item:
        return binary_search(the_array, item, start, mid - 1)

    else:
        return mid

"""
Ordenación por inserción que usa timsort si el tamaño del arreglo es pequeño o si el tamaño de la "carrera" es pequeño
"""
def insertion_sort(the_array):
    l = len(the_array)
    for index in range(1, l):
        value = the_array[index]
        pos = binary_search(the_array, value, 0, index - 1)
        the_array = the_array[:pos] + [value] + the_array[pos:index] + the_array[index+1:]
    return the_array

def merge(left, right):
    """
  Toma dos listas ordenadas y devuelve una sola lista ordenada comparando los
    elementos de uno en uno.
    [1, 2, 3, 4, 5, 6]
    """
    if not left:
        return right
    if not right:
        return left
    if left[0] < right[0]:
        return [left[0]] + merge(left[1:], right)
    return [right[0]] + merge(left, right[1:])

def timsort(the_array):
    runs, sorted_runs = [], []
    length = len(the_array)
    new_run = [the_array[0]]

    # para cada i en el rango de 1 a la longitud del arreglo
    for i in range(1, length):
        # si i está al final de la lista
        if i == length - 1:
            new_run.append(the_array[i])
            runs.append(new_run)
            break
        # si el i-ésimo elemento del arreglo es menor que el anterior
        if the_array[i] < the_array[i-1]:
            # si new_run se establece en Ninguno (NULL)
            if not new_run:
                runs.append([the_array[i]])
                new_run.append(the_array[i])
            else:
                runs.append(new_run)
                new_run = []
        # de lo contrario si es igual o mayor 
        else:
            new_run.append(the_array[i])

    # para cada elemento en las ejecuciones, agrégalo usando la ordenación por inserción
    for item in runs:
        sorted_runs.append(insertion_sort(item))
    
    # por cada ejecución en sorted_runs, fusionarlos

    sorted_array = []
    for run in sorted_runs:
        sorted_array = merge(sorted_array, run)

    print(sorted_array)

timsort([2, 3, 1, 5, 6, 7])

`Complejidad:`

Tim sort tiene una complejidad estable de O(N log(N)) y se compara muy bien con Quicksort. En este cuadro se puede encontrar una comparación de complejidades.

`Merge Sort (Ordenar por fusión)`

Merge Sort es un algoritmo Divide y vencerás. Divide el arreglo de entrada en dos mitades, se llama a sí mismo para las dos mitades y luego fusiona las dos mitades ordenadas. La mayor parte del algoritmo tiene dos matrices ordenadas, y tenemos que fusionarlas en un único arreglo ordenado. Todo el proceso de ordenar un arreglo de N enteros se puede resumir en tres pasos:

Divide el arreglo en dos mitades.
Ordena la mitad izquierda y la mitad derecha usando el mismo algoritmo recurrente.
Combina las mitades ordenadas.

Hay algo conocido como el algoritmo de dos dedos que nos ayuda a fusionar dos arreglos ordenados. El uso de esta subrutina y la llamada a la función de ordenación por fusión en las mitades del arreglo de forma recursiva nos dará el arreglo ordenado final que estamos buscando.

Dado que este es un algoritmo basado en la recursión, tenemos una relación de recurrencia para él. Una relación de recurrencia es simplemente una forma de representar un problema en términos de sus subproblemas.

T(n) = 2 * T(n / 2) + O(n)

Poniéndolo en lenguaje sencillo, dividimos el subproblema en dos partes en cada paso y tenemos una cantidad lineal de trabajo que tenemos que hacer para unir las dos mitades ordenadas en cada paso.

`Complejidad`

La mayor ventaja de usar Merge sort es que la complejidad del tiempo es solo n*log(n) para ordenar un Array completo. Es mucho mejor que n ^ 2 tiempo de ejecución de ordenación de burbuja o ordenación de inserción.

Antes de escribir el código, comprendamos cómo funciona la ordenación por combinación o fusión con la ayuda de un diagrama.

Inicialmente tenemos un arreglo de 6 enteros no ordenados Arr(5, 8, 3, 9, 1, 2)
Dividimos el arreglo en dos mitades Arr1 = (5, 8, 3) y Arr2 = (9, 1, 2).
De nuevo, los dividimos en dos mitades: Arr3 = (5, 8) and Arr4 = (3) and Arr5 = (9, 1) and Arr6 = (2)
De nuevo, los dividimos en dos mitades: Arr7 = (5), Arr8 = (8), Arr9 = (9), Arr10 = (1) y Arr6 = (2)
Ahora compararemos los elementos en estos subconjuntos para fusionarlos.

`Propiedades:`

Complejidad espacial: O(n)
Complejidad temporal: O(n*log(n)). La complejidad del tiempo para Merge Sort podría no ser obvia a primera vista. El factor log(n) que entra se debe a la relación de recurrencia que hemos mencionado antes.
Ordenar en el lugar: No en una implementación típica
Estable: Sí
Paralelizable: sí (varias variantes paralelas se analizan en la tercera edición de Introducción a los algoritmos de Cormen, Leiserson, Rivest y Stein).

`Implementación de C++`

void merge(int array[], int left, int mid, int right)
{
    int i, j, k;

    // Tamaño de la sublista izquierda
int size_left = mid - left + 1;

// Tamaño de la sublista derecha
int size_right =  right - mid;

/* crea arreglos temporales */
int Left[size_left], Right[size_right];

/* Copiar datos a arreglos temporales L[] y R[] */
for(i = 0; i < size_left; i++)
{
    Left[i] = array[left+i];
}

for(j = 0; j < size_right; j++)
{
    Right[j] = array[mid+1+j];
}

// Combinar los arreglos temporales de nuevo en arr[left..right]
i = 0; // Índice inicial del subarreglo izquierdo
j = 0; // Índice inicial del subarreglo derecho
k = left; // Índice inicial del subarreglo fusionado

while (i < size_left && j < size_right)
{
    if (Left[i] <= Right[j])
    {
        array[k] = Left[i];
        i++;
    }
    else
    {
        array[k] = Right[j];
        j++;
    }
    k++;
}

// Copia los elementos restantes de Left[]
while (i < size_left)
{
    array[k] = Left[i];
    i++;
    k++;
}

// Copiar el resto de elementos de Right[]
while (j < size_right)
{
    array[k] = Right[j];
    j++;
    k++;
}
}

void mergeSort(int array[], int left, int right)
{
    if(left < right)
    {
        int mid = (left+right)/2;

        // Ordenar la primera y la segunda mitad
    mergeSort(array, left, mid);
    mergeSort(array, mid+1, right);

    // Finalmente fusionarlas
    merge(array, left, mid, right);
}
}

`Implementación de JavaScript`

function mergeSort (arr) {
  if (arr.length < 2) return arr;
  var mid = Math.floor(arr.length /2);
  var subLeft = mergeSort(arr.slice(0,mid));
  var subRight = mergeSort(arr.slice(mid));
  return merge(subLeft, subRight);
}

Primero verificamos la longitud del arreglo. Si es 1, simplemente devolvemos el arreglo. Este sería nuestro caso base. De lo contrario, encontraremos el valor medio y dividiremos el arreglo en dos mitades. Ahora ordenaremos ambas mitades con llamadas recursivas a la función MergeSort.

function merge (a,b) {
    var result = [];
    while (a.length >0 && b.length >0)
        result.push(a[0] < b[0]? a.shift() : b.shift());
    return result.concat(a.length? a : b);
}

Cuando fusionamos las dos mitades, almacenamos el resultado en un arreglo auxiliar. Compararemos el elemento inicial del arreglo izquierdo con el elemento inicial del arreglo derecho. Cualquiera que sea menor se insertará en el arreglo de resultados y lo eliminaremos de los arreglos respectivos usando el operador [shift()]. Si aún terminamos con valores en el arreglo izquierdo o derecho, simplemente los concatenaremos al final del resultado. Aquí está el resultado ordenado:

var test = [5,6,7,3,1,3,15];
console.log(mergeSort(test));

>> [1, 3, 3, 5, 6, 7, 15]

`Un tutorial de YouTube de ordenación por combinación`

Aquí hay un buen video de YouTube que explica el tema en detalle .

`Implementación en JS`

const list = [23, 4, 42, 15, 16, 8, 3]

const mergeSort = (list) =>{
  if(list.length <= 1) return list;
  const middle = list.length / 2 ;
  const left = list.slice(0, middle);
  const right = list.slice(middle, list.length);
  return merge(mergeSort(left), mergeSort(right));
}

const merge = (left, right) => {
  var result = [];
  while(left.length || right.length) {
    if(left.length && right.length) {
      if(left[0] < right[0]) {
        result.push(left.shift())
      } else {
        result.push(right.shift())
      }
    } else if(left.length) {
        result.push(left.shift())
      } else {
        result.push(right.shift())
      }
    }
  return result;
}

console.log(mergeSort(list)) // [ 3, 4, 8, 15, 16, 23, 42 ]

`Implementación en C`

#include 
#include
void merge(int arr[], int l, int m, int r) 
{ 
    int i, j, k; 
    int n1 = m - l + 1; 
    int n2 =  r - m; 
  
    
    int L[n1], R[n2]; 
  
    for (i = 0; i < n1; i++) 
        L[i] = arr[l + i]; 
    for (j = 0; j < n2; j++) 
        R[j] = arr[m + 1+ j];
    i = 0; 
    j = 0; 
    k = l; 
    while (i < n1 && j < n2) 
    { 
        if (L[i] <= R[j]) 
        { 
            arr[k] = L[i]; 
            i++; 
        } 
        else
        { 
            arr[k] = R[j]; 
            j++; 
        } 
        k++; 
    } 
  
    
    while (i < n1) 
    { 
        arr[k] = L[i]; 
        i++; 
        k++; 
    } 
  
    while (j < n2) 
    { 
        arr[k] = R[j]; 
        j++; 
        k++; 
    } 
} 
  
void mergeSort(int arr[], int l, int r) 
{ 
    if (l < r) 
    {  
        int m = l+(r-l)/2; 
  
        
        mergeSort(arr, l, m); 
        mergeSort(arr, m+1, r); 
  
        merge(arr, l, m, r); 
    } 
}
void printArray(int A[], int size) 
{ 
    int i; 
    for (i=0; i < size; i++) 
        printf("%d ", A[i]); 
    printf("\n"); 
} 
int main() 
{ 
    int arr[] = {12, 11, 13, 5, 6, 7}; 
    int arr_size = sizeof(arr)/sizeof(arr[0]); 
  
    printf("Given array is \n"); 
    printArray(arr, arr_size); 
  
    mergeSort(arr, 0, arr_size - 1); 
  
    printf("\nSorted array is \n"); 
    printArray(arr, arr_size); 
    return 0;

`Implementación en C++`

Consideremos el arreglo A = {2,5,7,8,9,12,13} y el arreglo B = {3,5,6,9,15} y queremos que el arreglo C también esté en orden ascendente.

void mergesort(int A[],int size_a,int B[],int size_b,int C[])
{
     int token_a,token_b,token_c;
     for(token_a=0, token_b=0, token_c=0; token_a

`Implementación en Python`

def merge(left,right,compare):
	result = [] 
	i,j = 0,0
	while (i < len(left) and j < len(right)):
		if compare(left[i],right[j]):
			result.append(left[i])
			i += 1
		else:
			result.append(right[j])
			j += 1
	while (i < len(left)):
		result.append(left[i])
		i += 1
	while (j < len(right)):
		result.append(right[j])
		j += 1
	return result

def merge_sort(arr, compare = lambda x, y: x < y):
    #Utilizando la función lambda para ordenar el arreglo en orden (creciente y decreciente).
     #Por defecto ordena el arreglo en orden creciente
	if len(arr) < 2:
		return arr[:]
	else:
		middle = len(arr) // 2
		left = merge_sort(arr[:middle], compare)
		right = merge_sort(arr[middle:], compare)
		return merge(left, right, compare) 

arr = [2,1,4,5,3]
print(merge_sort(arr))

`Implementación en Java`

public class mergesort {

	public static int[] mergesort(int[] arr,int lo,int hi) {
		
		if(lo==hi) {
			int[] ba=new int[1];
			ba[0]=arr[lo];
			return ba;
		}
		
		int mid=(lo+hi)/2;
		int arr1[]=mergesort(arr,lo,mid);
		int arr2[]=mergesort(arr,mid+1,hi);
		return merge(arr1,arr2);
	}
	
	public static int[] merge(int[] arr1,int[] arr2) {
		int i=0,j=0,k=0;
		int n=arr1.length;
		int m=arr2.length;
		int[] arr3=new int[m+n];
		while(i

`Ejemplo en Java`

public class mergesort {
  public static int[] mergesort(int[] arr, int lo, int hi) {
    if (lo == hi) {
      int[] ba = new int[1];
      ba[0] = arr[lo];
      return ba;
    }
    int mid = (lo + hi) / 2;
    int arr1[] = mergesort(arr, lo, mid);
    int arr2[] = mergesort(arr, mid + 1, hi);
    return merge(arr1, arr2);
  }

  public static int[] merge(int[] arr1, int[] arr2) {
    int i = 0, j = 0, k = 0;
    int n = arr1.length;
    int m = arr2.length;
    int[] arr3 = new int[m + n];
    while (i < n && j < m) {
      if (arr1[i] < arr2[j]) {
        arr3[k] = arr1[i];
        i++;
      } else {
        arr3[k] = arr2[j];
        j++;
      }
      k++;
    }
    while (i < n) {
      arr3[k] = arr1[i];
      i++;
      k++;
    }
    while (j < m) {
      arr3[k] = arr2[j];
      j++;
      k++;
    }
    return arr3;
  }

  public static void main(String[] args) {
    int arr[] = {2, 9, 8, 3, 6, 4, 10, 7};
    int[] so = mergesort(arr, 0, arr.length - 1);
    for (int i = 0; i < arr.length; i++)
      System.out.print(so[i] + " ");
  }
}



 La mejor manera de aprender desarrollo web backend 
BlackeyeB — Thu, 27 Apr 2023 20:56:10 +0000
 
        Artículo original: The Best Way to Learn Backend Web Development
      
Mi artículo anterior describía cómo puedes entrar en el desarrollo frontend . También se discutió cómo el front-end puede ser un lugar lleno de minas terrestres: pisa el lugar equivocado y te verás abrumado por los muchos marcos de trabajo (frameworks) del ecosistema de JavaScript.
En este artículo, vamos a ver cómo puedes ingresar al desarrollo de back-end. En el camino, responderé algunas de las preguntas más comunes que la gente me hace al respecto.
¿Qué es el desarrollo back-end?
El desarrollo front-end implica lo que un usuario ve en la pantalla cuando abre una URL específica de tu propiedad. Incluso en un entorno completamente estático (solo con HTML/CSS), cuando alguien abre un sitio web, algún servidor en el planeta necesita responderle con esos archivos HTML y CSS.
Ese servidor es solo un ordenador, como el que usas para navegar por Internet. Pero se ha ajustado para el rendimiento y no tiene componentes innecesarios como un mouse o un teclado adjuntos. Y se encuentra con toneladas de otros ordenadores, probablemente en un almacén de datos.
La programación de esos ordenadores de alguna manera especial se llama desarrollo de back-end .
Puedes pensar que el desarrollo de back-end se llama así porque se ejecuta a espaldas del usuario. Un visitante de tu sitio web nunca "accede" completamente al back-end. Simplemente se comunican con tu servidor, ya sea directamente a través de puertos para un acceso muy limitado (como la transferencia de archivos HTML/CSS) o ni siquiera eso, enterrados profundamente bajo CDN o firewalls (como Cloudflare).
Ahora que tenemos una comprensión básica de lo que significa el desarrollo de back-end, analicemos algunas preguntas reales .
¿Se requieren conocimientos de programación front-end para el back-end?
TLDR; No. (Too Long; Didn't read | Demasiado largo; no lo leí)
El desarrollo de back-end, como se mencionó anteriormente, implica la programación de un ordenador ubicado probablemente en el otro lado del planeta responsable de responder a lo que sus usuarios dicen desde sus propios ordenadores.
Si eres un desarrollador back-end a tiempo completo, realmente no necesitas preocuparte por lo que sucede dentro de esos archivos HTML, CSS y JavaScript que envías al navegador del usuario. En su lugar, debes centrarte más en el rendimiento y el código del servidor.
¿Qué implica el desarrollo de back-end?
Bueno, siguiendo los libros, puedes decir que una persona que codifica una aplicación que puede responder a solicitudes HTTP es un desarrollador de back-end.
Pero en realidad, a veces los desarrolladores de back-end pueden hacer mucho más que simplemente escribir scripts de servidor. Tienen el conocimiento para configurar servidores proxy inversos (NGiNX/HAProxy), habilitar la compresión y otras formas de acelerar el sitio, y configurar un entorno contenedor (docker) de producción.
Para calificar como desarrollador back-end, diría que las habilidades mínimas que necesitas son:
Buen conocimiento sobre un lenguaje de programación en el que puedes escribir servidores HTTP. Ejemplos: C#, Java, Node, PHP, Python, etc. (¡hay muchos!)
Administrar para hospedar usando cPanel (tradicional) o usando terminal bash (alojamiento en la nube/tradicional)
Trabajar con sistemas de control de versiones (VCS) como git para administrar e implementar compilaciones
Al igual que todos los juegos vienen con especificaciones mínimas y recomendadas, para los desarrolladores de back-end, mis especificaciones recomendadas serían (incluidas las habilidades mínimas):
NGiNX para activos de archivos estáticos y administración de servidores
Habilidades de gestión de bases de datos (SQL/NoSQL)
Seguridad de backend (Escribir código seguro y robusto, ejecutar aplicaciones en contenedores docker con privilegios limitados, protección contra ataques DoS)
Autoescalado/balanceo de carga
De acuerdo, demasiada charla sobre lo que sucede en el desarrollo de back-end. Pero, ¿cómo te conviertes en uno?
Comienza con los requisitos mínimos
Como dije, para el back-end, al igual que los juegos, tenemos un conjunto de requisitos mínimos y requisitos recomendados. Los requisitos mínimos consisten en 3 cosas:
Aprender un lenguaje de programación backend
Cuando las personas aprenden por sí mismas, por lo general no tienen un equipo ni nadie que pueda desarrollar el front-end. Están totalmente solos. Por lo tanto, a menudo tendrás que crear páginas web y servidores tú mismo, al menos al principio.
Aunque hay muchas opciones para los lenguajes de programación de back-end, y no puedo pensar en ningún lenguaje de sistema popular que no admita servidores HTTP listos para usar. La ventaja de elegir Node es que sus habilidades de  front-end JavaScript son transferibles al back-end.
No obstante, puedes elegir entre una variedad de lenguajes como Java, C++, C#, Python, PHP, etc.
¿Cómo elijo uno?, podrías preguntar. La respuesta es la misma que en el artículo de desarrollo front-end: tienes que probar todo inicialmente y ver cuál encaja mejor contigo.
Node es fácil, ya que es posible que ya hayas realizado la programación JS para el front-end. Pero si eres un desarrollador de Python o Java, es posible que los encuentre fáciles de aprender. Depende completamente de tu profesión y gusto.
Más información sobre la gestión del alojamiento
Atrás quedaron los días en los que tendrías que comprar servidores manualmente y configurarlos en tu casa, conectarte a tu ISP, hacerlo todo tú mismo. Esta es la era de la computación en la nube. Ahora, al alojar tu sitio web, tienes principalmente 2 opciones:
Optar por servidores de alojamiento administrados como HostGator o GoDaddy.
Optar por proveedores de alojamiento en la nube como GCP, AWS o DigitalOcean.
¿Cuál es la diferencia entre los dos? En ambos casos, los servidores son propiedad y están operados por las respectivas empresas. Pero la principal diferencia es que el alojamiento administrado es más amigable con la GUI, tiene un amplio conjunto de herramientas para ver el sistema de archivos, monitorear el uso, administrar los correos electrónicos de tu dominio oficial, cargar/descargar archivos de tu servidor, etc. Es básicamente una configuración para personas con menos habilidades técnicas.
Por esa razón, no recomiendo sitios administrados como HostGator o GoDaddy para desarrolladores experimentados. Aún así, podrían ser una buena plataforma para cometer errores y aprender, principalmente porque generalmente tienen planes de prepago para ello. También tendrás una buena interfaz de usuario para administrar las cosas, lo que te permite que no se disparen accidentalmente tus facturas.
Pero cuando empieces a ganar velocidad, te recomiendo que cambies a un proveedor de nube. Esto elimina todas las buenas herramientas de cPanel que usaste para administrar archivos y carpetas en los servidores. Pero al mismo tiempo, te desafiará a subir mucho de nivel tus habilidades.
Hoy en día, muchos proveedores de la nube también ofrecen una prueba gratuita decente, para que puedas probar su plataforma antes de entrar por completo. Yo alojo mi sitio web para desarrolladores en DigitalOcean y encuentro que tiene un dulce equilibrio de complejidad y características del sitio.
Puedes usar este enlace para registrarte en DigitalOcean y obtener un crédito de 100 dólares  gratis . Las instancias de DigitalOcean son baratas,  como unos 5 dólares por mes, por lo que tienes crédito aproximadamente para 20 meses, gran oferta, ¿no?
De todos modos, puedes elegir cualquier proveedor de nube. Entonces, es importante aprender a administrar el servidor usando solo la línea de comandos ingresando por ssh en él.
Más información sobre los sistemas de control de versiones
Hay otras soluciones además de Git como VCS (Sistema de Control de Versiones por sus siglas en inglés). Pero Git es el más usado y el más simple de entender.
Como individuo, es posible que no lo aprecies de inmediato. Pero comprenderás por qué es tan importante en el momento en que comiences a trabajar en equipo en varias funciones simultáneamente en tu proyecto.
Git te permite administrar tu flujo de trabajo usando confirmaciones y ramas. Las confirmaciones son como puntos de control en tu código base, a los que siempre puedes volver si cometes un error.
Las ramas (branches) son como realidades alternativas de tu proyecto, donde algo completamente diferente podría suceder. Estas realidades alternativas se pueden crear desde cualquier momento y se pueden fusionar nuevamente en cualquier momento.
Si esas realidades se pueden fusionar con compatibilidad, entonces está bien. Pero si hay un conflicto (como si estuvieras vivo en una realidad y muerto en otra), entonces tienes que hacer una elección manualmente. Otros cambios se pueden fusionar automáticamente.
Git es súper interesante, y una vez que lo domines, querrás usarlo en cada proyecto. Puedes mantener un historial de tu trabajo de manera eficiente (git comprime y almacena solo la diferencia entre confirmaciones).
También te permite crear repositorios git en línea en sitios como GitHub, que actúa como una fuente central de información para tu sitio web. Los sitios como GitHub se pueden configurar con webhooks especiales que realmente pueden actualizar tu sitio web cada vez que agregas un nuevo punto de control (una nueva confirmación) sin necesidad de ir manualmente al servidor y actualizarlo tu mismo.
Ir a las habilidades recomendadas
Soy un gran creyente en aprender haciendo. Y la mejor manera de hacer algo surge de la necesidad o el interés. Una vez que te consideres lo suficientemente bueno con los requisitos mínimos, es hora de adquirir las habilidades recomendadas. Esto incluye todas las herramientas como Docker y NGiNX mencionadas anteriormente.
DevOps también es algo que encaja muy bien con los desarrolladores de back-end. Puedes probar y explorar TravisCI o CircleCI para implementaciones de compilación automatizadas. La integración e implementación continuas (CI/CD) es un tema que podría ocupar otra publicación de blog completa, por lo que no entraré en eso.
Luego vienen las bases de datos, que coloqué en habilidades recomendadas. Pero vas a necesitar bases de datos para prácticamente cualquier aplicación que implique algún tipo de persistencia de datos generados por el usuario.
Las bases de datos suelen ser fáciles para empezar a trabajar, pero más difíciles de mantener y ajustar correctamente. La mejor manera de comenzar a trabajar en una pila tecnológica de back-end es tener todo junto en un solo servidor: el código de tu aplicación, los servidores proxy inversos, la base de datos, etc. Luego, a medida que te vuelves más competente en cada cosa, puedes desacoplarlo de la lógica empresarial existente.
Al hacer esto, estás habilitando una arquitectura que se puede escalar mucho. Una aplicación intensiva de operación de base de datos podría tener una solución optimizada para bases de datos. Y un sitio con mucho tráfico debe tener un buen mecanismo de CDN para descargar activos estáticos, etc.
Conclusión
Hay mucho que aprender, pero todo se puede lograr si no te rindes. Déjame saber lo que piensas sobre esta publicación a través de mis cuentas de Twitter e Instagram . ¡Significará mucho para mí si nos conectamos allí!
Además, si estás interesado, consulta codedamn , una plataforma centrada en el desarrollador para tecnologías de aprendizaje como el desarrollo de back-end. ¡Incluso publiqué un video de YT sobre cómo hacer funcionar tu propio servidor web simple en 2 minutos ! ¡Miralo y déjame saber lo que piensas!
¡Paz! 


 Cómo crear tu propia criptomoneda usando Python 
BlackeyeB — Thu, 27 Apr 2023 18:12:38 +0000
 
        Artículo original: How to Create Your Own Cryptocurrency Using Python
      
Con el auge actual de las criptomonedas, blockchain está creando un gran revuelo en el mundo de la tecnología. Esta tecnología ha atraído tanta atención principalmente por su capacidad para garantizar la seguridad, hacer cumplir la descentralización y acelerar los procesos en varias industrias, especialmente en la industria financiera.
Esencialmente, una cadena de bloques (blockchain) es una base de datos pública que documenta y auténtica irreversiblemente la posesión y transmisión de activos digitales. Las monedas digitales, como Bitcoin y Ethereum, se basan en este concepto. Blockchain es una tecnología emocionante que puedes utilizar para transformar las capacidades de tus aplicaciones.
Últimamente, hemos visto gobiernos, organizaciones e individuos que utilizan la tecnología blockchain para crear sus propias criptomonedas y evitar quedarse atrás. En particular, cuando Facebook propuso su propia criptomoneda, llamada Libra, el anuncio agitó muchas aguas en todo el mundo.
¿Qué pasaría si también pudieras hacer lo mismo y crear tu propia versión de una criptomoneda?
Pensé en esto y decidí desarrollar un algoritmo que crea una criptografía.
Decidí llamar a la criptomoneda fccCoin.
En este tutorial, voy a ilustrar el proceso paso a paso que utilicé para crear la moneda digital (utilicé los conceptos orientados a objetos del lenguaje de programación Python).
Este es el modelo básico del algoritmo de cadena de bloques para crear fccCoin:
class Block:

    def __init__():

    #primera clase bloque

        pass
    
    def calculate_hash():
    
    #calcula el hash criptográfico de cada bloque    
    
class BlockChain:
    
    def __init__(self):
     # método constructor
    pass
    
    def construct_genesis(self):
        # construye el bloque inicial
        pass

    def construct_block(self, proof_no, prev_hash):
        # construye un nuevo bloque y lo agrega a la cadena
        pass

    @staticmethod
    def check_validity():
        # comprueba si la cadena de bloques es válida
        pass

    def new_data(self, sender, recipient, quantity):
        # agrega una nueva transacción a los datos de las transacciones
        pass

    @staticmethod
    def construct_proof_of_work(prev_proof):
        # protege la cadena de bloques de ataques
        pass
   
    @property
    def last_block(self):
        # devuelve el último bloque de la cadena
        return self.chain[-1]

Ahora, déjame explicarte lo que está sucediendo...
1. Construyendo la primera clase Block
Una cadena de bloques se compone de varios bloques que se unen entre sí (eso suena familiar, ¿verdad?).
El encadenamiento de bloques se lleva a cabo de tal manera que si se manipula un bloque, el resto de la cadena se vuelve inválido.
Al aplicar el concepto anterior, creé la siguiente clase Block inicial:
import hashlib
import time

class Block:

    def __init__(self, index, proof_no, prev_hash, data, timestamp=None):
        self.index = index
        self.proof_no = proof_no
        self.prev_hash = prev_hash
        self.data = data
        self.timestamp = timestamp or time.time()

    @property
    def calculate_hash(self):
        block_of_string = "{}{}{}{}{}".format(self.index, self.proof_no,
                                              self.prev_hash, self.data,
                                              self.timestamp)

        return hashlib.sha256(block_of_string.encode()).hexdigest()

    def __repr__(self):
        return "{} - {} - {} - {} - {}".format(self.index, self.proof_no,
                                               self.prev_hash, self.data,
                                               self.timestamp)

Como puedes ver en el código anterior, definí la función __init__(), que se ejecutará cuando se inicie la clase Block, como en cualquier otra clase de Python.
Proporcioné los siguientes parámetros a la función de iniciación:
self—se refiere a la instancia de la clase Block, que permite acceder a los métodos y atributos asociados a la clase;
index—realiza un seguimiento de la posición del bloque dentro de la cadena de bloques;
proof_no—este es el número producido durante la creación de un nuevo bloque (llamado minería);
prev_hash—se refiere al hash del bloque anterior dentro de la cadena;
data—esto brinda un registro de todas las transacciones completadas, como la cantidad comprada;
timestamp—esto coloca una marca de tiempo para las transacciones.
El segundo método de la clase, calculate_hash, generará el hash de los bloques utilizando los valores anteriores. El módulo SHA-256 se importa al proyecto para ayudar a obtener los hash de los bloques.
Una vez que los valores se hayan ingresado en el algoritmo hash criptográfico, la función devolverá una cadena de 256 bits que representa el contenido del bloque.
Así es como se logra la seguridad en las cadenas de bloques: cada bloque tendrá un hash y ese hash se basará en el hash del bloque anterior.
Como tal, si alguien intenta comprometer cualquier bloque de la cadena, los otros bloques tendrán hashes no válidos, lo que provocará la interrupción de toda la red de la cadena de bloques.
En última instancia, un bloque se verá así:
{
    "index": 2,
    "proof": 21,
    "prev_hash": "6e27587e8a27d6fe376d4fd9b4edc96c8890346579e5cbf558252b24a8257823",
    "transactions": [
        {'sender': '0', 'recipient': 'Quincy Larson', 'quantity': 1}
    ],
    "timestamp": 1521646442.4096143
}
2. Construyendo la clase Blockchain
La idea principal de una cadena de bloques, tal como su nombre lo indica, consiste en "encadenar" varios bloques entre sí.
Por lo tanto, voy a construir una clase Blockchain que será útil para administrar el funcionamiento de toda la cadena. Aquí es donde se desarrollará la mayor parte de la acción.
La clase Blockchain tendrá varios métodos auxiliares para completar varias tareas en la cadena de bloques.
Permíteme explicar el papel de cada uno de los métodos en la clase.
a. Método constructor
Este método garantiza que se cree una instancia de la cadena de bloques.
class BlockChain:

    def __init__(self):
        self.chain = []
        self.current_data = []
        self.nodes = set()
        self.construct_genesis()
Estos son los roles de sus atributos:
self.chain —esta variable mantiene todos los bloques;
self.current_data —esta variable mantiene todas las transacciones completadas en el bloque;
self.construct_genesis() —este método se encargará de construir el bloque inicial.
b. Construyendo el bloque de génesis
La cadena de bloques requiere un método construct_genesis para construir el bloque inicial en la cadena. En la convención de la cadena de bloques, este bloque es especial porque simboliza el inicio de la cadena de bloques.
En este caso, construyámoslo simplemente pasando algunos valores predeterminados al método construct_block.
Le di a proof_no y prev_hash un valor de cero, aunque puedes proporcionar cualquier valor que desees.
def construct_genesis(self):
    self.construct_block(proof_no=0, prev_hash=0)


def construct_block(self, proof_no, prev_hash):
    block = Block(
        index=len(self.chain),
        proof_no=proof_no,
        prev_hash=prev_hash,
        data=self.current_data)
    self.current_data = []

    self.chain.append(block)
    return block
C. Construyendo nuevos bloques.
El método construct_block se utiliza para crear nuevos bloques en la cadena de bloques.
Esto es lo que está ocurriendo con los diversos atributos de este método:
index—esto representa la longitud de la cadena de bloques;
proof_nor & prev_hash —el método que llama los pasa;
data — contiene un registro de todas las transacciones que no están incluidas en ningún bloque del nodo;
self.current_data: se usa para restablecer la lista de transacciones en el nodo. Si se ha construido un bloque y se le han asignado transacciones, la lista se restablece para garantizar que se agreguen transacciones futuras a esta lista. Y, este proceso se llevará a cabo continuamente;
self.chain.append()— este método une bloques recién construidos a la cadena;
return: por último, se devuelve un objeto de bloque construido.
d. Comprobación de validez

El método check_validity es importante para evaluar la integridad de la cadena de bloques y garantizar que no haya anomalías.
Como se mencionó anteriormente, los hashes son esenciales para la seguridad de la cadena de bloques, ya que incluso el más mínimo cambio en el objeto conducirá a la generación de un hash completamente nuevo.
Por lo tanto, este método check_validity usa declaraciones if para verificar si el hash de cada bloque es correcto.
También verifica si cada bloque apunta al bloque anterior correcto, comparando el valor de sus hashes. Si todo es correcto, devuelve verdadero; de lo contrario, devuelve falso.
@staticmethod
def check_validity(block, prev_block):
    if prev_block.index + 1 != block.index:
        return False

    elif prev_block.calculate_hash != block.prev_hash:
        return False

    elif not BlockChain.verifying_proof(block.proof_no, prev_block.proof_no):
        return False

    elif block.timestamp <= prev_block.timestamp:
        return False

    return True
e. Adición de datos de transacciones
El método new_data se utiliza para agregar los datos de las transacciones a un bloque. Es un método muy simple: acepta tres parámetros (detalles del remitente, detalles del destinatario y cantidad) y agrega los datos de la transacción a la lista self.current_data.
Cada vez que se crea un nuevo bloque, esta lista se asigna a ese bloque y se restablece una vez más, como se explica en el método construct_block .
Una vez que se han agregado los datos de la transacción a la lista, se devuelve el índice del siguiente bloque que se creará.
Este índice se calcula sumando 1 al índice del bloque actual (que es el último de la cadena de bloques). Los datos ayudarán al usuario a enviar la transacción en el futuro.
def new_data(self, sender, recipient, quantity):
    self.current_data.append({
        'sender': sender,
        'recipient': recipient,
        'quantity': quantity
    })
    return True

f. Agregar prueba de trabajo
La prueba de trabajo es un concepto que evita el abuso de la cadena de bloques. Simplemente, su objetivo es identificar un número que resuelva un problema después de realizar una cierta cantidad de trabajo de cómputo.
Si el nivel de dificultad para identificar el número es alto, se desalienta el spam y la manipulación de la cadena de bloques.
En este caso, usaremos un algoritmo simple que disuade a las personas de minar bloques o crear bloques fácilmente.
@staticmethod
def proof_of_work(last_proof):
    '''this simple algorithm identifies a number f' such that hash(ff') contain 4 leading zeroes
         f is the previous f'
         f' is the new proof
        '''
    proof_no = 0
    while BlockChain.verifying_proof(proof_no, last_proof) is False:
        proof_no += 1

    return proof_no


@staticmethod
def verifying_proof(last_proof, proof):
    #verifying the proof: does hash(last_proof, proof) contain 4 leading zeroes?

    guess = f'{last_proof}{proof}'.encode()
    guess_hash = hashlib.sha256(guess).hexdigest()
    return guess_hash[:4] == "0000"

g. Conseguir el último bloque
Por último, el método latest_block es un método auxiliar que ayuda a obtener el último bloque de la cadena de bloques. Recuerde que el último bloque es en realidad el bloque actual de la cadena.
@property
    def latest_block(self):
        return self.chain[-1]
Sumemos todo junto
Aquí está el código completo para crear la criptomoneda fccCoin .
También puedes obtener el código en este repositorio de GitHub.
import hashlib
import time


class Block:

    def __init__(self, index, proof_no, prev_hash, data, timestamp=None):
        self.index = index
        self.proof_no = proof_no
        self.prev_hash = prev_hash
        self.data = data
        self.timestamp = timestamp or time.time()

    @property
    def calculate_hash(self):
        block_of_string = "{}{}{}{}{}".format(self.index, self.proof_no,
                                              self.prev_hash, self.data,
                                              self.timestamp)

        return hashlib.sha256(block_of_string.encode()).hexdigest()

    def __repr__(self):
        return "{} - {} - {} - {} - {}".format(self.index, self.proof_no,
                                               self.prev_hash, self.data,
                                               self.timestamp)


class BlockChain:

    def __init__(self):
        self.chain = []
        self.current_data = []
        self.nodes = set()
        self.construct_genesis()

    def construct_genesis(self):
        self.construct_block(proof_no=0, prev_hash=0)

    def construct_block(self, proof_no, prev_hash):
        block = Block(
            index=len(self.chain),
            proof_no=proof_no,
            prev_hash=prev_hash,
            data=self.current_data)
        self.current_data = []

        self.chain.append(block)
        return block

    @staticmethod
    def check_validity(block, prev_block):
        if prev_block.index + 1 != block.index:
            return False

        elif prev_block.calculate_hash != block.prev_hash:
            return False

        elif not BlockChain.verifying_proof(block.proof_no,
                                            prev_block.proof_no):
            return False

        elif block.timestamp <= prev_block.timestamp:
            return False

        return True

    def new_data(self, sender, recipient, quantity):
        self.current_data.append({
            'sender': sender,
            'recipient': recipient,
            'quantity': quantity
        })
        return True

    @staticmethod
    def proof_of_work(last_proof):
        '''this simple algorithm identifies a number f' such that hash(ff') contain 4 leading zeroes
         f is the previous f'
         f' is the new proof
        '''
        proof_no = 0
        while BlockChain.verifying_proof(proof_no, last_proof) is False:
            proof_no += 1

        return proof_no

    @staticmethod
    def verifying_proof(last_proof, proof):
        #verifying the proof: does hash(last_proof, proof) contain 4 leading zeroes?

        guess = f'{last_proof}{proof}'.encode()
        guess_hash = hashlib.sha256(guess).hexdigest()
        return guess_hash[:4] == "0000"

    @property
    def latest_block(self):
        return self.chain[-1]

    def block_mining(self, details_miner):

        self.new_data(
            sender="0",  #it implies that this node has created a new block
            receiver=details_miner,
            quantity=
            1,  #creating a new block (or identifying the proof number) is awarded with 1
        )

        last_block = self.latest_block

        last_proof_no = last_block.proof_no
        proof_no = self.proof_of_work(last_proof_no)

        last_hash = last_block.calculate_hash
        block = self.construct_block(proof_no, last_hash)

        return vars(block)

    def create_node(self, address):
        self.nodes.add(address)
        return True

    @staticmethod
    def obtain_block_object(block_data):
        #obtains block object from the block data

        return Block(
            block_data['index'],
            block_data['proof_no'],
            block_data['prev_hash'],
            block_data['data'],
            timestamp=block_data['timestamp'])


Ahora, probemos nuestro código para ver si funciona.
blockchain = BlockChain()

print("***Mining fccCoin about to start***")
print(blockchain.chain)

last_block = blockchain.latest_block
last_proof_no = last_block.proof_no
proof_no = blockchain.proof_of_work(last_proof_no)

blockchain.new_data(
    sender="0",  #it implies that this node has created a new block
    recipient="Quincy Larson",  #let's send Quincy some coins!
    quantity=
    1,  #creating a new block (or identifying the proof number) is awarded with 1
)

last_hash = last_block.calculate_hash
block = blockchain.construct_block(proof_no, last_hash)

print("***Mining fccCoin has been successful***")
print(blockchain.chain)
¡Funcionó!
Aquí está el resultado del proceso de minería:
***Mining fccCoin about to start***
[0 - 0 - 0 - [] - 1566930640.2707076]
***Mining fccCoin has been successful***
[0 - 0 - 0 - [] - 1566930640.2707076, 1 - 88914 - a8d45cb77cddeac750a9439d629f394da442672e56edfe05827b5e41f4ba0138 - [{'sender': '0', 'recipient': 'Quincy Larson', 'quantity': 1}] - 1566930640.5363243]
Conclusión
¡Ahí tienes!
Así es como podrías crear tu propia cadena de bloques usando Python.
Permíteme decir que este tutorial solo demuestra los conceptos básicos para mojarse los pies en la innovadora tecnología blockchain.
Si esta moneda se implementara tal como está, no podría satisfacer las demandas actuales del mercado de una criptomoneda estable, segura y fácil de usar.
Por lo tanto, aún se puede mejorar agregando características adicionales para mejorar sus capacidades para extraer y enviar transacciones financieras.
No obstante, es un buen punto de partida si decides dar a conocer tu nombre en el asombroso mundo de las criptomonedas.
Si tienes algún comentario o pregunta, por favor publícalo a continuación.
¡Feliz (cripto) codificación! 


 Qué es Nmap y cómo usarlo: Un tutorial para la mejor herramienta de escaneo de todos los tiempos 
BlackeyeB — Sun, 23 Apr 2023 01:42:00 +0000
 
        Artículo original: What is Nmap and How to Use it – A Tutorial for the Greatest Scanning Tool of All Time
      
Nmap es la herramienta de escaneo más famosa utilizada por los pentesters. En este artículo, veremos algunas características principales de Nmap junto con algunos comandos útiles.
¿Qué es Nmap?
Nmap es la abreviatura de Network Mapper. Es una herramienta de línea de comandos de Linux de código abierto que se utiliza para escanear direcciones IP y puertos en una red y para detectar aplicaciones instaladas.
Nmap permite a los administradores de red encontrar qué dispositivos se están ejecutando en su red, descubrir puertos y servicios abiertos y detectar vulnerabilidades.
Gordon Lyon (seudónimo Fyodor) escribió Nmap como una herramienta para ayudar a mapear una red completa fácilmente y encontrar sus puertos y servicios abiertos.
Nmap se ha vuelto muy popular y aparece en películas como The Matrix y la popular serie Mr. Robot.
¿Por qué usar Nmap?
Hay una serie de razones por las que los profesionales de la seguridad prefieren Nmap a otras herramientas de análisis.
Primero, Nmap te ayuda a mapear rápidamente una red sin comandos ni configuraciones sofisticados. También admite comandos simples (por ejemplo, para verificar si un host está activo) y secuencias de comandos complejas a través del motor de secuencias de comandos Nmap.
Otras características de Nmap incluyen:
Capacidad para reconocer rápidamente todos los dispositivos, incluidos servidores, enrutadores, conmutadores, dispositivos móviles, etc. en redes únicas o múltiples.
Ayuda a identificar los servicios que se ejecutan en un sistema, incluidos los servidores web, los servidores DNS y otras aplicaciones comunes. Nmap también puede detectar versiones de aplicaciones con una precisión razonable para ayudar a detectar vulnerabilidades existentes.
Nmap puede encontrar información sobre el sistema operativo que se ejecuta en los dispositivos. Puede proporcionar información detallada, como las versiones del sistema operativo, lo que facilita la planificación de enfoques adicionales durante las pruebas de penetración.
Durante la auditoría de seguridad y el escaneo de vulnerabilidades, puedes usar Nmap para atacar sistemas usando scripts existentes del motor de scripting de Nmap.
Nmap tiene una interfaz gráfica de usuario llamada Zenmap. Te ayuda a desarrollar mapeos visuales de una red para una mejor usabilidad y generación de informes.
Comandos
Veamos algunos comandos de Nmap. Si no tienes Nmap instalado, puedes obtenerlo desde aquí.
Escaneos básicos
Escanear la lista de dispositivos activos en una red es el primer paso en el mapeo de la red. Hay dos tipos de escaneos que puedes usar para eso:
Escaneo de ping: Escanea la lista de dispositivos en funcionamiento en una subred determinada.
> nmap -sp 192.168.1.1/24
Escanear un solo host: Escanea un solo host en busca de 1000 puertos conocidos. Estos puertos son los que utilizan servicios populares como SQL, SNTP, apache y otros.
> nmap scanme.nmap.org
Escaneo sigiloso
El escaneo sigiloso se realiza enviando un paquete SYN y analizando la respuesta. Si se recibe SYN/ACK, significa que el puerto está abierto y puedes abrir una conexión TCP.
Sin embargo, un escaneo sigiloso nunca completo el protocolo de enlace de 3 vías , lo que dificulta que el objetivo determine el sistema de escaneo.
> nmap -sS scanme.nmap.org
Puedes usar el comando '-sS' para realizar un escaneo sigiloso. Recuerda, el escaneo sigiloso es más lento y no tan agresivo como los otros tipos de escaneo, por lo que es posible que debas esperar un tiempo para obtener una respuesta.
Escaneo de versiones
Encontrar versiones de aplicaciones es una parte crucial en las pruebas de penetración.
Te facilita la vida, ya que puedes encontrar una vulnerabilidad existente en la base de datos de Vulnerabilidades y Exploits Comunes (CVE) para una versión particular del servicio. Luego puedes usarlo para atacar una máquina usando una herramienta de explotación como Metasploit .
> nmap -sV scanme.nmap.org
Para hacer un escaneo de versión, usa el comando '-sV'. Nmap proporcionará una lista de servicios con sus versiones. Ten en cuenta que los escaneos de versiones no siempre son 100% precisos, pero te acercan un paso más para ingresar con éxito a un sistema.
Escaneo del sistema operativo
Además de los servicios y sus versiones, Nmap puede proporcionar información sobre el sistema operativo subyacente mediante huellas dactilares de TCP/IP. Nmap también intentará encontrar el tiempo de actividad del sistema durante una exploración del sistema operativo.
> nmap -sV scanme.nmap.org
Puedes usar las banderas adicionales como osscan-limit para limitar la búsqueda a algunos objetivos esperados. Nmap mostrará el porcentaje de confianza para cada conjetura del sistema operativo.
Una vez más, la detección del sistema operativo no siempre es precisa, pero contribuye en gran medida a ayudar a un pen tester a acercarse a su objetivo.
Escaneo agresivo
Nmap tiene un modo agresivo que permite la detección del sistema operativo, la detección de versiones, el escaneo de scripts y el rastreo de rutas. Puedes utilizar el argumento -A para realizar un análisis agresivo.
> nmap -A scanme.nmap.org
Los escaneos agresivos brindan mucha mejor información que los escaneos regulares. Sin embargo, un análisis agresivo también envía más sondeos y es más probable que se detecte durante las auditorías de seguridad.
Escaneo de varios hosts
Nmap tiene la capacidad de escanear múltiples hosts simultáneamente. Esta característica es muy útil cuando administras una gran infraestructura de red.
Puedes escanear múltiples hosts a través de numerosos enfoques:
Escribe todas las direcciones IP en una sola fila para escanear todos los hosts al mismo tiempo.
> nmap 192.164.1.1 192.164.0.2 192.164.0.2
Utiliza el asterisco (*) para escanear todas las subredes a la vez.
> nmap 192.164.1.*
Agrega comas para separar las terminaciones de las direcciones en lugar de escribir los dominios completos.
> nmap 192.164.0.1,2,3,4
Usa un guion para especificar un rango de direcciones IP
> nmap 192.164.0.0–255
Escaneo de puertos
El escaneo de puertos es una de las características más fundamentales de Nmap. Puedes buscar puertos de varias maneras.
Usando el parámetro -p para buscar un solo puerto
> nmap -p 973 192.164.0.1
Si especificas el tipo de puerto, puedes buscar información sobre un tipo particular de conexión, por ejemplo, para una conexión TCP.
> nmap -p T:7777, 973 192.164.0.1
Se puede escanear un rango de puertos separándolos con un guion.
> nmap -p 76–973 192.164.0.1
También puede usar el indicador -top-ports para especificar los n puertos principales para escanear.
> nmap --top-ports 10 scanme.nmap.org
Escaneo desde un archivo
Si deseas escanear una gran lista de direcciones IP, puedes hacerlo importando un archivo con la lista de direcciones IP.
> nmap -iL /input_ips.txt
El comando anterior producirá los resultados del escaneo de todos los dominios dados en el archivo "input_ips.txt". Además de simplemente escanear las direcciones IP, también puedes usar opciones y banderas adicionales.
Verbosidad y exportación de resultados de escaneo
Las pruebas de penetración pueden durar días o incluso semanas. Exportar los resultados de Nmap puede ser útil para evitar trabajo redundante y ayudar a crear informes finales. Veamos algunas formas de exportar los resultados del escaneo de Nmap.
Salida detallada
> nmap -v scanme.nmap.org
La salida detallada proporciona información adicional sobre el análisis que se está realizando. Es útil monitorear paso a paso las acciones que Nmap realiza en una red, especialmente si eres un extraño que escanea la red de un cliente.
Salida normal
Los escaneos de Nmap también se pueden exportar a un archivo de texto. Será ligeramente diferente de la salida de la línea de comandos original, pero capturará todos los resultados de escaneo esenciales.
> nmap -oN output.txt scanme.nmap.org
Salida XML
Los escaneos de Nmap también se pueden exportar a XML. También es el formato de archivo preferido de la mayoría de las herramientas de prueba de penetración, lo que lo hace fácilmente analizable al importar resultados de escaneo.
> nmap -oX output.xml scanme.nmap.org
Múltiples Formatos
También puedes exportar los resultados del escaneo en todos los formatos disponibles a la vez usando el comando -oA.
> nmap -oA output scanme.nmap.org
El comando anterior exportará el resultado del escaneo en tres archivos: salida.xml, salida. Nmap y salida.gnmap.
Ayuda Nmap
Nmap tiene un comando de ayuda incorporado que enumera todas las banderas y opciones que puedes usar. A menudo es útil dada la cantidad de argumentos de línea de comandos con los que viene Nmap.
> nmap -h
Motor de secuencias de comandos Nmap
Nmap Scripting Engine (NSE) es una herramienta increíblemente poderosa que puedes usar para escribir scripts y automatizar numerosas funciones de red.
Puedes encontrar muchos scripts distribuidos en Nmap o escribir tu propio script según tus requisitos. Incluso puedes modificar scripts existentes usando el lenguaje de programación Lua .
NSE también tiene secuencias de comandos de ataque que se utilizan para atacar la red y varios protocolos de red.
Repasar el motor de secuencias de comandos en profundidad estaría fuera del alcance de este artículo, por lo que aquí hay más información sobre el motor de secuencias de comandos Nmap.
Zenmap
Zenmap es una interfaz gráfica de usuario para Nmap. Es un software gratuito y de código abierto que te ayuda a comenzar a utilizar Nmap.
Además de proporcionar mapeos de red visuales, Zenmap también te permite guardar y buscar tus escaneos para uso futuro.
Zenmap es excelente para los principiantes que desean probar las capacidades de Nmap sin pasar por una interfaz de línea de comandos.
Conclusión
Nmap es claramente la "navaja suiza" de las redes, gracias a su inventario de comandos versátiles.
Te permite escanear y descubrir rápidamente información esencial sobre tu red, hosts, puertos, firewalls y sistemas operativos.
Nmap tiene numerosas configuraciones, indicadores y preferencias que ayudan a los administradores de sistemas a analizar una red en detalle.
Si deseas aprender Nmap en profundidad, este es un gran recurso.
¿Te encantó este artículo? Únete a mi Newsletter y recibe un resumen de mis artículos y videos todos los lunes. 


 El comando Tar en Linux: Tar CVF y Tar XVF explicados con comandos de ejemplo 
BlackeyeB — Sun, 23 Apr 2023 01:02:46 +0000
 
        Artículo original: The Tar Command in Linux: Tar CVF and Tar XVF Explained with Example Commands
      
El nombre tares la abreviatura de archivo de cinta . Las "cintas" en cuestión serían todas esas unidades de almacenamiento magnético que fueron populares en la década de 1950.
Esto sugiere que la herramienta tar podría ser un poco vieja y haber pasado su mejor momento. Pero la verdad es que, a lo largo de los años y a través de todos los cambios sísmicos en el mundo de TI, tar no ha perdido nada de su poder y valor.
En este artículo, basado en el contenido de mi libro Linux en acción (en inglés), te mostraré los conceptos básicos de la creación, compresión y restauración de archivos tar. Empecemos desde el principio.
Creando archivos
Este ejemplo cogerá todos los archivos y directorios dentro y debajo del directorio de trabajo actual y creará un archivo de almacenamiento que he llamado nombredearchivo.tar.
Aquí uso tres argumentos después del comando tar:
la cle dice a tar que cree un nuevo archivo,
vestablece la salida por pantalla con detalle para recibir actualizaciones, y
fapunta al nombre de archivo que me gustaría darle al archivo.
El *es lo que le indica a tar que incluya todos los archivos y directorios locales de forma recursiva.
$ tar cvf nombredearchivo.tar *
archivo1
archivo2
archivo3
directorio1
directorio1/mascosas
directorio1/mascosas/archivo100
directorio1/mascosas/archivo101
El comando tar nunca moverá ni eliminará ninguno de los directorios y archivos originales que le proporciones, solo hace copias archivadas.
También debes tener en cuenta que el uso de un punto (.) en lugar de un asterisco (*) en el comando anterior incluiría incluso archivos ocultos (cuyos nombres de archivo comienzan con un punto) en el archivo.
Si lo estás haciendo en tu propio ordenador (como deberías), verás un nuevo archivo llamado nombredearchivo.tar. La extensión de nombre de archivo .tar no es necesaria, pero siempre es una buena idea comunicar claramente el propósito de un archivo de tantas formas como sea posible.
Extraer tu archivo para restaurar los archivos es fácil: simplemente usa xvfen lugar de cvf. Eso, en el ejemplo, guardará nuevas copias de los archivos y directorios originales en la ubicación actual.
$ tar xvf nombredearchivo.tar
archivo1
archivo2
archivo3
directorio1
directorio1/mascosas
directorio1/mascosas/archivo100
directorio1/mascosas/archivo101
Por supuesto, también puedes hacer que tar envíe sus archivos extraídos a algún otro lugar usando el argumento -C, seguido de la ubicación de destino:
$ tar xvf nombredearchivo.tar -C /home/misdatos/archivosantiguos/
No siempre querrás incluir todos los archivos dentro de un árbol de directorios en tu archivo.
Supongamos que has producido algunos videos, pero actualmente están guardados en directorios junto con todo tipo de archivos gráficos, de audio y de texto (que contienen tus notas). Los únicos archivos que necesitas respaldar son los clips de video finales con la extensión de nombre de archivo .mp4.
Así es como se hace:
$ tar cvf nombredearchivo.tar *.mp4
Genial. Pero esos archivos de video son enormes. ¿No sería bueno hacer ese archivo un poco más pequeño usando compresión?
¡No digas más! Simplemente, ejecuta el comando anterior con el argumento z (zip). Eso le dirá al programa gzip que comprima el archivo.
Si deseas seguir la convención, también puedes agregar una extensión .gz además de la .tarque ya existe. Recuerda: claridad.
Así es como se haría:
$ tar czvf nombredearchivo.tar.gz *.mp4
Si pruebas esto en tus propios archivos .mp4 y luego ejecutas ls -l en el directorio que contiene los nuevos archivos, puedes notar que el archivo .tar.gz no es mucho más pequeño que el archivo .tar, quizás un 10% más o menos. ¿Por qué?
Bueno, el formato .mp4 del archivo está comprimido, por lo que hay mucho menos margen para que gzip haga su trabajo.
Como tar es plenamente consciente de tu entorno Linux, puedes usarlo para seleccionar archivos y directorios que están fuera de tu directorio de trabajo actual. Este ejemplo agrega todos los archivos .mp4 en el directorio /home/miusuario/Videos/:
$ tar czvf archivename.tar.gz /home/myuser/Videos/*.mp4
Debido a que los archivos de almacenamiento pueden aumentar de tamaño, a veces puede tener sentido dividirlos en varios archivos más pequeños, transferirlos a su nuevo destino y luego volver a crear el archivo original en el otro extremo. La herramienta de división está hecha para este propósito.
En este ejemplo, -b le dice a Linux que divida el archivo nombredearchivo.tar.gz en partes de 1 GB. Luego, la operación nombra cada una de las partes: nombredearchivo.tar.gz.partaa, nombredearchivo.tar.gz.partab, nombredearchivo.tar.gz.partac, etc.:
$ split -b 1G nombredearchivo.tar.gz "nombredearchivo.tar.gz.part"
Por otro lado, vuelve a crear el archivo leyendo cada una de las partes en secuencia (cat nombredearchivo.tar.gz.part*), luego redirige la salida a un nuevo archivo llamado nombredearchivo.tar.gz:
$ cat nombredearchivo.tar.gz.part* > nombredearchivo.tar.gz
Transmisión de archivos del sistema de archivos
Aquí es donde empieza lo bueno. Te mostraré cómo crear una imagen de archivo de una instalación de Linux en funcionamiento y transmitirla a una ubicación de almacenamiento remota, todo con un solo comando. Aquí está el comando:
# tar czvf - --one-file-system / /usr /var \
  --exclude=/home/andy/ | ssh username@10.0.3.141 \
  "cat > /home/username/workstation-backup-Apr-10.tar.gz"
En lugar de tratar de explicar todo eso de inmediato, usaré ejemplos más pequeños para explorarlo pieza por pieza.
Vamos a crear un archivo de los contenidos de un directorio llamado cosasimportantes que está lleno de, bueno, cosas realmente importantes:
$ tar czvf - cosasimportantes/ | ssh usuario@10.0.3.141 "cat > /home/usuario/misarchivos.tar.gz"
cosasimportantes/nombredearchivo1
cosasimportantes/nombredearchivo2
[...]
usuario@10.0.3.141's password:
Déjame explicarte este ejemplo. En lugar de ingresar el nombre del archivo justo después de los argumentos del comando (como lo has hecho hasta ahora), usé un guion (czvf -).
El guion envía datos a la salida estándar. Te permite enviar los detalles del nombre del archivo al final del comando y le dice a tar que espere el contenido de origen del archivo en su lugar.
Luego canaliza (|) el archivo comprimido sin nombre a un inicio de sesión ssh en un servidor remoto donde me pidieron mi contraseña.
El comando que va entre comillas ejecuta cat contra el flujo de datos de archivo, el cual escribió el contenido del flujo en un archivo llamado myfiles.tar.gz en mi directorio de inicio del host remoto.
Una ventaja de generar archivos de esta manera es que evita la sobrecarga de un paso intermedio. No hay necesidad de guardar temporalmente una copia del archivo en la máquina local. Imagina hacer una copia de seguridad de una instalación que ocupa 110 GB de sus 128 GB de espacio disponible. ¿Dónde iría el archivo?
Esto era solo un directorio de archivos. Supongamos que necesitas hacer una copia de seguridad de un sistema operativo Linux activo en una unidad USB para poder moverlo a una máquina separada y colocarlo en la unidad principal de esa máquina.
Partiendo de la base de que ya existe una instalación nueva de la misma versión de Linux en la segunda máquina, la próxima operación de copiar/pegar generará una réplica exacta de la primera.
NOTA: Esto no funcionará en una unidad de destino que aún no tenga instalado un sistema de archivos Linux. Para manejar esa situación, deberá usar dd.
El siguiente ejemplo crea un archivo comprimido en la unidad USB conocido como /dev/sdc1.
El argumento --one-file-system excluye todos los datos de cualquier sistema de archivos, además del actual. Esto significa que las pseudoparticiones como /sys/y /dev/no se agregarán al archivo. Si hay otras particiones que deseas incluir (como lo harás para /usr/y /var/en este ejemplo), deben agregarse explícitamente.
Finalmente, puedes excluir datos del sistema de archivos actual usando el argumento --exclude:
# tar czvf /dev/sdc1/workstation-backup-Apr-10.tar.gz \
  --one-file-system \
  / /usr /var \
  --exclude=/home/usuario/
Ahora volvamos a ese ejemplo de comando de servicio completo. Usando lo que ya aprendiste, archiva todos los directorios importantes de un sistema de archivos y copia el archivo en una unidad USB. Debería tener sentido para ti ahora:
# tar czvf - --one-file-system / /usr /var \
  --exclude=/home/usuario/ | ssh usuario@10.0.3.141 \
  "cat > /home/usuario/workstation-backup-Apr-10.tar.gz"
Hay muchas más bondades de administración en forma de libros, cursos y artículos disponibles en mi bootstrap-it.com. 


 ¿Qué es msmpeng.exe? ¿Por qué consume tanta CPU? 
BlackeyeB — Thu, 20 Apr 2023 18:47:32 +0000
 
        Artículo original: What is msmpeng.exe? Why is it High CPU Disk Usage?
      
Msmpeng.exe es una parte importante de la seguridad de Windows, anteriormente conocida como Windows Defender. Escanea tu computadora en busca de varias amenazas, desde malware hasta spyware, y luego ofrece la(s) solución(es) adecuada(s).
En este artículo, te mostraré qué es mempeng.exe, la razón por la que consume demasiada CPU y 2 formas diferentes de evitar que use tanta CPU.
¿Qué es msmpeng.exe?
Msmpeng.exe significa motor de protección contra malware de Microsoft. También conocido como ejecutable del servicio Antimalware, es el programa antivirus incorporado para ordenadores con Windows 10.
Este programa se ejecuta en segundo plano y escanea tu ordenador en busca de amenazas como software dañino, virus, gusanos, etc., luego los pone en cuarentena o los elimina.
¿Por qué msmpeng.exe consume tanta CPU?
Msmpeng.exe consume demasiados recursos de la CPU porque se ejecuta activamente en segundo plano y mientras tanto escanea cada parte de tu  ordenador. Por supuesto, esto hace que msmpeng.exe sea un programa que consume muchos recursos.
Aparte de eso, otra razón por la que msmpeng.exe usa una gran cantidad de CPU es que el programa escanea su propia carpeta (C:\Program Files\Windows Defender). Los bajos recursos de hardware también se han relacionado con msmpeng.exe que consume demasiados recursos de la CPU.
Cómo evitar que msmpeng.exe use demasiados recursos de la CPU
Hay 2 formas principales de evitar que el ejecutable del servicio Antimalware de Windows 10 use demasiada CPU. En primer lugar, puedes evitar que Windows Defender escanee su propia carpeta y deshabilite la protección en tiempo real y, en segundo lugar, puedes reprogramar los análisis de Windows Defender.
Solución 1: Evita que Windows Defender escanee su propia carpeta
Paso 1: Haz clic en Inicio o presiona la tecla WIN en tu teclado, luego haz clic en el icono de ajustes para abrir la aplicación Configuración.

Paso 2 : Haz clic en "Actualización y seguridad" de la lista.
Paso 3 : Selecciona "Seguridad de Windows" y haz clic en "Protección contra virus y amenazas".
Paso 4 : Se abrirá la aplicación de seguridad de Windows. En "Configuración de antivirus y protección contra amenazas", haz clic en el enlace "Administrar la configuración".
Paso 5 : Desplázate hacia abajo hasta "Exclusiones" y haz clic en el enlace "Agregar o quitar exclusiones".
Paso 6 : En la página siguiente, haz clic en "Agregar exclusión", luego selecciona "Carpeta".
Paso 7 : Para evitar múltiples clics, pega “ C:\Program Files\Windows Defender” en el editor y haz clic en “Seleccionar carpeta”.
Paso 8: Inmediatamente después de hacer clic en "Seleccionar carpeta", aparecerá una ventana de confirmación; asegúrate de hacer clic en Sí.
Ahora puedes ver que la carpeta se ha agregado como una exclusión:
Windows Defender ya no escaneará esta carpeta, por lo que la tasa de uso de la CPU debería disminuir en tu ordenador.
Solución 2: Deshabilita la protección en tiempo real y reprograma los análisis de Windows Defender
Paso 1: Para desactivar la protección en tiempo real y reprogramar los análisis realizados por Windows Defender, presiona WIN(tecla de Windows) para abrir el cuadro de diálogo Ejecutar.
Paso 2: Escribe "taskschd.msc" y haz clic en "Aceptar". Esto abrirá la aplicación Programador de tareas.
Paso 3 : Expande la pestaña "Programador de tareas", luego selecciona "Microsoft" y luego "Windows".
Paso 4 : Desplázate hacia abajo y selecciona "Windows Defender".
Paso 5 : Haz clic derecho en "Windows Defender Scheduled Scan" y selecciona "Propiedades".
Paso 6 : En la pestaña General, desmarca "Ejecutar con los privilegios más altos".
Paso 7 : Ves a la pestaña Condiciones y asegúrate de que todas las casillas estén desmarcadas.
Paso 7 : Por último, ves a la pestaña Desencadenadores y haz clic en "Nuevo".
Paso 8: Finalmente, programa la hora a la que deseas que Windows Defender ejecute los análisis, elige la frecuencia, la fecha y la hora, luego haz clic en "Aceptar". Haz clic en "Aceptar" de nuevo.
Paso 8 : Reinicia tu ordenador. Con esto, msmpeng.exe ya no debería consumir tantos recursos de la CPU.
Conclusión
Msmpeng.exe, también conocido como ejecutable del servicio Antimalware, es un programa relevante y efectivo que protege tu ordenador de amenazas.
Al mismo tiempo, consume demasiados recursos de la CPU, lo que podría ralentizar tu ordenador y reducir la duración de la batería, por lo que podrías tener la tentación de desactivarlo.
Dado que las protecciones que ofrece msmpeng.exe son útiles, debes buscar formas de minimizar sus acciones en lugar de deshabilitarlas permanentemente, así cómo este artículo te mostró cómo de hacerlo.
Si el uso de la CPU no se reduce, puedes intentar deshabilitar Windows Defender de forma permanente, pero asegúrate de obtener otro programa antivirus para tu ordenador si lo haces.
Gracias por leer este artículo. Considera compartirlo con tus amigos y familiares si lo encuentras útil. 


 Arreglo Bash: Cómo declarar un arreglo de cadenas en un script Bash 
BlackeyeB — Mon, 10 Apr 2023 19:21:17 +0000
 
        Artículo original: Bash Array – How to Declare an Array of Strings in a Bash Script
      
Los scripts de Bash te otorgan una forma conveniente de automatizar las tareas de la línea de comandos.
Con Bash, puedes hacer muchas de las cosas que harías en otros lenguajes de secuencias de comandos o programación. Puedes crear y usar variables, ejecutar bucles, usar lógica condicional y almacenar datos en arreglos.
Si bien la funcionalidad puede ser muy familiar, la sintaxis de Bash puede ser complicada. En este artículo, aprenderás cómo declarar arreglos y luego cómo usarlos en tu código.
Cómo declarar un arreglo en Bash
Declarar un arreglo en Bash es fácil, pero presta atención a la sintaxis. Si estás acostumbrado a programar en otros lenguajes, el código puede parecerle familiar, pero hay diferencias sutiles que es fácil que te pasen por alto.
Para declarar tu arreglo, sigue estos pasos:
Dale un nombre a tu arreglo
Seguido a ese nombre de variable pon un signo igual. El signo igual no debe tener espacios a su alrededor.
Encierra el arreglo entre paréntesis (no corchetes como en JavaScript)
Escribe tus cadenas usando comillas, pero sin comas entre ellas
Tu declaración de arreglo se verá así:
miArreglo=("gato" "perro" "ratón" "rana")
¡Eso es todo! Así de simple.
Cómo acceder a un arreglo en Bash
Hay un par de formas diferentes de recorrer tu arreglo. Puedes recorrer los elementos mismos o recorrer los índices.
Cómo hacer un bucle a través de los elementos de un arreglo
Para recorrer los elementos del arreglo, tu código debe verse así:
for str in ${miArreglo[@]}; do
  echo $str
done
Para desglosarlo: Es algo así como usar forEach en JavaScript. Para cada cadena (str) en el arreglo (miArreglo), imprime esa cadena.
La salida de este bucle se ve así:
gato
perro
ratón
rana
Nota: El símbolo @ entre corchetes indica que está recorriendo todos los elementos del arreglo. Si tuvieras que omitir eso y simplemente escribir for str in ${miArray}, solo se imprimiría la primera cadena de caracteres del arreglo.
Cómo hacer un bucle a través de índices del arreglo
Alternativamente, puedes recorrer los índices del arreglo. Esto es como un bucle for  en JavaScript, y es útil cuando deseas poder acceder al índice de cada elemento.
Para usar este método, tu código deberá tener un aspecto similar al siguiente:
for i in ${!miArreglo[@]}; do
  echo "El elemento $i es ${miArreglo[$i]}"
done
La salida se verá así:
El elemento 0 es gato
El elemento 1 es perro
El elemento 2 es ratón
El elemento 3 es rana
Nota: El signo de exclamación al comienzo de la variable miArreglo indica que está accediendo a los índices del arreglo y no a los elementos en sí. Esto puede ser confuso si estás acostumbrado al signo de exclamación que indica negación, así que presta mucha atención a eso.
Otra nota: Bash normalmente no requiere llaves para las variables, pero sí para los arreglos. Entonces verás que cuando hace referencia a un arreglo, lo hace con la sintaxis ${miArreglo}, pero cuando hace referencia a una cadena o número, simplemente usa un signo de dólar: $i.
Conclusión
Los scripts de Bash son útiles para crear un comportamiento de línea de comandos automatizado, y los arreglos son una gran herramienta que puedes usar para almacenar múltiples datos.
Declararlos y usarlos no es difícil, pero es diferente a otros lenguajes, así que presta mucha atención para no cometer errores. 


 Diseño web adaptativo: cómo hacer que un sitio web se vea bien en teléfonos y tabletas 
BlackeyeB — Tue, 04 Apr 2023 01:58:58 +0000
 
        Artículo original: Responsive Web Design – How to Make a Website Look Good on Phones and Tablets
      
En el panorama de los dispositivos conectados evolucionando rápidamente, el diseño web adaptativo (adaptable a cualquier dispositivo) sigue siendo crucial en el desarrollo web.
No hace mucho tiempo, el término "diseño web adaptativo" no existía. Pero hoy, la mayoría de nosotros hemos tenido que adoptarlo hasta cierto punto.
 Según (las estadísticas) Statistica, a partir de 2019, el 61% de todas las visitas de búsqueda de Google se realizan en un dispositivo móvil. En septiembre de 2020, Google cambiará su algoritmo de búsqueda para priorizar los sitios web compatibles con dispositivos móviles.
En esta publicación cubriré lo siguiente:
¿Qué es el diseño web adaptativo? 
La metaetiqueta viewport y lo que hace 
Técnicas efectivas utilizadas en el diseño web responsive para adaptarse a dispositivos móviles y tabletas 
Herramientas para ayudar a simular y monitorizar la experiencia del usuario de dispositivos móviles y tabletas
¿Qué es el diseño web adaptativo? (RWD)
El diseño web adaptativo se enfoca en el entorno del usuario de un sitio web. El entorno del usuario dependerá de qué dispositivo tenga conectado a Internet.
Hay muchas características de los dispositivos que proporcionan oportunidades para un enfoque centrado en el usuario. Algunas de estas incluyen:
conexión de red 
tamaño de pantalla 
tipo de interacción (pantallas táctiles, almohadillas táctiles) 
resolución de pantalla.
Antes de que el diseño web adaptativo fuera popular, muchas empresas administraban un sitio web completamente separado que recibía el tráfico reenviado en función del agente de usuario.
Pero en el diseño web adaptativo, el servidor siempre envía el mismo código HTML a todos los dispositivos, y se usa CSS para alterar la representación de la página en el dispositivo.
Independientemente de las dos estrategias anteriores, el primer paso para crear un sitio web para teléfono o tableta es asegurarse de que el navegador conozca la intención. Aquí es donde entra en juego la metaetiqueta viewport.
La metaetiqueta Viewport para identificar un sitio web móvil
La metaetiqueta viewport le indica al navegador cómo ajustar la página al ancho de cada dispositivo.
Cuando el elemento meta viewport está ausente, los navegadores móviles mostrarán páginas web con la configuración de escritorio predeterminada. Esto da como resultado una experiencia aparentemente alejada y no adaptativo.
A continuación se muestra una implementación estándar:
Ejemplo de metaetiqueta de viewport
Ahora que el navegador sabe lo que sucede, ¿Podemos utilizar técnicas populares para hacer nuestro sitio web adaptativo?
Consultas @media CSS para diferentes tamaños y orientaciones de pantalla
Si eres nuevo en el diseño web adaptativo, las consultas @media son la primera y más importante característica de CSS que debes aprender. Las consultas @media te permiten diseñar elementos según el ancho de la ventana gráfica. Una estrategia popular de CSS es escribir estilos móviles primero y construir sobre ellos con estilos más complejos y específicos de escritorio.
Las consultas @media son una parte importante del diseño web adaptativo que se usa comúnmente para diseños de cuadrícula, tamaños de fuente, márgenes y relleno que difieren entre el tamaño y la orientación de la pantalla.
A continuación, se muestra un ejemplo de un caso de uso común de estilo móvil primero en el que una columna tiene un ancho del 100 % para dispositivos más pequeños, pero en viewports más grandes es del 50 %.
.column {
  width: 100%;
}

@media (min-width: 600px) {
  .column {
    width: 50%;
  }
}
Primer ejemplo de CSS móvil
El código anterior es un ejemplo simple, pero lo que realmente está haciendo es bastante interesante.
Al considerar el móvil primero, el elemento "columna" se configura para tener un ancho del 100%; 
Al usar una consulta @media de min-width, definimos reglas específicamente para viewports con un ancho mínimo de 600px (ventanas de visualización más anchas que 600px). Por lo tanto, para viewports de más de 600px, nuestro elemento de columna tendrá un ancho del 50 % de su elemento principal.
Si bien las consultas @media son esenciales para el diseño web adaptativo, muchas otras características nuevas de CSS también se están adoptando ampliamente y son compatibles con los navegadores. Flexbox es una de estas nuevas e importantes características de CSS en términos de diseño web responsive.
¿Qué es FlexBox?
Quizás te estés preguntando: "¿Qué hace Flexbox?" La mejor pregunta es: "¿Qué no puede hacer Flexbox?" ¿Cuál es la forma más fácil de centrar verticalmente con CSS? FlexBox. ¿Cómo se crea una grid layout adaptativo? Flexbox. ¿Cómo podemos lograr la paz mundial? Flexbox.
El módulo Flexbox Layout (Flexible Box) proporciona una forma más eficiente de diseñar, alinear y distribuir el espacio entre los elementos de un contenedor, incluso cuando su tamaño es dinámico (de ahí la palabra "flex").
En el siguiente ejemplo, combinamos consultas @media como se explicó anteriormente para crear una cuadrícula adaptativo.


  
  
  
Ejemplo de CSS flexbox
Logramos lo siguiente con este código:
Establecer un diseño de flexbox con display: flex en nuestro elemento contenedor main.
Estilo para móvil primero. Configuramos el elemento main a flex-wrap: wrap lo que permite que los elementos secundarios se envuelvan dentro de nuestro diseño de caja flexible (flexbox layout) como se ilustra a continuación en la figura 1. Establecemos  flex-basis: 100% en nuestros elementos div para garantizar que abarquen el 100% del ancho principal en el diseño de flexbox (figura 1).
Estilo para dispositivos más grandes como tabletas y ordenadores de escritorio. Utilizamos una consulta @media similar a nuestro ejemplo de la sección anterior para configurar nuestro elemento main del contenedor a flex-wrap: nowrap. Esto asegura que los elementos secundarios no se ajusten y que mantengan una columna dentro de un tipo de diseño de fila. 
Al establecer div en  flex-basis: 33% dentro de la consulta @media, establecemos columnas que tienen un 33% del ancho del padre (parent).
En este ejemplo, la magia aparecería en dispositivos más grandes con nuestras reglas combinadas de consultas @media y flexbox. porque definimos display: flex , y debido a que no anulamos la regla dentro de la consulta @media, tenemos un diseño flexible para dispositivos móviles, tabletas y computadoras de escritorio. La consulta @media flex-basis: 33% y las reglas heredadas de display: flex nos darán un diseño de caja flexible reconocible como se ve en la figura 2. En el pasado, para lograr este tipo de diseño de columna, tendríamos que hacer un trabajo arduo y escribir enredos de CSS.
Figura 1: Ejemplo de cuadrícula de flexbox móvil
Figura 2: Ejemplo de cuadrícula Flexbox de escritorio
Flexbox proporciona una excelente manera de lograr diseños variados y fluidos. En algunos casos, es posible que no tengamos esa libertad en el espacio vertical. Es posible que necesitemos encajar un elemento dentro de una altura fija. En esta situación, tenemos otra técnica a nuestra disposición: el desplazamiento horizontal.
Desplazamiento horizontal con desplazamiento de desbordamiento
Puede llegar un momento en que tenga contenido que desborde la ventana gráfica (viewport) sin una forma elegante de manejarlo. He aquí... ¿Overflow scroll al rescate?
Los usos comunes de esta técnica incluyen tablas y menús desplazables. 
A continuación se muestra un ejemplo de un menú desplazable. 


  Responsive Web Design
  RWD
  Responsive menu
  Overflow scroll example
  This is a lot of content!
  Yes
  we
  have
  another
  item
Ejemplo de menú de desplazamiento horizontal
¿¡Cómo hiciste eso!? Hagamos una inmersión más profunda.
overflow-y: scroll es el ingrediente clave de esta receta. Al especificarlo, los elementos hijos desbordarán el eje horizontal con un comportamiento de desplazamiento.
¡No tan rapido! Aunque puedas pensar que overflow-y sería suficiente, también tenemos que decirle al navegador que no envuelva los elementos hijos con white-space: nowrap
Ahora que tenemos algunas técnicas de diseño RWD bajo la manga, echemos un vistazo a los elementos que plantean desafíos específicos a su naturaleza visual: imágenes y video.
Imágenes adaptativas
Mediante el uso de atributos de etiquetas de imágenes, podemos acomodar una variedad de dispositivos y resoluciones. A continuación se muestra un ejemplo de una imagen adaptativa.



  
  
  
Esto está haciendo muchas cosas. Vamos a desglosarlo:
Configurando max-width: 100% la imagen se escalará hacia arriba o hacia abajo según el ancho de su contenedor.
Mediante el uso de una combinación de las etiquetas picture, source, e img en realidad, solo representamos una imagen y solo cargamos la imagen que mejor se ajusta según el dispositivo del usuario.
WebP es un formato de imagen moderno que proporciona una compresión superior para imágenes en la web. Utilizando source podemos hacer referencia a una imagen WebP para usarla en navegadores que la admitan, y otra etiqueta source para hacer referencia a una versión PNG de las imágenes que no son compatibles con WebP.
srcset se usa para decirle al navegador qué imagen usar según la resolución del dispositivo.
Establecemos la carga diferida nativa utilizando el par atributo/valor loading="lazy".
Vídeo adaptativo
El video adaptativo es otro tema que ha inspirado una gran cantidad de artículos y documentación.
Una estrategia clave para establecer imágenes, videos, iframes y otros elementos adaptativos implica el uso de la relación de aspecto. El cuadro de relación de aspecto no es una técnica nueva y es una herramienta bastante útil para tener bajo la manga como desarrollador web.
Este artículo proporciona una demostración sólida sobre cómo lograr videos de ancho "fluido". Echemos un vistazo al código y lo desglosamos.



  
  
En este ejemplo, tenemos un video de YouTube incrustado como un iframe y un contenedor div con la clase videoWrapper. Este código está haciendo mucho... profundicemos.
position: relative en el elemento contenedor permite que los elementos hijos utilicen el posicionamiento absoluto en relación con él.
height: 0 combinado con padding-bottom: 56.25% es el ingrediente clave aquí que establece un comportamiento dinámico, imponiendo una relación de aspecto de 16:9.
position: absolute, top: 0 y left: 0 establecido en el iframe crea un comportamiento en el que el elemento se posiciona absolutamente en relación con su raíz (parent)... pegándolo en la parte superior izquierda.
Y finalmente, el ancho y la altura del 100% hacen que el elemento secundario, iframe sea el 100% de su raíz. La raíz, .videoWrapper toma el control total de establecer este diseño de relación de aspecto.
Lo sé... es mucho. Podemos hacer más para que los videos y las imágenes se vean mejor en teléfonos y tabletas. Fomentaría la investigación sobre esos temas de forma independiente además de esto.
Bien, ahora que somos expertos en diseño web adaptativo, ¿cómo podemos probar lo que hemos hecho? Afortunadamente, tenemos varias herramientas para simular y monitorizar la experiencia del usuario en una variedad de dispositivos.
Herramientas para simular y monitorizar sitios web adaptativos
Hay una variedad de herramientas útiles para ayudarnos a crear sitios web con un diseño web adaptativo. A continuación hay un par que me parecen especialmente útiles.
Emulación móvil de Chrome DevTools
Chrome's DevTools proporciona emulación móvil de una variedad de tabletas y dispositivos móviles. También proporciona una opción  "adaptativo" que te permite definir un tamaño de ventana (viewport) de visualización personalizado.
Figura 3: Emulación de dispositivos móviles y tabletas con Chrome DevTools
Monitorización del rendimiento del sitio web móvil con Foo
Lighthouse es una herramienta de código abierto que proporciona una forma de analizar el rendimiento del sitio web específico para un dispositivo.
Foo usa Lighthouse en segundo plano para monitorizar el rendimiento del sitio web y proporciona comentarios para el análisis. Puedes configura la monitorización para dispositivos móviles y de escritorio para obtener comentarios continuos sobre la capacidad de respuesta de tu sitio web.
Por ejemplo, un informe de Lighthouse destacará las imágenes que se cargaron incorrectamente según el dispositivo.
Figura 4: Informe Lighthouse con emulación de dispositivo móvil
Conclusión
El diseño web adaptativo continuará evolucionando rápidamente, pero si nos mantenemos al tanto de las tendencias actuales, podemos brindar la mejor experiencia a nuestros usuarios. ¡Espero que estas herramientas y técnicas sean útiles!
Los usuarios de nuestro sitio web no solo se beneficiarán de un diseño versátil, sino que también los motores de búsqueda clasificarán nuestras páginas web más alto. 


 Visual Studio Code Live Server no funciona 
BlackeyeB — Mon, 03 Apr 2023 19:30:44 +0000
 
        Artículo original: Visual Studio Code Live Server Not Working
      
VSCode tiene muchas extensiones excelentes y Live Server es una de las mejores.
Con solo unos pocos clics, Live Server te permite ver tu página en vivo en un navegador real. Mejor aún, cuenta con recarga en vivo, por lo que si actualizas tu código, los cambios también se reflejan en el navegador.
Todo lo que tienes que hacer es hacer clic con el botón derecho en el archivo HTML que deseas ver, botón derecho y luego seleccionar "Abrir con Live Server":
Pero, ¿qué sucede si el Live Server no abre tu navegador y no muestra tu página como esperabas? Si esto te sucede, aquí hay algunas cosas que puedes probar.
Reiniciar VSCCode
A veces, lo mejor que puedes hacer es iniciar VSCode desde cero.
Primero, guarda todo tu trabajo. Luego cierra VSCode, que también detendrá todas las extensiones que hayas instalado.
Luego, vuelve a abrir VSCode e intenta nuevamente: Ves al archivo HTML que deseas ver, haz clic con el botón derecho y selecciona "Abrir con Live Server".
Configurar el navegador para Live Server
Es posible que la extensión esté funcionando, pero que tu sistema no tenga un navegador predeterminado.
Incluso si configuraste el navegador predeterminado para tu sistema, no estaría de más que Live Server supiera qué navegador te gustaría usar explícitamente.
Primero, abre la paleta de comandos con F1, luego escribe Preferences: Open Settings (JSON) y seleccione esa opción.
Esto abrirá tu archivo settings.json.
Desplázate hasta el final del archivo, agrega una coma después de la última configuración y luego pega lo siguiente "liveServer.settings.CustomBrowser": "chrome":
Ten en cuenta que también puedes utilizar "firefox", "safari", o cualquier otro navegador como valor para la configuración de "liveServer.settings.CustomBrowser".
Finalmente, guarda el archivo settings.json e intenta ejecutar Live Server otra vez.
Configura el navegador predeterminado para tu sistema operativo
Incluso después de decirle a Live Server qué navegador deseas usar, es posible que todavía no abra tu página en ese navegador correctamente.
Lo siguiente que debes intentar es configurar el navegador predeterminado para tu propio sistema operativo.
El método exacto para hacer esto puede variar según tu sistema operativo, por lo que es mejor buscar cómo hacerlo si no estás seguro.
Así es como se ve la página de configuración en Windows:
Credit: Advitya-sharma
Ve a la página en vivo tú mismo
Si por alguna razón Live Server todavía no abre la página en tu navegador automáticamente, no te preocupes. Siempre puedes abrir el navegador de tu elección y ver la página directamente.
Simplemente, abre tu navegador preferido y ve a  http://127.0.0.1:5500/. 
Por ejemplo, si tu archivo se llama index.html, ves a http://127.0.0.1:5500/index.html. 
Mientras Live Server se esté ejecutando, deberías ver tu página.
Para concluir
Esas son algunas soluciones comunes que puedes probar si Live Server no funciona de la manera esperada.
Feliz programación y disfruta de la codificación (en directo). 


 Color de fuente CSS - Cómo aplicar estilo al texto en HTML 
BlackeyeB — Mon, 27 Mar 2023 18:36:52 +0000
 
        Artículo original: CSS Font Color – How to Style Text in HTML
      
Establecer el color del texto en un sitio web que estás creando puede resultar confuso al principio. Pero en este artículo, aprenderás cómo hacerlo.
Cómo establecer el color del texto en HTML
En CSS, la propiedad background-color es bastante sencilla para establecer el color de fondo de cualquier cosa.
Entonces, ¿Qué sucede si deseas establecer el color de primer plano de algo en la página? Especialmente el texto, para el que en condiciones normales no querrías establecer un color de fondo.
No hay una propiedad de foreground-color en CSS, por lo que hace que esto sea posible es la propiedad color.
En este artículo, te guiaré a través de cómo configurar el color del texto usando la propiedad color. También veremos las diversas formas en que toma valores.
La propiedad color toma valores de 4 maneras diferentes: Color con nombre, color hexadecimal, color RGB y color HSL. Veamos cada uno ahora.
Colores con nombre
Como su nombre indica, ingresa la propiedad color y aplica el valor nombrando el color deseado. Puede ser rojo, verde, azul, naranja, carmesí, cian o cualquier otro color con nombre. Hay alrededor de 147 colores con nombre reconocidos por los navegadores.
La sintaxis básica se ve así:
element {
    color: nombreColor
}
freeCodeCamp
 p {
     color: crimson;
}
Colores hexadecimales (O sólo colores Hex)
Los valores hexadecimales se utilizan para representar colores con un total de 6 caracteres. Comienzan con el signo almohadilla/número (#), luego cualquier número del 0 al 9 y finalmente cualquier letra de la A a la F.
Los 2 primeros valores representan el rojo, los dos siguientes representan el verde y los 2 últimos representan el azul. Con valores hexadecimales, no hay límite para los tonos de colores que puedes usar.
freeCodeCamp
 p {
    color: #dc143c;
 }
Colores RGB
RGB significa rojo, verde y azul. Con RGB, especificas el color en términos de la cantidad de rojo, verde y azul deseados. Los tres se expresan con números entre 0 y 255.
Hay un tipo de RGB llamado rgba. La 'a' adicional significa alfa, lo que permite especificar la opacidad del color. Toma un valor de 0,0 a 1,0: 0,0 significa 0 % de opacidad, 0,5 significa 50 % de opacidad y 1,0 significa 100 % de opacidad.
La sintaxis básica es rgba(cantidadDeRojo, cantidadDeVerde, cantidadDeAzul, alfa). 
Puedes limitarlo a rgba(cantidadDeRojo, cantidadDeVerde, cantidadDeAzul) si no deseas un valor alfa.
Aquí está la sintaxis de los valores RGB regulares:
freeCodeCamp
 p {
   color: rgb(220, 20, 60);
 }
Y aquí está demostrando el valor alfa en acción con un 50 % (0,5) de opacidad:
p {
    color: rgb(219, 20, 60, 0.5);
}
Colores HSL
HSL significa tono, saturación y luminosidad. Es otra forma de especificar el color del texto (y cualquier otra cosa que tome color) en CSS.
Hue representa la rueda de color en 360°. Entonces, 0° es rojo, 120° es verde y 240° es azul. 
La saturación es la cantidad de gris en el color, expresada como un porcentaje. 0% es el tono de gris y 100% es el color en sí. 
La luminosidad es la cantidad de oscuridad y luminosidad en el color expresada como porcentaje. 0% es negro y 100% es blanco.
Al igual que con los colores RGB, también puedes establecer la opacidad del color. Entonces, también está hsla.
La sintaxis básica completa es hsl(GradoColor, PorcentajeSaturación, PorcentajeLuminosidad, alfa). Puedes limitarlo a hsl(GradoColor, PorcentajeSaturación, PorcentajeLuminosidad) en caso de que no desees un valor alfa.
freeCodeCamp
 p {
   color: hsl(348, 83%, 47%);
 }
Puedes aplicar una opacidad particular al color hsl como este:
 p {
   color: hsla(348, 83%, 47%, 0.5);
  }
¿Debes utilizar colores con nombre, colores hexadecimales, colores RGB o colores HSL para asignar colores?
Una de las cosas maravillosas de CSS es que hay múltiples formas de hacer lo mismo. Has visto esto al aplicar colores al texto.
Dado que puedes aplicar colores de 4 maneras diferentes, debes preguntarte cuál es la mejor para usar.
Cuando usas colores con nombre, estás un poco limitado en cuanto a cuán lejos puedes llegar al aplicar diferentes tonos de colores. El rojo, el verde, el azul, el amarillo o cualquier otro color con nombre tiene muchas variaciones a las que no tendrás acceso con los colores con nombre. Solo tendrás acceso a alrededor de 147 colores predefinidos reconocidos por los navegadores.
Los colores hexadecimales son muy dinámicos. Son los más utilizados entre los desarrolladores porque el límite es tu creatividad. Con los colores hexadecimales, puedes usar varios tonos e incluso usar un color que nadie haya usado nunca.
Los colores RGB son tan dinámicos como los colores hexadecimales. Además de poder especificar cuánto rojo, verde y azul deseas de 0 a 255, también puedes establecer qué tan transparente deseas que sea el color con el valor alfa adicional.
HSL es el más dinámico de todos. Puedes especificar el color exacto que deseas en grados de 0 a 360 dentro de la rueda de colores, establecer qué tan saturado y oscuro deseas que sea en porcentajes, y también establecer una opacidad de 0.0 a 1.0.
Realmente, depende de ti, del uso que le quieras dar y de cuán creativo o específico quieras ser.
Conclusión
La aplicación de colores al texto ayuda a que tu sitio web sea más atractivo para los visitantes. La combinación de colores correcta también puede ayudarte a que el contenido sea más legible.
En este artículo, has aprendido cómo aplicar colores al texto con los 4 tipos diferentes de valores que puedes usar con la propiedad de color.
Gracias por leer, y sigue programando. 


 Lista HTML: Cómo usar viñetas, listas ordenadas y desordenadas 
BlackeyeB — Sat, 25 Mar 2023 00:56:53 +0000
 
        Artículo original: HTML List – How to Use Bullet Points, Ordered, and Unordered Lists
      
Enumerar elementos en una página web es una tarea común que deberás realizar como desarrollador web. Es posible que debas enumerar los artículos del carrito de compras, el orden de los estudiantes según sus calificaciones, los perros con los ladridos más fuertes, etc.
Por lo tanto, debes conocer las diferentes formas en que puedes enumerar elementos usando HTML. Si bien puedes pensar que es algo trivial de aprender, es importante. Y es una de las características más utilizadas de HTML en el desarrollo web.
En este artículo, aprenderás todo acerca de los elementos de listas HTML, sus propiedades, estilos y cómo usarlos para crear listas ordenadas. Espero que te sea útil.
Cómo hacer listas en HTML
En HTML, podemos enumerar elementos en forma ordenada o desordenada.
Una lista ordenada utiliza números o algún tipo de notación que indica una serie de elementos.
Por ejemplo, una lista ordenada puede comenzar con el número 1 y continuar por el 2, 3, 4, etc. Tu lista ordenada también puede comenzar con la letra A y pasar por B, C, D, etc.
Aquí hay un ejemplo de una lista ordenada con los nombres y calificaciones de los estudiantes.
lista ordenada de alumnos
Por otro lado, tenemos listas desordenadas, como una lista de tareas, por ejemplo. Soy tan apasionado por la programación que me salté el desayuno ?.
Lista de tareas desordenada
Hay un tipo más de lista llamada lista de descripción  que también aprenderemos a continuación.
Ahora entremos un poco más en detalle y veamos cómo crear cada tipo de lista en HTML.
Cómo hacer una lista ordenada con HTML
En HTML, podemos crear una lista ordenada usando la etiqueta  
. La etiqueta ol representa una lista ordenada. Dentro de cada uno de los elementos de la lista ordenada  y , tenemos que definir los elementos de la lista. Podemos definir los elementos de la lista usando la etiqueta .
Aquí está la estructura HTML completa para una lista ordenada:

  Eat
  Code
  Sleep
El resultado de la lista ordenada anterior es:
Entonces, tenemos la lista de elementos ordenados con un número que comienza con 1 y se incrementa a 2 y 3. Pruebe este CodePen y vea si puede cambiar y jugar usando ol-li.
ordered list of items
Tipos de listas ordenadas en HTML
¿Qué pasa si no quieres ordenar tu lista por número? En su lugar, deseas ordenar usando el alfabeto como A, B, C o a, b, c. Puedes hacerlo especificando el valor del atributo type de la etiqueta 
.
Puedes ordenar la lista usando las letras A, B, C pasando A como valor de type(tipo).

  Eat
  Code
  Sleep
La salida se ve así:
De manera similar, puedes usar letras minúsculas como a para el valor del tipo y así enumerar los elementos con a, b, c, etc.

  Eat
  Code
  Sleep
Aquí está la salida:
Si desea utilizar números romanos, utilice el valor I para una lista ordenada con números romanos:

  Eat
  Code
  Sleep
La salida se ve así:
Consulte el CodePen a continuación para probar otros tipos:
Tipos de listas ordenadas
Cómo usar el atributo start en listas HTML
El elemento 
 tiene un atributo interesante llamado start. Puedes especificar un valor del atributo de inicio ("start") para iniciar la lista ordenada desde un número específico.
Digamos que deseas comenzar la lista con el número 30 en lugar de 1. Puedes especificar el número 30 como el valor del atributo start de esta manera:

  Thirty
  Thirty One
  Thirty Two
La salida se ve así:
Siéntete libre de jugar con el atributo start usando este CodePen:
start attribute
Por cierto, he compartido los mismos consejos en Twitter recientemente. También puedes encontrar una discusión interesante allí:
Cómo hacer una lista desordenada en HTML
Pasemos ahora a las listas desordenadas. Usamos la etiqueta 
 para crear una lista desordenada. Como de costumbre, necesitamos usar las etiquetas  dentro de  y  para crear los elementos de la lista.
Los elementos de la lista (li) dentro de la lista desordenada (ul) vienen con el estilo predeterminado de viñetas, por lo que cada uno de los elementos de la lista está precedido por un punto negro.
Vamos a crear una lista de mis recursos en línea favoritos para aprender sobre programación web:
My Favorite Web Development Learning Sites


  
    freeCodeCamp
    CSS-Tricks
    Traversy Media
  
La salida se ve así:
Mis sitios favoritos de aprendizaje sobre desarrollo web
Puedes ver las viñetas de cada uno de los elementos de la lista anterior y puedes personalizarlos. Eso también lo aprenderemos.
Pero antes de eso, siéntete libre de usar este CodePen para cambiar y ejecutar el código.
viñetas
Cómo usar viñetas con enlaces en listas HTML
Podemos usar los enlaces (etiqueta de anclaje ) en los elementos de la lista (etiqueta 
) para vincular cada uno de los elementos a cualquier página web interna o externa.
Aquí hay un ejemplo que te muestra cómo vincular cada uno de los recursos de programación web a sus respectivos sitios web:My Favorite Web Development Learning Sites


  
    
      freeCodeCamp
    
    
      CSS-Tricks
    
    
      Traversy Media
    
  
La salida se ve así:
Mis sitios favoritos de aprendizaje sobre desarrollo web
Puedes usar CodePen a continuación para probar lo mismo. Siéntete libre de modificarlo como desees:
bullet points with links viñetas con enlaces
Tipos de listas desordenadas en HTML
Como discutimos brevemente, podemos personalizar el estilo de viñetas de una lista desordenada, que veremos en acción ahora. Podemos hacer esto usando la propiedad de estilo CSS llamada list-style.
Hay cuatro valores principales de la propiedad list-style que nos ayudan con esta personalización:
LIST-STYLE EFECTO
none No aparecerá ninguna viñeta delante del elemento de la lista
circle Aparece una viñeta circular (hueca) delante del elemento de la lista
disc Esta es la viñeta circular rellena predeterminada
square Aparece una viñeta cuadrada rellena delante del elemento de la lista
unordered list styles estilos de lista desordenada
Puede usar el CodePen anterior para probar diferentes opciones de list-style.
¿Sabías que también hay una lista con descripciones?
Hay un tipo más de lista HTML, pero no se usa con tanta frecuencia. Se llama Description List.
Podemos definir una lista de descripciones utilizando el elemento de etiqueta 
. Dentro de ..
 necesitamos definir un término de descripción usando la etiqueta . El término suele ser un pequeño texto sobre algo. Luego, podemos definir el descriptor de descripción para describir más el término usando la etiqueta 
.
¿Demasiado para digerir? Veamos cómo funciona con un ejemplo de código.
Supongamos que queremos describir información sobre programación, chismes y dormir en nuestra página web. Primero podemos definir una etiqueta
. Ahora definimos tres pares de etiquetas  y 
 para describir la codificación, el chisme y el sueño, respectivamente.

  Coding
    
  An activity to keep you happy, even in sleep.
      
  Gossiping
      
  Can't live without it.
      
  Sleeping
      
  My all time favorite.
      
La salida se ve así:
Prueba este CodePen para experimentar más con las listas con descripción:
description list lista de descripciones
Te estarás preguntando, ¿por qué no usamos mucho este tipo de lista? Bueno, puedes crear esta estructura utilizando la lista desordenada (ul), elementos de lista (li) y los estilos CSS.
Pero si consideras la semántica de HTML, debes dar un lugar a las listas de descripción en tu código cuando tengas un buen caso de uso para ello.
Cómo crear un encabezado de página con elementos de lista HTML
Estamos casi al final de este tutorial. Pero siento que está incompleto sin al menos un ejemplo de caso de uso de las listas y etiquetas HTML. Mi favorito es enumerar los elementos en el encabezado de una página web.
Vamos a crear un encabezado muy básico con un logotipo de muestra y tres enlaces:Home, Products, y About Us. Primero crearemos la estructura HTML así:

  Logo
  
  
    Home
    Products
    About Us
    
Aquí hemos tomado una lista desordenada con tres elementos de lista para definir los enlaces Inicio, Productos y Acerca de nosotros. También notarás un elemento de intervalo con el logotipo de texto que indica que es un logotipo. Podemos usar una imagen adecuada allí, según nuestras necesidades más adelante.
Hasta ahora, el encabezado debería verse así:
Bueno, esto no es lo que queremos. Entonces, a continuación, escribiremos algunas reglas y propiedades de CSS para que se vea como un encabezado de página (al menos algo más parecido).
nav{
  background-color: #273032;
  color: #FFF;
  padding: 10px;
  display: flex;
}

.logo {
  background-color: blue
}

ul {
  margin: 0px;
}

li {
  list-style: none;
  display: inline;
  margin-right: 0.2rem;
}

a {
  color: pink;
}
Ahora mucho mejor y se parece más a un encabezado de página de verdad.
Nuevamente, puedes usar este CodePen para cambiar y probar cosas con el encabezado.
header
Antes de terminar...
Eso es todo por ahora. Espero que este artículo te haya resultado útil y que te ayude a comprender las listas HTML con mayor claridad. Puedes encontrar todos los ejemplos juntos en esta CodePen Collection.
Conectémonos. Me encontrarás activo en Twitter (@tapasadhikary). Siéntete libre de seguirme. También comencé a compartir conocimientos a través de mi Canal de YouTube, por lo que también puedes consultarlo.

LIST-STYLE	EFECTO
none	No aparecerá ninguna viñeta delante del elemento de la lista
circle	Aparece una viñeta circular (hueca) delante del elemento de la lista
disc	Esta es la viñeta circular rellena predeterminada
square	Aparece una viñeta cuadrada rellena delante del elemento de la lista