DEV Community: Oswaldo Echeverría

Guia rapida servidor Wordpress con Nginx en debian 11

Oswaldo Echeverría — Fri, 31 Mar 2023 19:51:28 +0000

Instalacion nginx
Instalacion PHP y MariaDB Server
Creacion de la base de datos
Descargamos e instalamos WordPress
Creacion de un host virtual Nginx

Instalacion nginx

Instalamos nginx

$ apt-get install nginx

Habilitamos nginx

$ systemctl start nginx
$ systemctl enable nginx
$ systemctl status nginx

Instalacion PHP y MariaDB Server

$ apt-get install php php-mysql php-fpm php-curl php-gd php-intl php-mbstring php-soap php-xml php-xmlrpc php-zip mariadb-server mariadb-client

Iniciamos mariaDB y verificamos el estado

$ systemclt start mariadb 
$ systemctl enable mariadb
$ systemctl status mariadb

Habilitamos el servicio de PHP-FPM

$ systemctl start php7.4-fpm
$ systemctl enable php7.4-fpm
$ systemctl status php7.4-fpm

Si qestamos en produccion y queremos asegurar la instalacion de mariaDB ejecutamos la configuracion guiada deacuerdo a lo que necesitemos

mysql_secure_installation

Creacion de la base de datos

Ejecutamos la BD
$ mysql

Creamos una nueva base de datos
$ CREATE DATABASE wordpress_db;

A continuación, creamos una nueva cuenta de usuario MySQL que utilizaremos para operar en la nueva base de datos de WordPress, con el nombre de usuario "wordpress_user".

$  CREATE USER 'wordpress_user'@'localhost' IDENTIFIED BY 'password';

Vincular el usuario y la base de datos concediendo a nuestro usuario acceso a la base de datos.

$ GRANT ALL PRIVILEGES ON wordpress_db.* to wordpress_user@'localhost';

Vaciar los privilegios para que MySQL conozca los permisos de usuario que acabamos de agregar.

$ FLUSH PRIVILEGES;

Salga del símbolo del sistema de MySQL escribiendo.

$ exit

Descargamos e instalamos WordPress

$ wget -O /tmp/wordpress.tar.gz https://wordpress.org/latest.tar.gz

Descomprima el archivo descargado de WordPress.

$ tar -xzvf /tmp/wordpress.tar.gz -C /var/www/html

Cambie el permiso del directorio del sitio y revierta los cambios después de instalar WordPress.

# chown -R www-data.www-data /var/www/html/wordpress
# chmod -R 755 /var/www/html/wordpress

Creacion de un host virtual Nginx

$ nano /etc/nginx/conf.d/wordpress.conf

Agreguamos el contenido al archivo wordpress.conf.

server {
        listen 80;
        listen [::]:80;
        root /var/www/html/wordpress;
        index index.php index.html index.htm;
        error_log /var/log/nginx/wordpress_error.log;
        access_log /var/log/nginx/wordpres_access.log;
        client_max_body_size 100M;
        location / {
                try_files $uri $uri/ /index.php?$args;
        }
        location ~ \.php$ {
                include snippets/fastcgi-php.conf;
                fastcgi_pass unix:/run/php/php7.4-fpm.sock;
                fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        }
}

Eliminamos el bloque de servidor predeterminado para habilitar su sitio web de WordPress.

$ rm /etc/nginx/sites-enabled/default
$ rm /etc/nginx/sites-available/default

A continuación, pruebamos para asegurarse de que no haya errores de sintaxis en ninguno de sus archivos Nginx.

$ nginx -t

Si no hay ningún problema, reiniciamos Nginx para habilitar sus cambios.

$ systemctl reload nginx

! Felicidades tienes tu servidor wordpress !

Para probarlo y configurarlo.
Entra al navegador a tu ip del servidor o localhost

o lo puedes hacer en el archivo wp-config-sample lo copias y le cambias el nombre a wp-config.php

Notas rápidas de Grid

Oswaldo Echeverría — Sun, 26 Feb 2023 20:43:15 +0000

🏁 Tabla de contenido 🏁

Idea del post
Contexto
Grid container
- Flujo de display grid
- Tracks
- Propiedades para definir un track
  - Valores para las columnas o filas implicitas
  - repeat como valor
  - patrones con repeat
  - Unidad de medida
  - min content y max content
  - fit content
  - minmax
  - autofill
  - AutoFit
- Alineacion de colums y rows
  - Justify items
  - Align items
  - Justify content
  - Align content
Posicionamiento Grid item
- Grid column start y end
- SPAN
- Numeros negativos
- Gutters o espaciadores
- DENESE
- Grid area
- Grid areas
- Lines Columns y Lines Rows
- Ordenamiento
- Alineacion de un solo elemento en el axis
Comandos resumen
- Grid container
- Grid items

Idea del post

Esta es una guía rápida de uso de CSS3 GRID con el objetivo que tengas en mano los pasos u anotaciones para usar Grid en tus proyectos

Por último. Si te gusto este post déjame un ❤️

Contexto

Grid container: Es un espacio bidimensional que trabaja con filas y columna

Grid items: Son los elementos hijos y perteneces a un grid container

Grid cells: Es una cuadrícula compuesta de muchas celdas, al principio los grid-items ocupan una celda por cada grid-item

Cada cuadrado pequeño conforma la grid y a este cuadrado pequeño se llama grid cell

Grid lines: Las cuadriculas estan compuestas de lineas verticales y lineas horizontales conocidas como column grid lines y row grid lines

veamos un grid de 3x3, es decir 3 filas y 3 columnas; Sin embargo, tiene 4 row grid lines y 4 columns grid line

Cada columna o fila tendrá una línea de inicio y una línea de fin.
Siempre habrá una línea más que columnas o filas.

Estos conceptos son importantes porque con esto podemos posicionar elementos en la grid

Supongamos que lo azul es un elemento o una imagen o un contenedor. Para posicionarlo donde está debo saber las líneas y su numeración.

Por ejemplo, este elemento azul está posicionado en
la row line de la 2 hasta la 4 y la column line de la 1 hasta la 3

Grid track: Es el espacio entre dos grid lines adyacentes, también se las conoce como fila y columna

Grid areas: Es el área donde se posicionan varias celdas. Un grid área puede estar formando por el número que sea de celdas, pero un grid área siempre debe ser rectangular o cuadrado

Grid container

Para llamar a una grid se lo hace con display: grid;. El height por defecto de los elementos grid es auto.
Si se aplica display grid inmediatamente rellena los espacios equitativamente.

Antes de display grid

Después de display grid

Flujo de display grid

El display grid por defecto es en fila, se lo puede referenciar con

grid-auto-flow: row;

Si se desea cambiarlo en dirección de columna se lo puede referenciar con

grid-auto-flow: column;

Tracks

Los tracks son filas o columnas.

Propiedades para definir un track

Definición de columnas: Para definir una columna se hace de forma muy intuitiva.

grid-template-columns: 100px 2cm 30%;

se puede usar cualquier tipo de medida

En el html tenemos 6 ítems es por eso que se nos crea una fila implícita o automática.

Para definir filas o rows usamos.

grid-template-rows: 20px 4cm  20%;

Valores para las columnas o filas implicitas

Cuando creamos uns fila o una columna y hay mas items de los que hemos definido se crean columnas o filas implicitas, estas columnas y filas no estan definidad por lo tanto estan en auto y tienen el tamaño de su contenido, pero si queremos controlar ese valor automatico a las filas o columnas lo podemos hacer de la siguiente manera:

Tenemos este ejemplo. Tenemos la fila 4 creada implicitamente y como vemos esta en auto y s height esta derivado de su contenido

Si usamos

grid-auto-flow:row; --> direccion grid
grid-auto-rows: 200px;

Le estamos dando un tamaño a las filas implicitas y de esta manera controlamos

Si fuera en columna

grid-auto-flow: column;
grid-auto-colums:200px;

repeat como valor

Podemos crear filas y columanas con repeat de la siguiente manera.
grid-template-row: repeat(5, 20px) De esta manera le decimos que cree 5 filas de 20px. Asi mimsmo podemos hacer con columnas.
grid-template-column: repeat(5, 20) De esta manera le decimos que cree 5 columnas de 20px.

patrones con repeat

