miércoles, 29 de septiembre de 2021

Convenciones de escritura de código

Sangría y espacio en blanco

Utilizar un espaciado cuádruple, sin tabulación.

Las líneas no deben tener espacios en blanco detrás al final.

Los archivos deben tener el formato n como el final de línea (finales de línea Unix), no r n (terminaciones de Windows de línea).


Operadores

Todos los operadores binarios (operadores que se encuentran entre dos valores), como +, -, =,>! =, ==, , etc deben tener un espacio antes y después de que el operador, para mejorar la legibilidad.


Casting

Poner un espacio entre el (tipo) y la variable $ en un molde: (int) $myNumber .


Estructuras de control

Estructuras de control, que incluyen if, for, while, switch, etc Este es un ejemplo if, ya que es el más complicado de ellos:

if (condition1 | | condition2) {
     Acción 1;
}
elseif (Condition3 && condition4) {
     Acción 2;
}
else {
     DefaultAction;
}

Las sentencias de control debe tener un espacio entre la palabra clave de control y su paréntesis de apertura, para distinguirlas de las llamadas a funciones.

Se recomienda utilizar siempre llaves, incluso en situaciones en las que técnicamente son opcionales. Aumenta la legibilidad y disminuye la probabilidad de errores lógicos que se presentan cuando se añaden líneas nuevas.

Para declaraciones:

switch (estado) {
    case 1:
         Acción 1;
         break;
    case 2:
        Acción 2;
        break;
    default:
        DefaultAction;
}

Para las declaraciones do-while:

do {
    acciones;
} While ($estado);


Llamadas a funciones

Las funciones se deben llamar sin espacios entre el nombre de la función, el paréntesis de apertura, y el primer parámetro.

Espacios entre las comas y cada parámetro.

Ningún espacio entre el último parámetro, el paréntesis de cierre, y el punto y coma.

He aquí un ejemplo:

$var = foo ($bar, $baz, $quux);

Como se muestra más arriba, debe haber un espacio a cada lado de un signo igual se utiliza para asignar el valor devuelto de una función a una variable. En el caso de un bloque de tareas relacionadas, más espacio se pueden insertar para promover la lectura:

$sort          = foo ($bar);
$long_variable = foo ($baz);


Declaracion de funciones

Clases

Cuando se llama a los constructores de clase sin argumentos, siempre incluyen entre paréntesis:

$foo = new myClassName ();

Esto es para mantener la coherencia con los constructores que tienen argumentos:

$foo = new myClassName ($arg1, $arg2);

Tened en cuenta que si el nombre de la clase es una variable, la variable se evalúa en primer lugar para obtener el nombre de la clase, a continuación, el constructor se llamará. Utilizad la misma sintaxis:

$bar = 'myClassName';
$foo = new $bar ();
$foo = new $bar ($arg1, $arg2);

Matrices

Las matrices deben tener el formato con un espacio que separa cada elemento (después de la coma), y los espacios alrededor del operador => asociación clave, si procede:

$some_array = array ('hola', 'mundo', 'nombre' => 'bar');

Tenga en cuenta que si la línea se declara una matriz se extiende por más de 80 caracteres (a menudo el caso con las declaraciones de la forma y el menú), cada elemento debe ser dividido en su propia línea, y un nivel de sangría:

$ Form ['title'] = array (
'Tipo # ' => 'campo de texto',
'Título de # ' => t (' Título '),
'# Size' => 60,
'# MaxLength' => 128,
'Descripción # ' => t (' El título de tu nodo. ')
);


Acotaciones y comentarios

Las funciones, métodos, clases y atributos deben estar comentados siguiendo el modelo phpDoc.
Los comentarios de linea deber realizarse utilizando la doble barra.

//Comentario de una línea

Llegado el momento de implementar una función o método que es bastante profundo (usa otros métodos y estos a otros que aún no están implementados) podemos hacer una implementación rápida de las funciones no implementadas agregado un retorno por defecto y el comentario TODO con el texto de qué debe de hacer esa función.

También se usan en caso de que implementando un código, nos damos cuenta de que no es todo lo eficiente que debería, pero no tenemos tiempo para dedicar a esa parte del código. En ese caso, podemos agregar un FIXME o TODO, depende si puede convertirse en problema o no.

