DEV Community: fernandomatiasdv

Instalá nodemon de manera global

fernandomatiasdv — Fri, 20 Nov 2020 20:32:42 +0000

Buenas! Estaba felizmente dando el curso de backend, enseñando a correr nodemon en el desarrollo de node cuando surgió el siguiente error: "nodemon: El término 'nodemon' no se reconoce como cmdlet, función, archivo de script." Siendo que ya lo habíamos instalado localmente, como te muestro en esta imágen:

Por lo tanto vamos a correrlo de manera global:

Luego seguramente te lanzará un nuevo error: "nodemon : No se puede cargar el archivo C:\Users\Usuario\AppData\Roaming\npm\nodemon.ps1 porque la ejecución de scripts está deshabilitada en este sistema."

Y para solucionarlo andá a "windows" y buscá Windows Powershell :

Ahora correlo como administrador. Para ésto hacé un click derecho sobre el ícono de arriba y seleccioná "Ejecutar como administrador".

En el powershell vas a escribir: Set-ExecutionPolicy Unrestricted
Y enter

Ahora confirmalo con la letra "s" (sin las comillas).

Listo! Ahora te funcioan nodemon :D
Correlo desde tu app.

Intro a Flexbox.

fernandomatiasdv — Fri, 20 Nov 2020 18:59:47 +0000

Buenas! Uno de los temas mas importantes que debemos conocer a la hora de maquetar un sitio es cómo posicionar los elementos a renderizar.
Si bien hay frameworks que nos facilitan la vida con este tema la verdad es que, desde hace un par de años, CSS nos brinda la posibilidad de posicionar los elementos de manera nativa, y ésta es por medio de FlexBox.

Requisitos para leer esta documentación.

Saber qué son los divs en HTML.
Saber qué son las clases en CSS y tener un manejo del mismo.
Tener instalado algún editor de texto, en mi caso uso Visual Studio Code.

Manos a la obra!

Generá un archivo de HTML5 básico (llamado index.html) y linkealo a un archivo CSS externo (llamalo estilos.css).

Dentro del body del HTML escribí lo siguiente:

Acá creamos dos divs, al primero con la clase contenedor mientras que al div hijo con la clase caja-flexible

Luego en estilos.css vas a agregar el siguiente código:

caja_flexible renderiza un cuadrado de color turquesa del tamaño 60px * 60px. Mientras que contenedor será quien introduzca los cambios necesarios para que la caja flexible se desplace a través de la pantalla. Para establecer que el elemento sea flexible es necesario usar la propiedad display: flex.

Desplazamiento horizontal
La propiedad justify-content hará que el (o los) elemento(s) se desplacen de manera horizontal. Probemos modificando contenedor, agreguemosle lo siguiente:

justify_content: center;

Guardá y vas a ver como la caja se desplazó al centro de la pantalla.
Si querés llevarlo hacia los extremos tenés dos opciones:
flex_end
flex_start.

Probalos! Con el primero el objeto irá hacia el final de la pantalla, mientras que con el segundo lo hará hacia la izquierda (como en la posición inicial).
nota: La propiedad justify-content es relativa a la codificación de caracteres que tengamos, es decir, si el navegador detecta que utilizamos el lenguaje árabe, flex-end alineará el contenido a la izquierda mientras que flex-start lo hará a la derecha (puesto que el lenguaje arábigo se escribe de derecha a izquierda).

Desplazamiento vertical
En este desplazamiento se muestra como el objeto se desplaza de arriba hacia abajo pero antes de arrancar a probar debemos definirle una altura a nuestro contenedor. Para ésto le agregamos:

height: 650px;
background-color: tan;

Con el background-color podremos ver los limites hacia a donde podría moverse el contenido de la caja.

Y ahora si, para desplazarla tenemos la propiedad align-items, dentro de la clase contenedor:
align-items: flex-end;
Si lo queremos mover al centro reemplazamos flex-end por center y si lo queremos llevar hacia a arriba flex-start.