Otra función que nos permite repeat es crear patrones de filas y columnas
Para crear patrones de columnas podemos usar.
grid-template-columns: repeat(3, 10px, 20%); Esto nos creará 3
columnas de 10px y 3 columnas de 20% pero intercalándolas. De la
misma manera podemos usar gris-template-rows: repeat(3, 10%, 30px); Esto nos creará 3 filas de 10% y 3 filas de 30px
intercalándolas

Unidad de medida

En grid puedes usar cualquier medida, pero se recomienda usar la medida de fracción o fr para que los grids sean felxibles Ejemplo.

grid-template-colums: 1fr 1fr 1fr. Lo que hace es dividir el espacio disponible en 3 fracciones.
En este ejemplo tenemos 6 elementos en un contenedor grid aplicando la creacion de 3 columnas de una 1fr equitativamente

min content y max content

min-content: crea un track con el minimo de contenido posible, es decir su tamaño se definira en base a su minimo contenido posible, la columna crecera en base a la palabra mas grande o contenido mas grande
max-content: Ocupa el mayor contenido posible, es decir el tamanio de la columna se dara al mayor contenido posible

grid-template-columns: min-content max-content;
grid-template-rows: min-content max-content;

El azul es min-content, el rojo es max-content

Nota: Esta propiedad se usa mas con columnas

fit content

No spermite definir un tamaño maximo para una fila o columna. Ejemplo

Le decimos que el tamaño minimo o inicial de la columna va a ser el min-content (que es el tamaño minimo del contenido) y cuando llege a 200px se desborde

grid-template-colums: fit-content(200px);

minmax

Define el valor minimo o maximo de un track

grid-template-column: minmax(valor_minimo, volormaximo);
grid-template-column: minmax(80px, 300px);

Vemos que se estira solo hasta los 300px

autofill

La definicion es autorelleno. En base a la medida del segundo parametro creara o rellenara cuanto elemento se pueda en el grid-container

grid-template-column: repeat(auto-fill, 10%)

Aunque tenga 4 items creara las columnas que permita el contendedor, cada columna de 10%

Se puede usar con un valor fijo

grid-template-column: repeat(auto-fill, 300px)

Calcula que el espacio del container solo entran dos columnas de 300 px

Tambien se puede usar con minmax()

grid-template-column: repeat(auto-fill, minmax(valor_minimo, valor_maximo));
grid-template-column: repeat(auto-fill, minmax(200px, 1fr));

Con esta poropiedad creamos columnas dinamicamente

Y si vemos con la viewport mas alto y vamos encogiendo
Autofill dice mientras este el espacio para crear mas columnas lo hara y cuando llegue al valor minimo se desbordara hasta que llegue a una fraccion o 1fr

AutoFit

Fit significa ajustar, la diferencia con el autofill es que este valor no va a crear columnas o filas extras si hay espacio solo las que vamos a requerir

grid-template-column: repeat(auto-fit, minmax(valor_minimo, valor_maximo)); 
grid-template-column: repeat(auto-filt, 10%);

Solo las columnas de los items disponibles

Alineacion de colums y rows

Justify items

Nos permite alinear las filas y columnas axis
grid-row. Tiene las propiedades
stretch | start | end | center. Ejemplo

Creamos una grid

grid-template-column: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);

justify-items: start;

justify-items: end;

justify-items: center;

Align items

Nos permite alinear las filas y columnas axis
grid-colum. Tiene las propiedades
stretch | start | end | center. Ejemplo

align-items: start;

align-items: end;

align-items: center;

NOTA: El SHORTCUT para usar justify-items y align-items es:

place-items: valor_align-items valor_justify-items;

Justify content

Nos permite linear la grid del axis horizontal siempre y cuando la grid o cuadricula sea menor que el contenedor, esto quiere decir que hay espacio disponible. Ejemplo

grid-template-columns: repeat(2, 150px);
grid-template-rows: repeat(2, 150px);

Como vemos en la imagen la grid es mas pequeña que el contenedor grid

Align content

Nos permite linear la grid del axis vertical siempre y cuando la grid o cuadricula sea menor que el contenedor, esto quiere decir que hay espacio disponible

Posicionamiento Grid item

Los grid-items se posicionan naturalmente en el orden del html y ocupan una celda. Para posicionar los items en grid debemos recordar que es un colum grid line y un row grid line. Cuando posicionamos un item debes decirle el inicio de la línea y el fin de la línea sea en row o column como un sistema de coordenadas

Grid column start y end

Para posicionar el comienzo de un ítem en la línea de una columna usamos grid-colum-start: ; y para definir el final de la posición del ítem usamos grid-column-end: ; Ejemplo.

Queremos que un ítem comience en la línea de la columna 3.
grid-column-start: 3;.

si no se especifica la línea final, por defecto será la que le sigue, en este caso la línea colum 4

Si añadimos una columna mas

Ahora queremos que el ítem 1 comience en la línea de la columna 3 y termine en la 5.

grid-column-start: 3;
grid-column-end: 5;

Este comando también se usa con rows veamos el siguiente ejemplo.
Que la columna ocupen de la línea 3 a la 5 y en fila ocupen de 3 a 5

grid-column-start: 3;
grid-column-end: 5;
grid-row-start: 3;
grid-row-end: 5;

Para los comandos anteriores tenemos atajos o shortcuts que son:
grid-column: valor_start / valor_end; y para filas.
grid-row: valor_start / valor_end; así que con el ejemplo anterior quedaría así

grid-column: 3 / 5;
grid-row: 3 / 5;

Si en el shortcut ponemos solo un valor nos llevará el ítem a esa la línea start y tomará como valor end la siguiente línea. Ejemplo

tenemos la siguiente grid

sí ponemos grid-row: 3; al elemento 3 nos dará lo siguiente

SPAN

Sabemos que para posicionar un ítem necesitamos las coordenadas de las líneas de inicio y fin, span nos permite no definir la línea de fin, simplemente abarca la posición que se le ponga en span. Se usa:

grid-column: span valor
grid-row: span valor

tenemos la siguiente grid

Por ejemplo, usamos en el ítem 3 grid-column: span 2. Con esto estamos diciendo que el ítem 3 abarque 2 líneas column mas de la que actualmente esta

asi mismo podemos usar para las filas, por ejemplo.
grid-row: span 3;, Le estamos diciendo que abarque 3 líneas en row más de la que actualmente está.

también podemos usar la línea start + span

de la imagen anterior queremos por ejemplo que el ítem 3 se posicione en la columna 2 y abarque 3 columnas o 3 line column.
Usariamos grid-column: 2 / span 3

ahora que se posicione en la línea 1 en row y abarque 4 filas o 4 line row. Usariamos grid-row: 1 / span 4

Numeros negativos

Para posicionar elementos o ítems también podemos usar números negativos, si vemos en alguna imagen anterior de las grids enumeradas podemos darnos cuenta de los números negativos. Estos referencian a la última posición de la grid.

Gutters o espaciadores

Es una propiedad que nos permite dar un espacio entre filas row-gap: ; y columnas column-gap: ;.

Ejemplo creamos la siguiente grid

grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);

column-gap: 20px;
row-gap: 20px;

o podriamos aplicar el shortcut gap: 20px 20px o simplemente gap: 20px que aplica tanto para filas y columnas

DENESE

Al personalizar el area que ocuparan los items dejamos en la grid espacios vacios

Esta propiedad nos permite llenar estos espacios vacions de la forma mas ordenada posible.

grid-auto-flow: dense;    ---> Para filas
grid-auto-flow: column dense;  ---> Para columnas

Grid area

Este es un shortcut para grid-column y grid-row y se define en el siguiente orden

La posición inicial de la fila
La posición inicial de la columna
La posición final de la fila
La posición final de la columna

grid-area: 2 / 2 / 3 / 5;

Posición inicial line row 2
Posición inicial line column 2
Posición final line row 3
Posición final line column 5

Grid areas

Es la propiedad que nos permite organizar elementos en base a areas
Las areas pueden ser de una celda minimo y a partir de ahi pueden ser cuadradas o rectangulares
Nos permite nombrar areas en la grid, es decir ser mas especifico.
Define una palantilla refereciando nombres otorgados en la grid
Cada " " equivale una fila y dentro de las comillas van a ir los nombres de las columnas, estas columnas son implicitas al no definrlas se crean en automatico. Se la escirbe de la siguiente manera.

grid-template-areas: "columna1 columna2 columna3"

Para manejar el tamaño de las columnas implicitas podemos usar:

grid-auto-columns: ;   --> columnas
gris-auto-rows: ;      --> filas