En caso de que haya un caso (aunque remoto) en el que el código falla, pero no conseguimos encontrar exactamente el problema, o el problema es complejo de resolver, podemos indicarlo en la zona que creemos que se produce a través de FIXME.

Revisando nuestro código podemos refactorizar varias partes de nuestro código pero sin embargo, si el cambio es muy grande, dejamos envolturas (wrappers) que nos permiten no tener que cambiarlo todo, manteniendo una interfaz entre unas llamadas a funciones con sus parámetros de entrada y salida. Esto podemos marcarlo como DEPRECATED indicando que este uso concreto debe de modificarse en el futuro.


Includes

En cualquier lugar donde se esté incluyendo un archivo de clase tendremos que incluir require_once () . En cualquier lugar donde se esté incluyendo un archivo de clase (por ejemplo, los métodos Factory), habrá que usar include_once () . Cualquiera de estas asegurará de que los archivos de clase se incluyen sólo una vez. Ellos comparten la misma lista de archivos, por lo que no es necesario preocuparse por la mezcla de ellos – un archivo incluido con require_once () no se incluirá de nuevo por include_once () .

Nota: include_once () y require () son declaraciones, no las funciones. No necesitas paréntesis alrededor del nombre de archivo que se incluye.

Al incluir el código desde el mismo directorio o subdirectorio, iniciar la ruta del archivo con extensión “.”:

include_once(‘. /includes/mymodule_formatting.inc’);


Funciones y variables

Funciones deben ser nombradas con  “lowerCamelCase”.

Las variables deben ser nombrados con minúsculas, y las palabras deben estar separadas por un guion bajo "snake_case".


Las variables persistentes

Las variables persistentes (variables / valores definidos por el uso de Drupal variable_get () / variable_set () funciones) debe ser nombrado con letras minúsculas, y las palabras deben estar separadas por un guión. Se debe utilizar el módulo de nombre de agrupación como un prefijo para evitar conflictos de nombres entre los módulos.


Constantes

Constantes siempre debe ser todo en mayúsculas, con caracteres de subrayado para separar palabras. Esto incluye las constantes de PHP predefinidas como TRUE, FALSE y NULL. nombres de constantes definidas por el módulo también debe ser precedido por una ortografía mayúsculas del módulo que se definen por.


Variables globales

Si es necesario definir las variables globales, su nombre debe comenzar con un solo guión seguido por el módulo / nombre del tema y otro subrayado.


Clases

Las clases deben ser nombrados con “CamelCase” y en plural.

Los métodos de clase y las propiedades deben utilizar “lowerCamelCase”:

Los atributos deben ser nombrados con "snake_case".

En general los nombres de los archivos deben coincidir con los nombres de las clases y siguen los estándares PSR-0 o PSR-4 para cargarse automáticamente.


Controlador

Los nombres de las clases Controlador son en plurar, en formato CamelCase, y finalizan con Controller. Ejemplos de nombres son: UsuariosController y CategoriasArticulosController.


STRINGs

Los strings deben estar incluidos dentro de comillas dobles " y no de simples '.

En la medida de lo posibles las variables deben estar fuera de las comillas usando una concatenación de strings o un remplazo de texto.

Concatenaciones de cadenas

Utiliza siempre un espacio entre el punto y las partes concatenados para mejorar la legibilidad.

Al concatenar variables simples, puede utilizar las comillas dobles y añadir la variable en el interior, de lo contrario, utilice comillas simples.

Cuando se utiliza el operador de concatenación de (‘.=’), utilizar un espacio a cada lado

El símbolo utilizado para la concatenación en PHP es el PUNTO (.)

<?php
echo "Total  =  "  .  $cantidad  *  $costo ;
//se concatena la cadena con el resultado de la operación
?>


Consultas SQL

Las consultas a la base de datos deben respetar el siguiente formato:

Palabras reservadas en MAYUSCULA. 

Ejemplo SELECT, WHERE, JOIN

Las consultas a múltiples tablas deben, en la medida de lo posible, realizarse por medio de JOINs.