¿Cómo lo llevamos justo al centro de la pantalla? Combinando justify-content con align-items:

Varias cajas.

Así como nos manejamos con una caja podemos usar varias, pero para poder diferenciarlas vamos a hacer algunas modificaciones a la caja_flexible

Bien! Ahora:
Agregamos el número 1 al div que tiene la clase "caja-flexible"
creá un div más (a la misma altura del primer div) con el valor 2. También asignale la clase "caja-flexible".

Una vez agregada fijate que nos quedaron ambas cajas en el centro de la pantalla, ya que ambos tienen las propiedades de alineación horizontal y vertical centradas. Ahora vamos a aprender a cómo interactúan cuando están juntas:

Para generar el desplazamiento vertical volvemos con justify-content pero vamos a tener tres nuevas propiedades:
space-between: Va a marcar la mayor distancia entre los dos objetos.
space-around: Va a dejarle un margen izquierdo al objeto de la izquierda y un margen a la derecha del objeto de la derecha, entre medio tendrá el doble distancia de los márgenes.
space-evenly: Deja los márgenes del mismo tamaño que los del centro.

Veamos dos ejemplos, el primero con space-between:

Con space-around (las distancias no son parte del desarrollo, notá que la distancia de los márgenes es de 171 mientras que la distancia del interior es de 342):

Y finalmente con space-evenly:

Darle una orientación a los elementos.

La orientación nos dará "el órden" de los elementos.
Por defecto, si yo escribo

El orden natural sería:

Si lo analizamos horizontalmente, el 1 está a la izquierda, el 2 en el centro y el 3 a la derecha.
Si lo analizamos verticalmente, el 1 está arriba de todo, el 2 en el centro y el 3 abajo.

Ahora veremos como cambiarle el orden sin la necesidad de intercambiar el orden de los divs de manera manual.

Para empezar agregá un div como los otros dos con el contenido "3".
A nivel horizontal tendremos las tres cajas con los valores
1, 2 y 3.
Agreguemos flex-direction a la clase "contenedor". Y el valor será row-reverse.
flex-direction: row-reverse;
Ahora fijate como quedaron invertidas las cajas:
3, 2 y 1.

Así como los invertimos horizontalmente también podemos hacerlo verticalmente pero antes de ir con la instrucción debemos ver en forma de columna las cajas, para ésto utilizaremos también flex-direction con el valor column.
Cambiemos flex-direction : row-reverse por
flex-direction: column;

Veamos el resultado:

Y ahora si, si queremos ver como invertir los valores debemos usar column-reverse:
flex-direction: column-reverse;

NOTA: Recordá que podes usar justify-content y align-items para moverlos a travez de la pantalla, por ahora los estamos usando centrados a ambos pero modificalos y vas a ver cómo se desplazan los cubos por la pantalla!

Dentro de poco continuo con una serie mas avanzada de flexbox :) Hasta la próxima!!

React JS: Instalá Bootstrap.

fernandomatiasdv — Wed, 28 Oct 2020 14:33:09 +0000

Buenas! En el documento de hoy te voy a enseñar a instalar Bootstrap en tu proyecto de React JS.

Requisitos

Tener instalado node y create-react-app. Nada mas :D

A codear!

Antes que nada tené en cuenta que estamos a 28/10/2020 y tenemos la versión
Y la ésta es la documentación oficial.

Creá tu proyecto con CRA:
npx create-react-app reactjs-bootstrap

Una vez creado entramos con la consola al directorio creado.
cd reactjs-bootstrap

Ahora debemos instalar Boostrap y ReactBoostrap:
npm install bootstrap react-bootstrap

Abrí con tu editor de código y mirá el package.json. Buscá las dependencias:

Si hasta acá estuvo todo OK entonces agregá a tu archivo index.js del directorio src:

De esta forma tomamos el minificado tanto de los archivos JS como del CSS.
Es importante que agregues ambos ya que algunos componentes corren con uno de los y se complementan (Por ej, el Button trabaja con JS mientras que Navbar lo hace con CSS).

Corramos el desarrollo:
npm start

Al levantar el servidor dará este error:

Por lo que vamos a instalar jquery y popper.js (OJO!!! Es poper.js y no popper "a secas", ya que son dos paquetes diferentes):
npm install popper.js jquery

Ahora si, volvamos a levantar el servidor y vamos a ver como arranca perfectamente!

Bien, sigamos adelante: Vamos a agregar un botón.
En src/index.js escribí

Luego reemplazá <App /> por:

Debería quedarte algo como esto:

Yeah! Ya tenemos nuestro primer componente traído de RBT!!

En la próxima lección vamos a ver como implementamos SASS para customizar Bootstrap.

Diseño para programadores: Tipografía.

fernandomatiasdv — Tue, 29 Sep 2020 17:07:25 +0000

Introducción.

Buenas! Siguiendo con nuestro curso de desarrollador full stack desde cero vamos a dar las bases de diseño, no precisamente para ser diseñadores pero sí para tener una idea sobre cómo mejorar u organizar mejor nuestro trabajo.
Es común leer o escuchar "Te programo lo que quieras pero no me pidas que le agregue dos colores a la paleta porque voy muerto!".
Tomemos a esta curso que arranco como una reseña en donde podamos apalancarnos y comenzar a indagar más acerca del manejo de estilos aplicados al diseño web. Hoy nos toca hablar de la tipografia.

Tipografía.

Partamos de la base que La tipografía es el arte y la técnica de organizar las letras de forma tal que éstas sean legibles y atractivas cuando se muestran. A éstas las vamos a agrupar bajo características comunes en cuanto a caracteres, números y signos. A esta agrupación la conocemos como fuente tipográfica.

Por lo tanto, podemos afirmar que que la tipografía es el estilo o la apariencia que se le dá al texto.

Tipos de fuentes.

Serif

La familia de las SERIF esta compuesta por letras que contienen serifas. Las serifas son terminaciones artísticas aplicadas a letras, éstos suelen ser "palitos" que sobresalen de los vértices de las letras.

En este ejemplo vemos las serifas correspondientes a las letras A, G y H de la fuente Times New Roman.

Este tipo de fuentes suele usarse para "fines serios" o que requieran cierta formalidad, como pueden ser los títulos de artículos periodísticos, los logotipos de marcas consideradas de lujo o artículos para adultos mayores (les hace sentir cierto reconocimiento).

La familia serif contiene principalmenete a las siguientes fuentes: "Times New Roman", Times, Georgia, "Book Antigua", Palatino, entre otras.

Sans serif.

Viene del francés "Sin serifa". Conlleva un estilo mas estilizado, o moderno, que el serif.
Son las que usan la gran mayoría de las páginas modernas, sobretodo, porque le facilitan al espectador la lectura, volviéndola mas limpia y clara.

Hoy en día hay cientos de fuentes sans serif. Las que se suelen usar mas frecuentemente son: Roboto, Arial, "Brandon Grotesque", Avenir, Helvética, entre otras.

Buscando un nuevo target, hay muchas marcas que hicieron un re-branding de sus marcas y, en lo que respecta al diseño tipográfico, vimos ejemplos muy marcados, como por ejemplo el Banco Santander, en donde pasaron de tener una fuente Serif a una Sans Serif:

Variantes

Dentro de cada familia se pueden encontrar determinadas variantes, y se clasifican en:

Redondas

También conocidas como Romanas, las redondas son las consideradas "las letras normales": se caracteriza por mantener verticales las astas que van de arriba abajo y redondeadas sus letras cortas.
Se utiliza en textos regulares en donde participan párrafos completos, y hacen de éste un texto pontecialmente legible.