Ejemplo. Supongamos que tenemos esta base

/*  CREAMOS */

grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 10px;

Por ejemplo quiero que header ocupe de la line column 1 a la 4 y la line row de la 1 a la 3. Tambien queremos que main ocupe la line column 4 a la 6 u line row de 1 a la 3

grid-template-areas:
"header header header main main"
"header header header main main";

Supongamos que no queremos que las dos ultimas celdas de main que se encuentran en la segunda fila no esten nobradas o seleccionadas usamos:

grid-template-areas:
"header header header main main"
"header header header .    .   ";

Ahora queremos un sidebar de la line column 1 hasta la 3 y line row de la 3 a la 4 y un footer de la line column de la 3 a la 6 y line row de la 3 a la 4

grid-template-areas:
"header header header main main"
"header header header .    .   "
"sidebar sidebar footer footer footer";

Ahora queremos posicionar un elemento basta con usar.
grid-area: nombre_area Ejemplo

Sabemos que tenemos en el anterior ejemplo nombradas las areas con el template supongamos que queremos que html header opcupe el templete de header del area

.header {
    background: crimson;
    grid-area: header; ->nombre del area en el template
}

Lines Columns y Lines Rows

A traves de las lines columns y lines rows es otra forma de posicionar los elementos.
Al momento de crear las columnas y filas, tambien podemos darle un nombre especifico a las lineas de columnas y filas que estamos creando de la siguiente manera

grid-template-columns: [linea-inicial] 1fr [linea-final] 1fr [linea-final-grid];

Los nombres de las lineas van en el orden de creacion

Primero esta el nombre de la linea
Segundo esta la primera columna
Tercero esta el nombre de la segunda linea
Cuarto esta la segunda columna
Quinto esta el nombre de la ultima linea

Es decir tenemos dos columnas pero tenemos 3 lines columns y se escriben en codigo en el orden de creacion de izquierda a derecha.

La lineas pueden tener mas de un nombre como vemos a continuacion

grid-template-columns: [linea-inicial] 1fr [linea-final linea-inicial2] 1fr [linea-final-grid];

Esta misma accion la podemos hacer con filas o rows con:
grid-template-rows: ;

Asi que de esta manera podemos posicionar los items de la siguiente manera por ejemplo

.item1{
   background: slateblue;
   grid-column: linea2 / linea4;
   grid-row: lnea-media/linea-final;
}

NOTA: Habalando de mejores parcticas se recomienda las lineas de inicio y final de su elemento a posicionar y despues un sufijo relevante. Supongamos que en la siguiente imagen queremos posicionar el item2 como cabecera en al grid

.item2{
   background: crimson;
   grid-area: cabecera;
}

Cabecera es el nombre que le dimos a las lineas

grid-template-columns: [cabecera-start] 1fr 1fr 1fr 1fr [cabecera-end];

grid-template-rows: [cabecera-start] 1fr 1fr 1fr [cabecera-end];

Ordenamiento

Funciona igual que el order de flexbox mientras el valor sea mas alto los elementos se pondran al final
Por defecto todos los grid-item tienen valor 0

grid-template-columns: repeat(4, 1fr);

.grid__item1{
    Padding: 20px 0;
    Font-size: 2rem;
    Color: #ffff;
    Text-align: center;
    Order: 1;
}

Alineacion de un solo elemento en el axis

Se declaran en elos grid-items

Align-self: ;
Cuando quieres alinear solo un elemento en el vertical

justify-self: ;
Cuando quieres alinear solo un elemento en le eje horizontal

Shortcut
place-self: align justify;

Comandos resumen

Grid container

GRID

/* Direccion de grid en Horizontal o row*/
grid-auto-flow: row;

/*Direccion de fila en vertical o column */
grid-auto-flow: column;

TRACK - COLUMNAS Y FILAS

/* Crear filas */
grid-template-rows:

/* Crear columnas*/
grid-template-columns:

/* valores para crear columnas o filas con grid-template */

repeat(3, 1fr); | 3 columnas de 1 fracccion

min-content max-content; | tamaño minimo y maximo del contenido

fit-content(valor_maximo); | tamaño minimo del contenido y se desborde en el valor_maximo

minmax(valor_minimo valor_maximo); | tamaño minimo y maximo especifico

repeat(auto-fill, 10%); | Cree todas las columnas o filas de 10% que el tamaño del contenedor le permita 

repeat(auto-fit, 10%); | Cree las filas o columnas deacuerdo a los items existentes

Nombrar las lineas al momento de crear filas y columnas

grid-template-columns: [linea-inicial] 1fr [linea-media] 1fr [linea-final];

Lo mismo aplica para rows

Grid areas
Permite crar filas y columnas a traves de una especia de template o plantilla y al mismo tiempo las podemos nombrar.

Cada fila esta dentro de "", comillas y dentro de las comillas estan las columnas.

Este template tiene que ser uniforme y equilivrado las areas pueden ser de 1 celda o mas simre y cuando sean de forma cuadrada o rectangulares.

Si quremos dejar vacio una celda remplazamos el valor por un ., punto

grid-template-areas:
" columna1 columna2 columna3 columna4 columna5"
" header   header   header   main     main    " 
" header   header   header   main     main    ";

Si queremos manejar el tamaño de las filas o columnas que fueron creadas en automatico

grid-auto-columns: valor;
grid-auto-rows: valor;

Alineacion para las columnas y filas

/* En horizontal */
justify-items: strech | start | end | center;

/* En vertical */
align-items: strech | start | end | center;

/* shortcut */
place-items: valor_align valor_justify;

Cuando la grid sea mas pequeña que el tamaño del contenedor

/* En horizontal */
justify-content: strech | start | end | center;

/* En vertical */
align-content: strech | start | end | center;

Grid items

Posicion de grid-items con coordenadas atraves de lineas.
Si las lineas tienen nombre pueden ser llamadas con el mimso nombre

Posicionamiento simple

/* Posicionamiento en columnas*/
grid-column-start: linea_inicio;
grid-column-end: linea_fin;

/* Posicionamiento en filas*/
grid-row-start: linea_inicio
grid-row-end: linea-fin;

/* shortcut */
grid-column: linea_inicio / linea_fin;

grid-row: linea_inicio / linea_fin;

SPAN Posicionamiento sin definir la linea final

De la linea donde esta declarado el item se toma el numero de espacios de filos o columnas que este en span

grid-column: span2;
grid-row: 3 span 2

Grid area
Posiciona un item o area por corrdenada de lineas

Patron en orden de lineas:
1. Posicion inicial fila: 2
2. Posicion inicial columna: 2
3. Posiion final fila:3
4. Posicion final columna: 5

entonces...

grid-area: 2 / 2 / 3 / 5 ;

Gutters o espaciadores de filas y columnas

column-gap: valor
row-gap: valor

/* espaciado tanto para filas y columna*/
gap: valor

Dense o relleno ordenado de items segun su direccion

/* Fila*/
grid-auto-fow: dense; 

/* Columna*/
grid-auto-flow: column dense;

Ordenamiento de items

/* En el item se declara */

/* Por defecto en los items*/
order: 0;

/* Si el numero es menor va primero*/
order: -1;

/* Si el numero es mayor va al final */
order: 1;

Alineacion de un solo grid-item

/* Vertical */
align-self: strech | start | end | center;

/* Horizontal */
justify-self: strech | start | end | center;

/* shortcut */
place-self: valor_align-self  valor_justify-self;

Notas rápidas de Flexbox

Oswaldo Echeverría — Thu, 23 Feb 2023 03:30:12 +0000

🏁 Tabla de contenido 🏁

Idea del post
Lista de etiquetas por defecto en inline y block
Contexto flex y flex direction
Lista de valores de propiedades
Manejo de contenedores
Manejo de item o elemento

Idea del post

Esta es una guía rápida de flexbox y el objetivo es que tengas en mano los pasos u anotaciones para usarlo

Por último. Si te gusto este post déjame un ❤️

Lista de etiquetas por defecto en inline y block

Por defecto, html5 contiene etiquetas que tienen dirección en línea o en bloque sin necesidad de usar la propiedad flex y conocer las etiquetas nos ayudara con más precisión manipular los ítems en nuestros contenedores. A continuación una lista de las etiquetas más usadas