Las consultas a la base de datos deben estar parametrizadas para mejorar los tiempos de respuesta del servidor.

En el diseño de tablas los nombres de los campos y tablas deben estar en minúscula separado por guion bajo y en el caso de las tablas en plural. 


Coment


ANEXO

1. PascalCase

La primera letra del identificador y la primera letra de las siguientes palabras concatenadas están en mayúsculas. El estilo de mayúsculas y minúsculas Pascal se puede utilizar en identificadores de tres o más caracteres, por ejemplo: MiClase

2. camelCase

La primera letra del identificador está en minúscula y la primera letra de las siguientes palabras concatenadas en mayúscula, por ejemplo: unaPropiedad

3. ALL_CAPS

Todas las letras del identificador se encuentran en mayúsculas y las palabras se separan por un guión bajo _. Ejemplo UNA_CONSTANTE

4. small_caps

Todas las letras del identificador se encuentran en minúsculas y las palabras separadas por _. Ejemplo: una_funcion

5. Proper_Case

Como CamelCase, pero cada inicio de palabra separado por un _. Se usa muy poco.

martes, 31 de agosto de 2021

Comando listar archivos en Linux - ls

ls - list

 ls (del inglés list) es un comando de Unix y derivados que muestra un listado con los archivos y directorios de un determinado directorio.



Sintaxis

Usage: ls [OPTION]... [FILE]...

Al ejecutar el comando ls sin opciones, enumera los archivos contenidos en el directorio actual, clasificándolos alfabéticamente.

ls

Opciones

  -a, --all          no ignoran las entradas que comienzan con "." , o sea los archivos ocultos.

ls -a



-A, --almost-all        no se enumeran implícitos "." y "..".

ls -A


--author           con -l, imprime el autor de cada archivo

ls -l --author




-b, --escape    imprime escapes de estilo C para caracteres no gráficos


martes, 26 de mayo de 2020

Argumentos de programa C en Linux


Cuando un programa Linux  escrito en C se ejecuta, comienza con la función main. En estos el main es:

 int main(int argc, char*argv[])

donde argc es un rencuentro de los argumentos del programa y argv es un array de cadena de caracteres que representa a los propios argumentos. 

Nota: Hay también programas en C para Linux que simplemente declaren main como main(). Esta opción también es válida, porque el tipo de retorno será, por defecto, int y los parámetros formales que no se usen en una función han de ser declarados. argc y argv siguen ahí, pero si no los declara, no podrá usarlos.

Siempre que el sistema operativo inicia un nuevo programa, los parámetros argc y argv se establecen y se transmiten a main. Dichos parámetros los suelen proporcionar otros programas, a menudo la shell que ha pedido que el sistema operativo inicie el nuevo programa. La shell adopta la línea de comando proporcionada, la divide en palabras individuales, y las usa para la matriz argv. Recuerde que una shell Linux suele ejecutar la expansión con comodines de los argumentos del nombre de archivo antes de que acepten los argumentos con comodines y a que ejecuten su propia expansión con comodines.

Por ejemplo, si proporcionamos a la shell el siguiente comando:

~$ MiPrograma izquierda derecha 'y centro'

el programa MiPrograma comenzará en main con parámetros:

argc: 4
argv: {"MiPrograma", "izquierda", "derecha", "y centro"}

Hay que tener en cuenta que el recuento de argumentos incluye el nombre del propio programa y la matriz argv contiene el nombre del programa como primer elemento, argv[0]. Como usamos comillas en el comando shell, el cuarto argumento está compuesto por una cadena con espacios.

Los argumentos de la línea de comandos son útiles para transmitir información a los programas. Por ejemplo, podría usarlos en una aplicación de base de datos para transmitir el nombre de la base de datos que desea usar, lo cual le permitirá usar el mismo programa en más de una base de datos. Algunos programas de prestación también utiliza los argumentos de la línea de comandos para modificar su comportamiento o para configurar ciertas opciones. Normalmente, configurará los denominados indicadores o los intercambiadores usando argumentos de línea de comandos que contienen un guión. Por ejemplo, el programa sort adopta un intercambiador para invertir el orden normal:

~$ sort -r archivo