Cursivas

Dentro de nuestros códigos (los informáticos) tendemos a diferenciar el concepto de cursiva del "escrito en papel". Para nosotros, las cursivas (también conocidas como itálica o bastardilla) serán el equivalente a la redonda levemente inclinada hacia la derecha.
Lo utilizamos para resaltar frases dentro de los párrafos, subtítulos o citas. En los ultimos años se reemplazó el uso del subrayado por la cursiva, por lo cual es normal verlas en páginas actuales.

Negritas

La negrita parte de la redonda para generar el mismo tipo de fuente pero con una grueso de sus paredes mas ancha.
Al igual que la cursiva, se utiliza para resaltar una frase o un texto dentro de un párrafo, también para generar títulos.

En el ejemplo del recorte periodístico se vé claramente el uso del tipo de letra: La negrita en el título (además de la altura, o el peso, que veremos en el siguiente punto) resalta del contenido general; luego vemos una introducción al tema, resaltado con cursiva (y destacándose del resto del cuerpo de la noticia); y el el cuerpo de la nota con una letra "normal". Entre medio está el apartado con el nombre del columnista, también en negrita pero con menos peso que el título.

Jerarquía.

La jerarquía debe guiar al ojo del visitante de la página, por lo que, antes de arrancar a diseñar tu página, debes pensar en qué buscas transmitir: Qué tiene para decir tu mensaje.
En el ejemplo del recorte periodístico, se resuelve pasando de un estilo en negrita (y de mayor tamaño), a uno en cursiva para finalizar con la redonda. Y éstos van a ser nuestros tres niveles jerárquicos:

El nivel primario

Obedece a letras de gran tamaño y es lo que le DEBE llamar al lector a interesarse por el contenido. Es el anzuelo.

El nivel secundario

Son letras que se destacan por permanecer en cursiva, son mas chicas que las del nivel primario (e inclusive pueden ser del mismo tamaño que las del terciario) pero su función es agregar los detalles importantes al título y mantener cautivo al lector. Incluye elementos tales como subtítulos, citas e infografías.

El nivel terciario

Es el cuerpo principal del texto y es lo que nos dará la información que buscábamos. La letra suele ser cómoda al lector. Se utiliza una fuente serif redonda y, ocasionalmente, resaltamos el contenido con cursivas y negritas.

Esta jerarquía no solo se utiliza en artículos periodísticos, también lo podemos hacer para definirle a un usuario cómo debe manejarse dentro de nuestro sitio web.

La usabilidad será una parte importante dentro de nuestros sistemas ya que, como diseñadores del mismo, debemos guiar a los visitantes y debemos velar porque cada uno sepa qué puede hacer en cada sector de la página.

En el próximo artículo ahondaremos en temas como el párrafo y el espaciado (tanto entre líneas como entre caracteres), los márgenes, los colores y demás.
No dejes de seguirme en dev.to, en mi canal de YouTube
https://www.youtube.com/channel/UCwvDOgLF--WYsnsBTliGM2A
Y buscá mas recomendaciones, tips y, quien te dice, tu próximo laburo en Primer Empleo IT: https://www.facebook.com/groups/primerempleoit

GIT

fernandomatiasdv — Thu, 10 Sep 2020 10:50:10 +0000

Introducción

es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocid.

Tables	Are	Cool
col 3 is	right-aligned	$1600
col 2 is	centered	$12
zebra stripes	are neat	$1

Uno
Dos
Tres

GIT: Inicializar un repositorio

fernandomatiasdv — Thu, 10 Sep 2020 09:54:53 +0000

Introducción

Buenas! Y bienvenidos/as a esta nueva clase del curso de desarrollador full stack con JavaScript!

Unite a Primer Empleo IT

Tables	Are	Cool
col 3 is	right-aligned	$1600
col 2 is	centered	$12
zebra stripes	are neat	$1

Uno
Dos
Tres