Etiquetas en bloque	Etiquetas en linea
<address>	<img>
<article>	<span>
<aside>	<button>
<blockquote>	<input>
<div>	<label>
<fieldset>	<select>
<figcaption>	<textarea>
<figure>	<br>
<footer>	<a>
<form>	<sup>
<h1>	<sub>
<header>	<script>
<hgroup>	<q>
<hr>	<object>
<li>	<map>
<main>	<i>
<nav>	<var>
<ol>	<time>
<output>	<strong>
<p>	<em>
<pre>	<code>
<section>	<cite>
<table>	<acronym>
<tfoot>	<small>
<ul>	<big>

Contexto flex y flex direction

Básicamente, para usar flexbox necesitamos un elemento contenedor y que su contenedor tenga hijos.
Al contenedor se lo conoce flex-container y a los hijos se los conoce como flex-items
display: flex; es la propiedad para activar flexbox
Además de activar flexbox con la propiedad display: flex; se necesita darle una dirección a través de la propiedad flex-direction: ;. El valor puede ser row o column
- La dirección que se defina en el flex-direction será la dirección principal o main axis y la dirección que no sé escribió será la dirección secundaria o cross axis
- Usar la propiedad flex-direction nos da la ventaja de poder invertir el main axis usando flex-direction: row-reverse o flex-direccion: column-reverse como lo vemos en las siguinetes imagenes:

Si deseamos activar flexbox y en el mismo valor darle la dirección, podemos usar display: inline para trabajar en filas, o display: block para trabajar en columnas
Cuando se trabaja en fila, los items tienen el alto y ancho de su contenido por defecto y no poseen algunas propiedades que, en cambio, trabajando en bloque o columna si se pueden aprovechar como alto, ancho y margenes. Entonces, para solucionar eso, podemos usar display en fila con las propiedades de bloque, a esto lo llamamos display: inline-block

Lista de valores de propiedades

Primero conoceremos los valores que se pueden usar en las propiedades:

flex-start Envia el o los elementos al comienzo del flex-container
flex-end Envia el o los elementos al final del flex-container
center Centra el o los elementos en el flex-container
space-between Distribuye los espacios de los elementos en el flex-container ponendo el primer y el ultimo elemento al raz del container
space-around Distribuye los espacios de los elementos en el flex-container sin poner el primer y el ultimo elemento al raz del container, esta opcion añade unos margenes entre item por defecto en algunos casos no parecieran estar distribuidos equitativamente
space-evenly Distribuye los espacios de los elementos en el flex-container sin poner el primer y el ultimo elemento al raz del container, esta opcion si distribuye equitativamente los espacios
baseline Los flex-items se alinearán en la dirección de su línea base, esta opción se ejecuta en el contenedor, no en el ítem. Ejemplo

nowrap Permite que el contenido se desborde del flex-container
wrap No permite que el contenido se desborde del flex-container reduciendo el tamaño de los elementos
wrap-reverse No permite que el contenido se desborde del flex-container reduciendo el tamaño de los elementos, además invierte su dirección

Manejo de contenedores

Flex-wrap: Maneja el desbordamiento del flex-container.
Sus propiedades son:
- nowrap
- wrap
- wrap-reverse
Justify-content: Justifica o maneja la alineación en la dirección principal o main axis del flex-container.
Sus propiedades son:
- flex-start
- flex-end
- center
- space-between
- space-around
- space-evenly
Align-items: Alinea el contenido en la dirección secundaria o cross axis.
Sus porpiedades son:
- flex-start
- flex-end
- center
- baseline
Align-content: Maneja la alineacion del flex-container siempre y cuando halla más de una fila, en tal caso el flex-direction sea row o halla más de una columna si el flex-direction es column.
Sus propiedades son:
- flex-start
- flex-end
- center
- space-between
- space-around
- space-evenly

Manejo de item o elemento

Las siguientes propiedades sirven para el manejo individual del item o elemento.
Un contenedor también puede ser un ítem si es hijo de un flex-container padre.

Order: Ordena los flex-items en el main axis. El ítem que tenga el menor número será el primero. Por defecto, los ítems tiene valor de 0. En el siguiente ejemplo el main axis es de izquierda a derecha o row y poniéndole el valor de 1 lo enviamos al final

Flex-grow: Es el factor de crecimiento de los flex-items en relacion con otros, es decir, distribuye los espacios sobrantes afectando solo al main axis. Su valor se representa en forma de porciones en números enteros. En el siguiente ejemplo vemos que exite un espacio sobrante y luego indicamos que los items se distribuyan en porciones iguales de 1

Flex-shrink: Determina que tanto se encogen los flex-items con respecto al otro, es decir, maneja los espacios faltantes, recordando que display flex no permite que su contenido se desborde, si no más bien los reduce. Siempre que flex-shrink tenga un valor positivo no se desborda el flex-container. Esta propiedad afecta al main axis. Por defecto su valor es 1 y no acepta valores negativos pero sí el 0. Ejemplo En la siguiente imagen podemos observar que flex-shrink tiene un valor de 0, esto inmediatamente le quita la propiedad flex-shrink y le da el ancho o el alto que este por defecto en el css para el item

Flex-basis: Indica el tamaño de un flex-item de forma predominante, inclusive a su width base, flex-grow, o flex-thrink. Si su valor es auto su flex-basis sería su height o width, Afecta al main axis. Ejemplo:

Si ponemos un
flex-direction: row;
flex-basis: 60px;
width: 100 px;

Predominará el flex-basis

Ejemplo2:
Que pasa si un ítem tiene contenido y no tiene width suponiendo que es flex y queremos distribuirlos iguales

La solucion

Se desborda el contenido, pero se distribuye en partes iguales

Align-self: Permite alinear solo a un elemento en el cross axis o direccion secundaria. Hace lo mismo que align-items y con los mismo valores
- flex-start
- flex-end
- center
- baseline
Flex: Es el shortcut para ejecutar tres propiedades para ítems al mismo tiempo, las cuales son flex-grow, flex-shrink y flex-basis.

Se la usa de la siguiente manera:

flex: valor_grow valor_shrink valor_basis

Esta propiedad nos permite distribuir
equitativamente los ítems de 3 formas

flex: 1 1 0;
flex: auto;
flex: 1;

Prepara tu entorno Django para trabajar con HTML, CSS, javascripts, imágenes y GitHub

Oswaldo Echeverría — Tue, 21 Feb 2023 13:34:17 +0000

🏁 Tabla de contenido 🏁

Idea del post
Creando entorno
Instalacion Django y configuracion del proyecto
Configuracion de archivos estaticos
Configuracion de seguridad basica en django
Contenido en el html y css
Creando vista para mostrar index.html
Ejecutando servidor django para mostrar contenido
Notas de librerias instaladas
Subir a github

Idea del post

Lo primero que quiero decir es que para este post supondré que tienes instalado Python, Git, sabes como manejar tu editor de código y tienes una cuenta en GitHub.

Lo segundo es que uso entorno Windows y visual studio code. Esto no quiere decir que no puedas seguir el post si usas otro editor u otro sistema operativo

Esta es una guía rápida de pasos para principiantes en Django y el objetivo es que tengas en mano los pasos u anotaciones para preparar tu entorno hasta qué este aprendido los pasos de memoria

Por último. Si te gusto este post déjame un ❤️

NOTA:

Enseñar con exactitud para que sirve y como funciona cada cosa no esta contemplado para este post asi que este post es una solucion rapida para ejecutar css, javascript, imagenes y html en un proyecto rapido para probar el framework.
En futuros post explicare en mas profundidad

Creando entorno

Crea una carpeta donde se alojara el proyecto, para este ejemplo se llamara 'django-template' (usa siempre minúsculas para nombrar archivos y carpetas)

Abre la carpeta que creaste desde tu editor favorito en mi caso visual studio code.

Yo manjeo las terminales tanto de git como cmd para usar django en el visual studio asi que en la parte superio encontraras el menu y hay una opcion que dice terminal, se abrira en la parte inferior una terminal de powershell, pero puedes configurar para tener otra terminal o varias terminales en mi caso tengo dos abiertas la de bash para git y la cmd para django de la siguiente manera. Nótese que estas terminales se abren ya en la ubicación de la carpeta

En la consola de git bash comenzaremos inicializando el proyecto con git git init -b main.
Si tienes dudas sobre git o quieres puedes revisar mi post anterior Notas rápidas de git y github

Ahora nos movemos a la consola de cmd para crear el entorno virtual para django ejecutamos python -m venv env, siendo env el nombre del entorno.