Las opciones de línea de comando son muy comunes y si se usa coherentemente le serán de gran ayuda a los usuarios de su programa. Antes, cada programa de prestaciones adoptaba su propio enfoque sobre las opciones de la línea de comando, lo cual generaba cierta confusión. Por ejemplo:

~$ tar cvFB /tmp/archivo.tar 1024
~$ dd if=/dev/fd0 of=/tmp/archivo.dd bs=18k
~$ ps ax
~$ gcc --help
~$ ls -lstr
~$ ls -l -s -t -r

Actualmente se recomienda que los intercambiadores de línea de comandos comiencen con un guión y que estén formados por una única letra o número. Si fuese necesario, las opciones que no adoptan más argumentos se pueden agrupar tras un solo guión.

La especificación X/Open (disponible en: http://opengroup.org/) d0efine un uso estándar para las opciones de línea de comando (Utility Sintax Guideline) así como una interfaz de programación estándar para proporcionar intercambiadores de línea de comandos en los programas C. También definido por los estándares GNU.
 

Como en el caso de los ejemplos ls que cumplen las pautas de actuación. Cada opción debería ir seguida por cualquier valor necesario a modo de argumento independiente.

~$ ls -lstr
~$ ls -l -s -t -r

El ejemplo dd rompe nuestra regla usando opciones multi-carácter que no comienzan con guiones.

~$ dd if=/dev/fd0 of=/tmp/archivo.dd bs=18k

El ejemplo tar separa las opciones y sus valores por completo.

~$ tar cvFB /tmp/archivo.tar 1024

Es aconsejable añadir nombres de intercambio  más largos y con mayor significado a modo de alternativa para las versiones de caracteres únicos y usar un guión doble para distinguirlos. Podemos usar -h y --help como opciones para obtener ayuda.

~$ gcc --help

Otra pequeña debilidad de algunos programas es hacer que la opción +x (por ejemplo) ejecute la función contraria a -x. Podemos usar set -o xtrace para configurar el trazado de ejecución de la shell, y set +o xtrace para desactivarlo.

Como podemos imaginar, recordar el orden y el significado de todas estas opciones de programas es bastante difícil ya, sin tener que preocuparse de los formatos idiosincráticos. A menudo, la única opción es usar la opción -h (ayuda) o una página man si el programador la proporciona. 

A continuación presentamos el programa argumentos.c, que examina sus propios argumentos:

#include <stdio.h>
#include <stdlib.h>
int main(int argc, char *argv[])
{
int arg;
for (arg = 0; arg < argc; arg++) {
if(argv[arg][0] == '-'){
printf("opcion: %s\n", argv[arg]+1);
} else {
printf("argumento: %d: %s\n",arg,  argv[arg]);
}
}
exit(0);
}
Compilamos:

$ gcc argumentos.c -o argus

Cuando ejecutemos este programa, mostrará únicamente sus argumentos y detectará la presencia de opciones. La intención es que el programa adopte un argumento de cadena y un argumento de nombre de archivo opcional introducido por una opción -f. 
También podemos definir otras opciones.

$ ./argus -i -lr -a 'hola amigo' -a 'nos vemos en' -f salida.txt
argumento: 0: ./argus
opcion: i
opcion: lr
opcion: a
argumento: 4: hola amigo
opcion: a
argumento: 6: nos vemos en
opcion: f
argumento: 8: salida.txt

El programa usa únicamente el cómputo de argumentos argc, para configurar un bucle que examine todos los argumentos del programa.
 
for (arg = 0; arg < argc; arg++) {

Detecta la presencia de opciones buscando un guión inicial.

if(argv[arg][0] == '-'){


Podemos realizar unas pequeñas modifiaciones para que realice acciones diferentes para cada opciones del programa. Por Ejemplo:
#include <stdio.h>
#include <stdlib.h>
#include <string.h> int main(int argc, char *argv[])
{
int arg;
char texto[512];
char archivo[50];
int flagArchivo = 0;
int flagAdd = 0; for (arg = 1; arg < argc; arg++) {
if(argv[arg][0] == '-'){
switch (argv[arg][1]) {
case 'i':
printf("Programa: %s\n", argv[0]);
break;
case 'l':
printf("La cantidad de opciones pasadas es de: %d\n", argc-1);
break;
case 'a':
arg++;
strcat( texto, " " );
strcat( texto, argv[arg] );
flagAdd = 1;
break;
case 'f':
arg++;
strcpy( archivo, argv[arg] );
flagArchivo = 1;
break;
default:
printf("Parametro %s no soportado\n", argv[arg]);
break;
}
}
} if(flagArchivo==1){
printf("Se guardaria toda la informacion en: %s\n", archivo);
} if(flagAdd==1){
printf("Los datos agregados quedaron de la siguiente manera: %s\n", texto);
}
exit(0);
}
Ejecutando el programa quedaría algo así:

$ ./argumentos -i -l -a 'hola amigo' -a 'nos vemos en otro lado' -f salida.txt
Programa: ./argumentos
La cantidad de opciones pasadas es de: 8
Se guardaria toda la informacion en: salida.txt
Los datos agregados quedaron de la siguiente manera: hola amigo nos vemos en otro lado

De esta forma se ve el funcionamiento básico del uso de parámetros del programa. Cabe aclarar que hay funciones preestablecidas para el uso de estas opciones que podremos ver mas adelante.


lunes, 25 de mayo de 2020

Cómo programar C en Linux

Vamos a compilar y ejecutar programas C en Linux. Para ello primero vamos a asegurarnos de tener instaladas las librerías necesarias:
Se abre una consola y ejecuta el siguiente comando:

sudo apt-get install build-essential

Una vez instalado todo, ya tienes el entorno listo para compilar tus proyectos.

Crea un archivo en texto plano pero guárdalo con la extensión “.c“.

Vamos a  ejecutar el viejo y querido Hola Mundo. Simplemente tienes que abrir un fichero de texto y escribir las siguientes lineas.
#include <stdio.h>

int main()
{
    printf("Hola mundo");
    printf("\n");
    system("pause");
    return 0;
}

Ahora, en la terminal, ejecuta:
gcc holaMundo.c -o saludo // compila el archivo holaMundo.c y le llamamos “saludo ”

Luego ejecutamos el programa con el comando:
./saludo 

Como tiene un printf, lo único que hace es mostrar por pantalla la cadena de texto hola mundo (en la consola) y luego, deja un salto de línea.

Con esto ya sabes cómo compilar codigo C en Linux. Ya ves que instalando el anterior paquete desde la consola, te servirá para cualquier distribución de Linux. 

lunes, 4 de mayo de 2020

Control de un LED RGB

Visión general

En esta lección, programaremos el control de un LED RGB, y haremos que emita luz de varios colores.

Requisito

  •  1 x ESP8266 NodeMCU LoLin (La cual usaremos para todos nuestros experimentos)
  •  1 x Protoboard
  •  1 x LED RGB
  •  8 x resistencias de 220Ω.
  •  Cables para conectar todo.

Principio

Los LED RGB constan de tres LED. Cada LED tiene uno rojo, uno verde y uno azul. Estos tres LED de colores son capaces de producir cualquier color.
Los LED con emisores rojo, verde y azul, en general utilizan un cable de cuatro hilos como conexión con un cable común (ánodo o cátodo). Estos LED pueden tener ya sea ánodo común o cables de cátodo común.



Lo que usamos en este experimento es el LED RGB de ánodo común (el mas largo)
El pin es el ánodo común de tres LED. El pin está conectado a la salida de corriente de la placa, y los tres pines restantes están conectados a los pines digitales a través de una resistencia limitadora de corriente.


De esta manera, podemos controlar el color del LED RGB mediante una señal PWM de 3 canales.

Los colores del Led RGB vienen representados con números comprendidos entre el valor 0 y el valor 255. De esta forma, para componer el color rojo ponemos el valor máximo del rojo y el valor mínimo de los otros colores, es decir, el rojo equivale a «R=255; G=0; B=0». Y así sucesivamente con el resto de colores.



Ahora bien, para poder «seleccionar» un color, lo que debemos es darle más intensidad a un color que otro para el ojo humano haga el resto del trabajo y esto se logra utilizando PWM con unos 555 o con un microcontrolador.


Procedimientos

1. Construimos el circuito de la siguiente manera.









2. Programa


/***********************************************************
  File name: led_rgb.ino
  Description:Controlamos un led rgb para que cambie de colores.

*************************************************************/
int redPin = 0; // Pata R del LED RGB esta conectada al pin digital 0
int greenPin = 4; // Pata G del LED RGB esta conectada al pin digital 4
int bluePin = 5; // Pata B del LED RGB esta conectada al pin digital  5
void setup()
{
  //Seteamos los pines como salida
  pinMode(redPin, OUTPUT);
  pinMode(greenPin, OUTPUT);
  pinMode(bluePin, OUTPUT);

  analogWrite(redPin, 1023);
  analogWrite(greenPin, 1023);
  analogWrite(bluePin, 1023);
}

void loop()
{
  // Colores basicos
  color(255, 0, 0); // enciende el LED RGB Rojo
  delay(1000); // delay de 1 segundo
  color(0, 255, 0); // enciende el LED RGB verde
  delay(1000); // delay de 1 segundo
  color(0, 0, 255); // enciende el LED RGB azul
  delay(1000); // delay de 1 segundo

  // Example blended colors:
  color(255, 255, 0); // enciende el LED RGB amarillo
  delay(1000); // delay de 1 segundo
  color(255, 0, 255); // enciende el LED RGB magenta
  delay(1000); // delay de 1 segundo
  color(0, 255, 255); // enciende el LED RGB cian
  delay(1000); // delay de 1 segundo
  color(255, 255, 255); // enciende el LED RGB blanco
  delay(1000); // delay de 1 segundo
  color(0, 0, 0); // apaga el LED RGB
  delay(2000); // delay de 1 segundo*/
}

// funcion de generacion del color
void color (unsigned char red, unsigned char green, unsigned char blue)
{
  analogWrite(redPin, 1023 - (red * 4)); // PWM signal output
  analogWrite(greenPin, 1023 - (green * 4)); // PWM signal output
  analogWrite(bluePin, 1023 - (blue * 4)); // PWM signal output
}


3. Compile el programa y cárguelo a la placa

Ahora, puede ver que el LED RGB emite rojo, verde, azul, amarillo, magenta, cían, blanco y luego se apaga, cada estado continúa 1s, después
repitiendo el procedimiento anterior.



Resumen

Aprendimos el principio de programación de un LED RGB y su funcionamiento.


Tabla con columnas con prioridad de ocultación

Vamos a crear una tabla responsive con la característica ocultar sus columnas automáticamente utilizando únicamente HTML y CSS.
Para lograr esto utilizaremos clases CSS para definir la prioridad de la columna de forma que: priority-1 y priority-2... Estas columnas se visualizarán basándose en el tamaño de la pantalla. 
Utilizaremos Media-queries para que a diferentes tamaños de pantalla estén habilitados diferentes prioridades.

El siguiente código HTML lo utilizaremos para mostrar tablas responsive y en ellas aplicaremos las clases mencionadas antes. En esa clase definiremos la prioridad para gestionar si queremos mostrarlas en dispositivos más pequeños o no. Es decir, cuando la pantalla se haga más y más pequeña, las columnas se ocultarán gracias al código de las clases prioritys.

<table id="libros-detail" class="tutorial-table" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th class="priority-1" width="15%">Titulo</th>
            <th class="priority-2" width="15%">Autor</th>
            <th class="priority-3" width="15%">Orden</th>
            <th class="priority-4" width="10%">ISBN</th>
            <th class="priority-5" width="15%">Datos</th>
        </tr>
    </thead>
        
    <tbody>
        <tr>
            <td class="priority-1">El ojo del mundo</td>
            <td class="priority-2">Rigney</td>
            <td class="priority-3">1</td>
            <td class="priority-4">2211335566</td>
            <td class="priority-5">Cosas</td>
        </tr>
        ...
        ...
        <tr>
            <td class="priority-1">Un mago de Terramar</td>
            <td class="priority-2">Le Guin</td>
            <td class="priority-3">1</td>
            <td class="priority-4">9788435004084</td>
            <td class="priority-5">Mas cosas</td>
        </tr>
    </tbody>
</table>

Utilizaremos el siguiente código CSS para implementar la ocultación de columnas automáticamente con ayuda de las media queries. Como podrás ver, las media queries hacen referencia a cuatro tamaños de pantalla distintos. Cuando el tamaño de la pantalla concuerde con alguno de las media queries, se aplicarán sus estilos a las columnas de la tabla.

@media screen and (max-width: 1225px) and (min-width: 1045px) {
    .priority-5{
        display:none;
    }
}
        
@media screen and (max-width: 1045px) and (min-width: 835px) {
    .priority-5{
    display:none;
    }
    .priority-4{
        display:none;
    }
}
        
@media screen and (max-width: 565px) and (min-width: 300px) {
    .priority-5{
        display:none;
    }
    .priority-4{
        display:none;
    }
    .priority-3{
        display:none;
    }
}
        
@media screen and (max-width: 300px) {
    .priority-5{
        display:none;
    }
    .priority-4{
        display:none;
    }
    .priority-3{
        display:none;
    }
    .priority-2{
        display:none;
    }     
}

Con esto, a medida que se achica el tamaño de la pantalla van a ir desapareciendo las columnas por orden de prioridad.

viernes, 1 de mayo de 2020

Luces LED que fluyen

Ya hemos aprendido cómo hacer que un LED parpadee programando.
Hoy, controlaremos 8 LED, de modo que fluyan.

Los elementos que vamos a necesitar son
  •  1 x ESP8266 NodeMCU LoLin (La cual usaremos para todos nuestros experimentos)
  •  1 x Protoboard
  •  8 x LED 3mm de distintos colores
  •  8 x resistencias de 220Ω.
  •  Cables para conectar todo.

Principio

El principio de este experimento es muy simple. Se basa en el encendido y apagado secuencial de los LEDs.

Funciones: 

ciclos for
El bucle for es una estructura de control en programación en la que se puede indicar de antemano el número mínimo de iteraciones.​ Un contador de incremento se usa generalmente para incrementar y terminar el ciclo. Es una declaración útil para cualquier operación repetitiva, y a menudo se usa
en combinación con matrices para operar en colecciones de datos / pines.

Hay tres partes en el encabezado del bucle for:
for(inicialización; condición; incremento) {
// declaración (s);
}

La inicialización ocurre primero y exactamente una vez. Cada vez a través del bucle, la condición se prueba; si es cierto, el bloque de instrucciones y el incremento es ejecutado, entonces la condición se prueba nuevamente. Cuando la condición se vuelve falsa, el ciclo termina.

Procedimientos

1. Construye el circuito

La construcción del modelo es sencilla, a cada uno de los pines digitales que vallamos a usar se conecta el positivo de un diodo y cada negativo se conecta a una resistencia conectada a su vez al neutro del circuito.



2. El Programa

/***********************************************************
  File name: LedsQueFluyen.ino
  Description: Controlando encendido y apagado de los leds
***********************************************************/

int ledPin[] = {2, 5, 4, 0, 14, 12, 13, 15}; // Creamos un array con los pines que vamos a usar

void setup()
{
  for (int i = 0; i < 8; i = i + 1) {   // Usamos un ciclo for para recorrer el array
    pinMode(ledPin[i], OUTPUT);         // Establecemos los pines como de salida
  }
}
void loop()
{
  for (int i = 0; i < 8; i = i + 1) {
    digitalWrite(ledPin[i], HIGH);      // Recorremos el array y encendemos cada LED
    delay(200); //Delay 200 ms);        // Espereamos 200 milisegundos para seguir al siguiente
  }

  for (int i = 0; i < 8; i = i + 1) {
    digitalWrite(ledPin[i], LOW);       // Recorremos el array y apagamos cada LED
    delay(200); //Delay 200 ms);        // Espereamos 200 milisegundos para seguir al siguiente
  }
}

3. Compile el programa y cárguelo

Ahora, debería ver 8 LED encendidos en secuencia desde la derecha hasta la izquierda. Y luego repite lo anterior fenómeno.


Resumen

A través de este experimento simple y divertido, hemos aprendido más habilidades programación. Además, también puedes modificar el circuito y el código que proporcionamos para lograr un efecto aún más deslumbrante.