Una vez que creamos el entorno debemos activar el entorno, para ello entramos al directorio env con cd env. Dentro de env puedes ejecutar dir para ver los directorios de env, habrá una carpeta a la cual debemos entrar llamada Scripts, asi que cd Scripts y si vuelves a ejecutar dir te mostrará un archivo que necesitamos ejecutar para activar el entorno así que dentro de Scripts ejecutamos activate

Para saber si el entorno esta activo puedes ver "(env)" en la consola como en la imagen anterior

Cada vez que vallas a trabajar con django debes activar el entorno env y cada vez que lo dejes de usar al final de tu dia de desarrollo debes desactivarlo asi mismo debes ir a la misma ubicacion antes mencionada y en vez de activate escribes deactivate

No olvides luego de activar o desactivar regresar a la carpeta principal del proyecto para ejecutar todos los otros comandos. Puedes regresar a la carpeta anterior con cd ..

Instalacion Django y configuracion del proyecto

Antes de instalar django actualizamos el comando pip en cmd con python -m pip install --upgrade pip. Una vez actualizado ahora instalamos django con python -m pip install django

Ahora inicializamos el proyecto django con django-admin startproject core ., Siendo core el nombre que le otorgas.

Algunos desarrolladores usan el startproject como core ya que es la aplicacion principal de django en donde administra el setting general e inician una nueva app en django para iniciar el desarrollo y dejan a core solo para configuraciones

Por otro lado puedes usar el mismo startproject para un proyecto sensillo como una landing page

El punto que va despues de la plabra core significa que queremos la carpeta startproject en el directorio raiz. Recordemos que dentro de django no puedes unir palabras con - (guion medio) tienes que hacerlo con _ (sub guion), esto lo decimos por el nombre que le daremos al startproject si no lo haces con sub guion te saldrá error

En este caso, como es un programa sencillo usaremos la web en el mismo startproject la llamaremos 'landing_page'

Configuraremos el documento setting de nuestra startproject el cual es este

Lo primero que haremos es añadir el startproject a las apps.
Buscamos dentro de setting la parte donde diga INSTALLED_APPS y añadimos el nombre de nuestra startproject de la siguiente manera

Sin olvidar ni las comillas '' ni la coma ,

Configuracion de archivos estaticos

Ahora configuraremos la ubicacion donde estaran los archivos html el cual se llaman templates en django y los archivos de css, javascripts, imagenes en django se llaman archivos staticos. Dentro del mismo archivo settings buscamos STATIC_URL='static/' y lo modificamos de la siguiente forma

luego buscamos TEMPLATES para indexar la carpeta templates
en donde añadimos os.path.join(BASE_DIR, 'templates') donde esta señalado por la flecha

después de remplazar el STATIC_URL y TEMPLATES por el contenido anterior importamos el os que nos pide para poder referenciar las carpetas estaticas, esto lo hacemos al principio del archivo setting

Lo siguiente que vamos a hacer es crear los directorios que faltan. Ahora cambiamos de terminal a la de git bash y creamos en el directorio principal la siguiente estructura. Recordando que usamos mkdir para crear carpeta y touch para crear archivos

quedando la estructura de la siguiente manera

Los nombres de la carpeta static y template pueden ser cambiados pero habria que cambiarlos tambien en el documento setting del startproject, aun asi no se lo recomienda ya que es un estandard

Por ultimo en la misma altura de static y template creamos un archivo .ignore y un archivo README.md

Configuracion de seguridad basica en django

Debemos saber que cuando subimos un proyecto público a GitHub o al servidor debemos de cuidar de subir información relevante que alguien mal intencionado pueda usarlo para vulnerar nuestra web.

Primero: Modificamos .ignore
Vamos a https://www.toptal.com/developers/gitignore y ponemos django en el buscador para que nos genere el contenido sugerido o estandard de seguridad que debemos ignorar antes de subir nuestro proyecto

Seleccionamos todo con Control + a, copiamos todo con Control + c en el archivo que creamos .ignore
Adicional añadimos unas líneas que nos permiten ignorar al momento de subir las imágenes, ya que subir imágenes a git es mala práctica

Segundo: Guardaremos la keys de django y debug en variables seguras

Primero creamos en git bash un archivo con el nombre .env al mismo nivel del archivo setting, es decir, dentro de la carpeta donde están los archivos de configuración del startproject

Instalamos desde el cmd con el entorno (env) activado y en el directorio raiz pip install django-environ

En el archivo setting configuramos y exportamos environ. Las importaciones van arriba del documento y la configuración en donde está la key de la siguiente manera

Lo que está en el cuadro amarillo es lo que escribimos ahora configurando environ. Lo que está señalado por las flechas celestes es lo que vamos a esconder a través de environ que es el key y el debug lo cortamos y lo pegamos en el archivo .env

Creamos nuevas variables con unas pequeñas modificaciones

El nombre de la variable y la variable que es el key deben estar pegados
No copiamos ni las comillas simples ni la palabra django-insecure- incluyendo el guion medio, esto mismo hacemos con debug. Lo vemos en el siguiente ejemplo

Ahora nos dirigimos al documento setting y remplazamos las variables de la siguiente manera

De esta forma ya tenemos aseguradas nuestras variables. Adicionalmente, tienes que saber que en el archivo .ignore que generamos anteriormente ya contiene *.env para que no se suba al GitHub

Contenido en el html y css

Ahora configuraremos el index.html, css para que se muestre en el servido el contenido

Lo primero que hacemos es en index.html poner un <h1></h1> que luego lo modificaremos con css para probarlo pero antes, al inicio de la hoja de html5 debemos poner la siguinete regla {% load static %}
esto permite que el html5 carge cualquier archivo o codigo que sea llamado desde la carpeta static creadas anteriormente y para referenciar el archivo css, js o imagen lo llamamos de la siguinete manera {% static 'ubicacion' %}. No es necesario usar ./ para indicar el directorio raiz ya que esta seteado en config la ubicacion. Podemos verlo en el siguinete ejemplo

En cambio en el css no se pone nada para dar estilos asi solo le cambiaremos el color al h1

Creando vista para mostrar index.html

Guardamos los cambios y por ultimo le diremos a django que publique nuestro index.html creando una vista

Primero crearemos un archivo con el nombre views.py dentro de 'landing_page' o en el mismo nivel del setting

Cabe recalcar que solo es un archivo views.py ya que en la capture sale como ejecutado dos veces

Ahora configuraremos el views.py de la siguiente manera

ahora configuramos la url en urls.py

Ejecutando servidor django para mostrar contenido

Por ultimo hacemos todos los cambios guardando con Control + s en visual studio.
Ahora podemos correr el servidor.
En el cmd ejecutamos en la raiz python manage.py runserver, nos saldra lo siguiente

El mensaje de color rojo significa que hay migraciones pendientes de la base de datos pero si no se usan no hay problema

Para podemos ir al navegador y escribir la direccion que http que sale en la imagen o podemos hacer Control + click para en la direccion para que se nos habra en el navegador

Recuerda que podras ver la pagina siempre y cuando el servidor se este ejecutando

Para dejar de ejecutar el servidor en la consola le damos Control + c

Como podemos ver todo esta listo para hacer una landing page y usar css, javascript y usar imagenes

Notas de librerias instaladas

Es muy comun que usemos un archivo para anotar todas las librerias usadas en un proyecto para que podamos ver las versiones, y si necesitamos instalarlas de nuevo sea mas sensillo para esto
ejecutamos en el cmd el siguiente comando pip freeze > requirements.txt en la raiz principal, es decir dentro de django-template.
El comando lo que hace es hacer una lista de las librerias usadas en un documentos txt con el nombre de requirements.

Ahora si en algun momento necesitamos ejecutar todas las librerias usadas entonces usamos pip install -r requirements.txt o pip3 install -r requirements.txt

Si solo queremos saber por consola las librerias que estamos usando o estan instaladas podemos ejecutar pip freeze

En cambio se deseamos borrar alguna libreria usamos pip uninstall nombre_libreria

Asi que en este caso guardamos en el documento txt

Subir a github

Lo primero que hacemos es apagar el servidor web en caso que este encendido con Control + c

Luego en la consola de git bash hacer git add . y git commit -m "Entorno listo para probar codigo"

Antes de hacer git add . recuerda que tienes que estar en el directorio raiz es decir en django-template para que hagas un solo add y commit. En mi caso por confundirme de carpeta primero hice git add y commit a la carpeta landing-page es decir que solo hizo add y commit a todo lo que contenia esa carpeta

Ahora hare el segundo add y commit pero al directorio raiz. Igual este error puede ser una buena parctica para que elimines el commit y hagas un solo commit usando las notas de mi anterior post

Como puedes ver usando git log vemos los dos commit que realice.

Ahora crearemos un repositorio en github con el nombre django-template

una vez creado el repositorio vacio nos sale una guia para subir el repositorio

Copiamos el link http del repositorio

Ahora no posicionaremos en el directorio raiz en la consola de git bash para subir el repositorio y ejecutamos git remote add origin pegar_link con este comando añadimos el repositorio de github a nuestro git local y por ultimo git push -u origin main

Si resfrescamos el navegador en el github podemos ver que todo se ha subido correctamente

De ahora en adelante cada vez que deses subir actualizaciones a github recuerda

Corregir todos los errores antes de subirlo
hacer git add y git commit en la raiz o en la rama que deses subir
Antes del git push hacer hacer un refrescar tu respositorio local con el de github con un pull ejecutando git pull origin main si te sale already ahora si ejecutar git push origin main

Notas rápidas Git - GitHub

Oswaldo Echeverría — Thu, 16 Feb 2023 10:32:51 +0000

🏁 TABLA DE CONTENIDO 🏁

Idea de este post
Configuracion inicial
Comandos unix relevantes
Git ignore
README.md
Atajos y soluciones
Inicializar un repositorio
Manejo del staging area
Git commit
- Comandos avanzados para commit
- Comandos avanzados de sobreescritura
Git tag o Etiquetas
Git log
Ramas
Git merge o fusiones
- Algunos conflictos con merge
Git rebase
Git stash
Git clean
Git cherry pick
Git Reset y Reflog
Git grep
Comandos para lider de equipo de desarrollo o scrum
Git alias
GitHub
- Inicializar un repositorio local y en github vacio

Idea de este post

Este post está pensado para personas que les gusta aprender de una forma rápida o simplemente quieres tener como desarrollador a la mano una guía simple y sencilla de los comandos y soluciones de Git y GitHub.

Como desarrollador uso Windows, así que los comandos están enfocados a este sistema operativo.

Es una guía completa de comandos básicos y avanzados que he aprendido y usado, creo que son los más relevantes para la solución inmediata del entorno de trabajo personal y en equipo

Si te deseas que añada algun otro comando o resolviste algun problema en tu trabajo y no esta esa solucion aqui puedes enviarla con capturas de pantalla a mi correo con tus datos de contacto para agregarlas otorgandote el respectivo credito

Configuracion inicial

Comandos para saber la configuración actual de Git

git config 
git config --list | grep user
git config --list --show-origin

Comandos para configuración personal con tu usuario

git config --global user.name "Escribe aqui tu nombre"
git config --global user.email "Escribe aqui tu correo git"
git config --global core.editor notepad

Comandos unix relevantes

Todos los siguientes comandos los puedes ejecutar desde la terminal gitbash

Crear carpeta mkdir nombre_carpeta
Crear archivo touch nombre_archivo.extencion_archivo
Visualizar contenido de archivo en consola cat nombre_archivo.extencion
Editar archivo en blog de nota de Windows
notepad nombre_archivo.extencion
Ver ubicación actual pwd
Listar archivos ocultos ls -al
Limpiar consola en gitbash clear

Git ignore

Es un documento en donde nos permite ignorar una serie de archivos que por buenas practicas no deben subirse al repositorio git ni guthub ya que git esta diseñado para alojar texto plano.

¿Que no debería subir a git y github?

Passwords
Imgenes jpj, png etc
Videos
Entre otras

Como usar git ignore

Dentro de la carpeta de tu proyecto despues haber iniciado git en tu proyecto y antes de meterle codigo creas un archivo tipo ignore. Si estas en la consola de git puedes usar. touch .ignore
Editas el archivo con tu editor de texto favorito o notepad notepad .ignore y escribimos todo lo que debe ser ignorado ejemplo. Podemos escribir linea a linea
- * Para ignorar todo tipo de archivo
- *.jpg Todas las imagenes .jpg
- *.png Todas las imagenes .png
- *.svg Todas las imagenes .svg
Despues de guardar la configuracion .ignore haces commit git commit -am "Git ignore". Una ves realizado el commit ahora si metele mano al codigo

Si quieres saber mas sobre como usar git ignore puedes entrar en Github y buscar librerias oficiales y leer su .ignore para que sepas y estudies como funcionan y normalmente que se ignora en el desarrollo deacuerdo a la tecnologia que uses.

Ahora te dejare un recurso que puedes usar. Si vas a ésta página podras escribir la tecnologia que usas y te generar un archivo .ignore de guia mostrandote lo que deberias ignorar en el desarrollo.

Haremos un ejemplo de generar un .ignore para django

Ponemos en el navegador django y nos generara el archivo.

Nota:

Si eres nuevo usando git te recomiendo que desde tu primer proyecto uses git ignore ya que cuando recien comenzamos a aprender git trabajamos con imagenes para landing page svg y pngs
Si trabajas con imagenes y quieres guardarlas en tu git te invito a buscar un servidor que aloje imagenes y te de el link de ellas para que la puedas susar en tu proyecto
En caso que trabajes con imagenes locales te recomiendo disminuir su peso quitandole toda informacion meta de ella para ello podrias usar el siguiente recurso

README.md

Cuando estas empezando con git tarde o temprano entras en GitHub en donde usarás este archvivo que por recomendación debes crearlo despues del .ignore antes de meterle codigo a tu proyecto con git, entonces usa touch README.md. No te olvides de hacer commit despúes de la creación del archivo.

La ultima recomendación es a nivel de Github, cuando crees un repositorio en GitHub, crealo sin el README.md ya que cuando creas un repo te pregunta si quieres generar ese archivo.
crealo mejor tu mismo desde tu repositorio local y cuando hagas tu primer push se enviará el README.md con tu proyecto. De esta manera evitarás conflictos que para alguien nuevo es un dolor de cabeza.
Este conflicto se suele dar ya que antes de hacer push deberias hacer pull al servidor eso sirve para primero actualizar tu repositorio local con el de Github por que en realidad son dos repositorios distintos entonces si tienes el README.md en Github tendrás que resolverlo con un merge entre dos ramas distintas, borrar la rama antigua local y dejar la actual que ahora es la de github

¿Para que sirve?
Este archivo sirve para mostrar tipo documentación lo que hace tu repositorio o lo que quieras decir de tu repositorio en Github donde todo el mundo lo verá.

Para escribir en el README.md debes usar html o MARKDOWN Asi que te recomendare el siguiente recurso, aquí, tendrás un ejemplo y un editor

Atajos y soluciones

Si ingresas un commit sin mensaje y quieres salir del error usa
esc + shift + z + z
Para escribir en el editor vim esc i
Para salir de alguna venta de información como git log usamos la letra q
Ayuda de comandos git git help comando_git o
git comando_git --help.
Ver el historial de comandos usados git history.

Se desplegara una lista enumerada y ordenada con todos los comandos usados y si queremos hacer uso de alguno de ellos escribimos ! seguido del numero del comando

Inicializar un repositorio

Si no tienes creada ni la carpeta del proyecto.
Esté comando, te creará la carpeta y te iniciará el proyecto en git
git init nombre_carpeta_proyecto o si piensas que lo vas a usar en GitHub git init nombre_carpeta_proyecto -b main
En caso de que ya esté creada la carpeta del proyecto.
Dentro de la carpeta ejecutas git init y si lo vas usar con github
git init -b main

Manejo del staging area

Observar el estado de los archivos git status
Agregar un solo archivo al staging area
git add nombre_archivo.extencion
Agregar todos los archivos al staging area sin excepciones, es decir, con los que estemos trabajando, modificando o no git add .
Agregar todos los archivos con los que estamos trabajando al staging area git add -A
Sacar un archivo del staging sin que los borre del disco duro, pero git le sigue dando seguimiento
git reset HEAD nombre_archivo.extencion

Este es el comando mas usado ya que aveces solo queremos que el archivo salga de la zona de staging en un estado de untracked. Esto significa que de inmediato podras hacer git add y git commit nuevamente.

Sacar un archivo del staging area y del seguimiento de git git rm -cached nombre_archivo.extencion

Una vez que apliques este comando sacaras del repositorio de git el archivo, no lo borra del disco duro. Si quisieras hacerle un add y commit no lo encontrarias en el repositorio, tendrias que esperar hasta el proximo commit para que apareciera.

Sacar un archivo del stagig area y borrarlo de forma local
git rm -f nombre_archivo.extencion
Comprobar si un archivo fue agregado al staging area aunque parezca que no git add -n nombre_archivo.extencion
Recuperar un archivo borrado por error
git checkout -- nombre_archivo.extencion
Ver diferencias entre el estado actual y el staging git diff

Git commit

El proceso de tradicional de realizar un commit es:

Primero: Ver el estado del archivo modificado git status
segundo: Añadir archivo al stagind area 📌
git add nombre_archiv.extencion
Tercero: Hacer commit añadiendo una descripción del commit
git commit -m "Entre comillas escribe la descripcion"

Comandos avanzados para commit

Hacer commit directamente sin pasar por el staging
git commit -am "Descripcion"
Ver la diferencia de un commit con otro
Para esto necesitamos el identificador de los dos commit.
Para ver el identificador podemos usar git log

Nota: El identificador del commit es el numero alfanumerico. Este numero es muy largo pero es suficiente para identificarlo si solo usamos los primeros 5 numeros.

Luego de saber el identificador de los dos commit usamos
git diff identificador1 identificador2

Sobreescribir un commit. Este comando lo usamos inmediatamente después que hemos cometido el error. Antes de ejecutarlo corrigen el error git commit --amed -m "Descripcion"

Podemos reescribir solo la descripcion, algun error, u algo faltante.

Comandos avanzados de sobreescritura

Los siguientes comandos hay que tratarlos con cuidado porque podríamos perder código en el proceso

Nos quitará el último commit, pero los archivos los dejará preparado en el staging para un nuevo commit. Usamos git log para ver el identificado del commit y luego 📌
git reset --soft identificador
Nos quitará el último cambio y datos, no se guardarán en ningún lugar ni en el staging ni en el disco duro. Usamos git log para ver el identificado del commit y luego 📌
git reset --mixed identificador
Borra todos los commits, stagings y working hasta el punto del commit que se requiere. Usamos git log para ver el identificado del commit y luego 📌
git reset --hard identificador
Recuperar commits depues de un reset hard.
Lo primero que necesitamos es buscar el identificador de un commit seguro antes del reset hard.
Usamos git reflog o git log -g.

Una vez encontrado el commit seguro ejecutamos
git reset --hard identificador_commit_seguro

Ver un commit a través del tiempo. Sabemos que a medida que se hacen los commit se van añadiendo cambios. Entonces este comando nos ayuda a ver el estado y el contenido de un commit pasado, es decir, antes de los cambios actuales. Los cambios que se realicen no serán permanentes.

: Para ir al estado anterior del commit.
Usamos git log para ver el identificado del commit y luego
git checkout identificador nombre_archivo

: Para regresar al tiempo actual git checkout master

: Si queremos hacer permanentes los cambios que hemos hecho en
un commit pasado. Después de hacer los cambios correspondientes hacemos git add . y 📌
git commit -m "Descripcion".

Se hace un commit y los cambios seran enviados al commit
actual.

Mover un commit de rama. Este commit se lo debe ejecutar dentro de la rama donde se lo quiere mover 📌
git cherry-pick identificador_commit
Visualizar en consola los cambios de un archivo en su historia. Este comando nos permitirá observar los cambios que existe en un archivo en el actual commit con el mismo archivo pero en el commit pasado. No solo nos muestra las modificaciones entre un commit y el otro, sino también donde están los cambios en la base de datos, diferencia en peso, bytes 📌
git show nombre_archivo.extencion
Que cambios hubo entre un commit y otro
git diff identificador1 identificador2

El orden de los identificadores hara que muestre la informacion de una manera u otra.

Git tag o Etiquetas

Que es un tag

Es un nombre que puedes usar para marcar un punto relevante, estructural o especifico de tu codigo en la historia del repositorio.
Son relevantes en producción, trabajando en remoto GitHub con equipos. En GitHub se lo usa mucho para detallar versiones listas o release de un proyecto
Aunque los tags no son commit hay que enviarlos al repositorio principal

Comandos

Tags lijeras git tag nombre_tag
Tags firmado por correo `git tag -a nombre_tag -m "Descripcion"
tags formados por clave GPT del correo electronico
git tag -s nombre_tag "Descripcion"
Ver la lista de los tags git tag -l
Renombrar tag 📌
git tag -f -a nuevo_nombre_tag "Descripcion"
Borrar tag git tag -d nombre_tag

Si borras un tag y trabajas con repositorios remoto no olvides actualizar la accion git pull origin master y despues git push origin --tags

Aunque de esta manera se borro localmente aun queda en github ya que los releases o versiones listas son muy importantes asi que para evitar equivocaciones de borrado hay que borrarlo de forma especial con 📌
git push origin :ref/tags/nombre_tag

Ver el commit que pertenece a la etiqueta 📌
git show nombre_tag
Saber a que commit o hash esta vinculado un tag 📌
git show-ref --tags
Filtrar etiquetas git tag -l "patron de busqueda"

Git log

Muestra instantáneas confirmadas. Se utiliza para enumerar y filtrar el historial del proyecto, y buscar cambios particulares. El git log solo funciona en el historial comprometido en comparación con de git status que trabaja con el área de preparación o staging.

Si eres un scrum master o lider de proyecto usaras muchas configuraciones con este comando para revisar el trabajo de tus compañeros o ver como va el codigo en el dia etc. Pero para uso personal y para mi son las mas necesarias son:

Instantánea estándar git log
Muestra todas las ramas git log --all
Instantáneas abreviadas en una línea git log --pretty=online
Instantáneas gráficamente con el identificador abreviado y descripción git log --pretty=format:"%h %s" --graph
Muestra las diferencias introducidas entre cada commit con limite en las dos ultmas entradas git log -p -2

Para mas configuraciones puedes visitar la Pagina oficial

Ramas

Nota:
Si creamos una rama y no hacemos commit todo lo realizado se perdera.

Crea una rama git branch nombre_rama
Entrar en una rama diferente git checkout nombre_rama
Crear una nueva rama y entrar en ella al mismo tiempo git checkout -b nombre_rama
Listar ramas git branch -l
Listar ramas remotas | GitHub git branch -r
Listar ramas remotas GitHub y locales git branch -a
Historia de rama git show-branch --all
Elimina rama git branch -d nombre_rama
Elimina rama con commits adentro git branch -D nombre_rama
Renombrar una rama
git branch -m nombre_rama_anterior nombre_rama_nueva

Git merge o fusiones

Comenzamos con esta imagen para dar un ejemplo.
Tenemos
Rama master: Tenemos el contendio html
Rama Cabecera: Tenemos el diseño en cabecera

Queremos llevar el diseño de la rama cabecera a la rama master. Entonces guardamos commit en cabecera, nos dirigimos a la rama master git checkout master y en la rama master hacemos el merge a cabecera
git merge cabecera -m "Descripcion"

El git merge es un commit mas en el proyecto.

Para saber que ramas no han sido fucionadas aun en la rama actual
git branch --no-merged
Para saber las ramas que ya han sido fucionadas. Si las ramas se eliminaron despues del merge entonces saldra master.
git branch --merged

Algunos conflictos con merge

Si sale un mensaje de Fast-forward significa que estas haciendo un merge en la continuacion directa de la rama en la cual salio
Si no eres el primero en hacer un merge te va a pedir en tu editor para que coloques que quieres mezclar y como se va a llamar. Esto es un commit que pide confirmar los cambios, en otras palabras es una mezcla recursiva que obliga hacer un commit adicional, este se presenta en log como un commit mas a la rama principal.
Cuando e ha cambiado lineas de codigo anteriores o archivos se denomina Auto-mergin y saldrá un mensaje de CONFLICT en donde preguntará con que version se quedará. Una vez que se haya escojido u arreglado el conflicto se debe hacer un nuevo commit
Cuando una rama intenta hacer merge en un documento que ha sido modificado por dos ramas distintas eso genera un conlicto. Entonces abrimos el documento y corregiremos de forma manual una vez eso mandamos al staging y luego hacemos commit.

VisuslCode tiene ayudas para estas situaciones

Git rebase

Se usa cuando quieres que una rama no sea una rama si no mas bien que sea parte de la historia del master y no quede huella de que fue una rama.

Caracteristicas

Primero quiero decirte que git rebase es una muy mala practica usarla de forma remota por lo cual esta puesta en este post ya que si puede ser usada de forma local de algunas formas.
Es una mala practica por que reescribe la historia de los repositorios
Uno de los inconvenientes es que cuando haces rebase no queda historia, no se sabe quien hizo que cosa o que cambios y si la rama master avanzo mucho antes del rebase los problemas y conflictos seran muchos y habrá que solucionarlos de forma manual uno por uno causando retraso a todo el equipo

La unica forma en que se la puede recomendar es trabajarla de forma local en un proyecto personal o en un proyecto en equipo siempre y cuando apliques rebase y arregles los conflictos antes de enviarlo al servidor. Por ejemplo.

Supongamos que traiste localmente el codigo del proyecto de equipo para hacer tu parte que es desarrollar el script de unas funciones en el diseño y el diseño entonces el primer dia tuviste un error que no pudiste resolver, al siguinte, dia2 resulves hacer una rama para arreglar el bugfix pero seguir trabajando en la linea principal en el diseño,

terminaste el diseño en el mismo dia 2.
En el dia 3 comienzas a resolver el bugfix y lo logras, entonces tu trabajo esta terminado. Puedes hacer un merge e incorporarlo a tu linea de trabajo principal

pero no deseas que esa rama de bugfix quede en tu historial por que no ha sido algo relevante asi que haces rebase, resulves los conflictos y a la finl tu linea de trabajo quedará asi

Como si nunca hubiera habido una rama y sin huellas de que haya habido una.

Comandos

Usaremos el mismo ejemplo anterior para el codigo de acontinuación

Estando en la rama del bugfix
git rebase master
Lugo desde el master. 📌
git rebase nombre_rama_rebase_anterior
En este momento hay dos ramas que contienen lo mismo el master y en bugfix
Solucionar de forma manual los conflictos en la rama master
Por ultimo eliminar la rama bugfix
git branch -D rama_bugfix

Git stash

Sabemos que si hacemos cambios en una rama y luego cambiamos de rama sin hacer commit antes, perderemos los cambios hechos anteriormente.

Para evitarlo existe git stash. Nos permite guardar cambios temporalmente para usarlos despúes o en una nueva rama

Se usa cuando estas probando algun codigo que no merece un rebase o una nueva rama y quieres regresar rapido a tu estado anterior

Si usas un stash en una rama antes ya creada causarias muchos conflictos. Solo se recomienda usarla en una nueva rama

Comandos

Para guardar el cambio temporal git stash
Para listar stash guardados git stash list
Para ejecutar el stash guardado en una nueva rama 📌 git stash pop
Para deshacer el pop Control z
Guardar un stash en una rama nueva git stash branch nombre_rama y luego git commit -am "Descripcion"
Eliminar stash git stash drop

Git clean

Es un comando que nos ayuda a limpiar el entorno de trabajo. Ejemplo

Si tenemos archivos duplicados o archivos que no han sido utilizados, llamados entre otros

A git clean no le interesan las carpetas solo los archvivos, tampoco tomará encuenta todo lo que este en .ignore

El comando que se usa es git clean pero no se usa solo. Cuando lo quieras usar ejecuta
git clean --dry-run
Este comando te mostrara en lista una simulacion de todo lo que puede ser eliminado por clean.
Si estas satisfecho con todo lo que te muestra para borrarlo entonces ahora si ejecutas git clean -f para eliminar

Git cherry pick

Se usa cuando estamos trabajando un avance en una rama y se requiere en el master de urgencia un commit especifico de tu rama en al que estas trabajando

Pasos para ejecutar cherry pick

Hacer git checkout a la rama donde esta el commit solicitado
Hacer git log para copiar el identificador del commit solicitado.
HRegresamos al master con git checkout master y ejecutamos en el master git cherry-pich identificador_commit_solicitado

Cuando se termine lo que se estaba haciendo en la rama y se valla hacer un merge oviamente abran conflictos por que la rama master ya tiene un commit de la rama, pero esto se soluciona simplemente fixeandolo manualmente o con ayuda del editor de codigo

Su estas trabajando con Github
Cuando lo quieras enviar al servidor no olvidar primero hacer git pull origin master y ahora si git push origin master para enviarlo

GitHub nunca se enterará de los combios locales

Git Reset y Reflog

Se usa en casos de emergencia, se usa cuando hemos hechos cambios tan drasticos que queremos recuperar el punto antes de ese momento.
En regflog no se borra ningun commmit o cambio en el tiempo
si en git log no se ecuentran los cambios por que han sido eliminados de seguro en git reflog si estarán

Pasos para ejecutarlo

Ejecutamos git reflog
Nos aparecera una lista de commit incluyendo los commits borrados y los que no han sido borrados
Buscamos el ultimo commit en donde todo esta correcto o el que deseamos recuperar y copiamos su identificador o head.
Para recuperar tenemos tres opciones:

Reset soft: Te regresa a un punto donde los archivos estan preparados en el staging a la espera de un nuevo commit
git reset --soft identificador_commit
Reset mixed: Te regresa a un punto donde los archivos estan en el repositorios de git y no se ha hecho ni staging ni commit.
git reset --mixed identificador_commit
Reset hard: Te regresa a un punto donde se recuperan los archivos pero solo lo puedes ver localmente es decir git no les esta dando segumiento, tendrias que darle commit a ese estado para que la proxima vez ya git le pueda dar seguimiento en el repositorio. Este reset solo se usa cuando has hecho algo masl y quieres volver a empezar de nuevo pero quieres los archivos
git reset --hard identificador_commit

Git grep

Este comando lo usamos cuando el proyecto es muy grande y por ovia razones muchos archivos y queremos buscar algo dentro de un archivo como una sintaxis. Por ejemplo

Si queremos buscar la etiqueta

entre todos los archivos

Comandos

Buscar el archivo donde esta la palabra o etiqueta. 📌
git grep "codigo, palabra o etiqueta"
Buscar el archivo y la linea de codigo.
git grep -n "codigo, etiqueta o palabra"
Contar la cantidad de veces que una palabra aparece. 📌
git grep -c "palabra, codigo o etiqueta"
Si quiero buscar algo que no esta en el codigo sino en la historia de los commit. Por ejemplo. Cuantas veces escribi la palabra diseño en los commit o donde la palabra diseño tiene algo que ver con respecto a los commit. 📃 ✏️ 📌 git log -S "diseño"

Comandos para lider de equipo de desarrollo o scrum

Cuantos commits ha realizado cada miembro del equipo.
git short log
Mostrar las personas que han realizado ciertos commits en el equipo.
git short log
Mostrar todos los commits incluidos los eliminados
git shot log -sn --all
Mostrar todos los commits incluidos los eliminados pero que no incluya los merges o los commits fusionados.
git short log -sn --all --no-merges
Saber quien hizo que en el codigo.
git blame -c nombre_archivo
Saber quien hizo que en el codigo especificando las lineas de codigo de donde(33) hasta donde(55).
git blame nombre_archivo -L33,55

Git alias

Lo usamos para abreviar un comando largo y dificil de recordar en uno mas corto y facil de recordar y referenciado con su accion

Ejemplo:
git short log -sn --all --no-merges

Para tranformarlo en un alias usamos:

git config --global alias.nombre_nuevo "git short log -sn --all --no-merges"

GitHub

Inicializar un repositorio local y en github vacio

Crear repositorio en Github sin el archivo README.md
Crear la carpeta del proyecto y dentro de la carpeta del proyecto crear de forma manual el archivo readme o por cmd echo "# readme" >> README.md
Dentro de la carpeta del proyecto iniciamos git. 📃 ✏️
git init -b main

En caso que la rama master se llame master debemos cambiarle a main con el comando
git branch -M main.
Verificamos que todo este listo. Ejecutamos git add . y git commit -m "Inicio de proyecto"
Copiamos el link del repositorio que creamos en Github el de http ejecutamos
git remote add origin http.tulinkrepositorio
Hacemos push git push -u origin main
Puedes comprobar que tus archivo README.md esta en GitHub

Apartir de aqui cada cambio que quieras enviar

Revisalo y soluciona errores
Refrescar a tu repositorio local el Github con 📌 git pull origin main
Enviar tus actualización con git push origin main

Si estas trabajando despues con varias ramas pero deseas enviar la actualizacion de una sola rama al master en Github usa
git push -u origin main