WEBVTT

00:00:00.920 --> 00:00:03.360
¡Hola! Bienvenidos a un video tutorial...

00:00:03.360 --> 00:00:07.060
...sobre una algo relacionado con P5 llamado "P5-Manager".

00:00:07.200 --> 00:00:10.300
Ahora, P5-Manager fue creado por Chiun Hau You.

00:00:10.300 --> 00:00:12.520
Gracias por crear esta maravillosa herramienta,

00:00:12.520 --> 00:00:15.080
espero no le moleste que haga un video al respecto.

00:00:15.080 --> 00:00:19.940
No soy un experto en el tema y no recibo crédito de ninguna tipo por esta maravillosa herramienta llamada P5-Manager

00:00:19.940 --> 00:00:20.440


00:00:20.440 --> 00:00:23.320
Pero supe de ella y pude utilizarla en clases el otro día y verdaderamente me ayudó

00:00:23.320 --> 00:00:25.960
así que quería hacer un video para que otras personas pudieran aprender al respecto

00:00:26.380 --> 00:00:28.805
(...)

00:00:28.805 --> 00:00:30.700
Entonces, ¿Qué es P5-Manager?

00:00:30.700 --> 00:00:34.140
Seguramente ya se habrán dado cuenta de que una de las cosas que siempre hago (es un muy mal hábito)

00:00:34.320 --> 00:00:37.135
cuando quiero crear un sketch nuevo

00:00:37.135 --> 00:00:40.045
voy a p5.org, luego voy a Download

00:00:41.060 --> 00:00:43.920
entonces digo: "oh, ¿cual descargo?"

00:00:43.920 --> 00:00:47.100
"ok, voy a descargar p5.js complete" y hago clic ahí,

00:00:47.100 --> 00:00:49.480
descargo el archivo y luego lo busco,

00:00:49.480 --> 00:00:52.400
(pueden ver lo ridículamente horrible que soy)

00:00:52.400 --> 00:00:52.900


00:00:52.900 --> 00:00:57.300
¡he hecho esto 9 veces, es la novena vez que lo hago, lo mismo!

00:00:57.300 --> 00:01:00.380
Y luego simplemente lo abro

00:01:00.380 --> 00:01:03.280
y encuentro una carpeta con un ejemplo vacío

00:01:03.280 --> 00:01:06.300
y le cambio el nombre o lo copio en otra parte y ese es mi "nuevo sketch"

00:01:06.380 --> 00:01:08.260
Este no es un buen flujo de trabajo.

00:01:08.480 --> 00:01:11.200
P5-Manager es una herramienta basada en líneas de comando

00:01:11.280 --> 00:01:13.080
que puedes ejecutar desde líneas de comando.

00:01:13.080 --> 00:01:17.020
¿Qué es una línea de comando? Bueno, la hemos utilizado en algunos videos

00:01:17.020 --> 00:01:21.160
Está construido sobre algo llamado Node y tengo otro video sobre qué es Node, dejaré un link.

00:01:21.200 --> 00:01:22.995
No es necesario saber qué es Node

00:01:22.995 --> 00:01:26.055
pero sí necesitas instalar Node para utilizar esto.

00:01:26.055 --> 00:01:29.195
Entonces vas a nodejs.org, instalas Node

00:01:29.195 --> 00:01:32.015
y entonces puedes usarla.

00:01:32.020 --> 00:01:34.580
Node incluye algo llamado NPM que significa

00:01:34.580 --> 00:01:37.140
Node Package Manager (administrador de paquetes de node)

00:01:37.140 --> 00:01:40.060
que es una forma de administrar los paquetes que quieras utilizar con Node, y

00:01:40.380 --> 00:01:42.320
¿Por qué esto es relevante?

00:01:42.320 --> 00:01:45.860
Porque P5-Manager es un paquete de Node

00:01:46.520 --> 00:01:50.420
Node es un entorno de programación del lado del servidor en JavaScript

00:01:50.420 --> 00:01:53.060
Hay mucho que decir con respecto a las posibilidades que ofrece

00:01:53.060 --> 00:01:55.440
pero realmente no haremos nada con node directamente.

00:01:55.440 --> 00:01:58.020
Simplemente tenemos la suerte de que alguien se dio la molestia

00:01:58.020 --> 00:02:01.495
de hacer algo con Node llamado P5-Manager. Entonces, si instalo Node

00:02:01.495 --> 00:02:04.515
lo siguiente que puedo hacer es ir acá

00:02:04.515 --> 00:02:07.465
y puedo correr este comando. Lo que quiero decir es:

00:02:07.500 --> 00:02:10.085
"npm" (Node Package Manager),

00:02:10.085 --> 00:02:16.560
"install" porque quiero instalar algo, "-g" que es un detalle importante (aunque quizá no tanto por ahora)

00:02:16.660 --> 00:02:20.340
porque quiere decir instalar de forma global, lo que significa que no es parte de un proyecto individual,

00:02:20.340 --> 00:02:23.740
es algo que quiero utilizar siempre de ahora en adelante en mi computadora.

00:02:23.900 --> 00:02:26.120
P5-Manager es lo mío.

00:02:26.700 --> 00:02:29.080
Entonces, puedo tomar esto

00:02:29.700 --> 00:02:32.340
y puedo copiarlo

00:02:32.520 --> 00:02:38.300
luego ir acá y simplemente voy a pegarlo (pude haberlo escrito)

00:02:38.580 --> 00:02:41.680
Es posible que me arroje un error, puede ocurrirte a ti también.

00:02:41.680 --> 00:02:47.200
Esperemos que no ocurra, aunque puede ocurrir. De todas formas, sería bueno para que vean qué ocurre y como repararlo

00:02:53.160 --> 00:02:54.160


00:02:54.540 --> 00:02:55.540


00:02:58.760 --> 00:03:00.020
¡Tenemos el error!

00:03:01.580 --> 00:03:03.980
Entonces, ¿cuál es el error?

00:03:04.100 --> 00:03:06.360
El error es "permiso denegado"

00:03:06.360 --> 00:03:10.840
y esto tiene que ver con el hecho de que queremos instalarlo de forma global

00:03:10.840 --> 00:03:11.340


00:03:11.480 --> 00:03:16.160
Sí queremos instalarlo de forma global tenemos que acceder a las profundidades de la computadora,

00:03:16.160 --> 00:03:21.840
donde solo el administrador, quien sea, quizá eres tú (....) tiene permiso para acceder.

00:03:21.840 --> 00:03:22.340


00:03:22.340 --> 00:03:26.900
Debes acceder a las "entrañas" del sistema de archivos y todos esos lugares sofisticados que requieren permisos,

00:03:26.900 --> 00:03:28.320
Entonces, hay una forma

00:03:28.320 --> 00:03:28.820


00:03:29.280 --> 00:03:31.800
para tener el permiso para hacerlo

00:03:31.805 --> 00:03:35.160
y la forma de hacerlo es escribiendo "sudo" en el terminal

00:03:35.300 --> 00:03:38.820
que significa "Super User DO"

00:03:38.820 --> 00:03:49.600
"sudo npm install -g p5-manager"

00:03:49.600 --> 00:03:53.320
y ahora pedirá la contraseña,

00:03:53.440 --> 00:03:55.980
(creo que sé mi contraseña :S )

00:03:57.880 --> 00:04:06.240
Perdón por eso, (...) recordé la contraseña y ahora utilizaré el comando sudo para puedan ver como funciona.

00:04:06.240 --> 00:04:06.740


00:04:18.700 --> 00:04:21.420
De acuerdo, eso parece haber salido bien.

00:04:22.180 --> 00:04:25.440
Ahora tengo instalado -de aquí y para siempre-

00:04:25.440 --> 00:04:27.820
el P5-Manager

00:04:28.160 --> 00:04:31.520
Entonces, hay varias cosas que se pueden hacer con él (...)

00:04:32.560 --> 00:04:33.060
(...)

00:04:33.620 --> 00:04:37.260
volveremos a acá si es interesante,

00:04:37.260 --> 00:04:39.940
pero quiero mostrarles la forma más simple de utilizarlo

00:04:39.940 --> 00:04:43.020
P5-Manager te permite crear una colección de sketches

00:04:43.100 --> 00:04:45.680
y puedes subirlas a un servidor,

00:04:45.680 --> 00:04:48.580
y puedes utilizarlas como una pequeña página web

00:04:48.840 --> 00:04:52.680
con una tabla de contenidos con todas las cosas que hiciste

00:04:52.720 --> 00:04:55.000
Puedes seguir estas instrucciones para eso.

00:04:55.000 --> 00:04:58.060
(voy a bajar)

00:04:58.060 --> 00:05:02.060
Lo que voy a hacer es crear un proyecto Standalone

00:05:02.060 --> 00:05:03.000


00:05:03.000 --> 00:05:06.860
En mi caso, hago ejemplos y los pongo en diferentes lugares.

00:05:06.860 --> 00:05:09.960
Es una colección de proyectos y luego standalones individuales.

00:05:09.960 --> 00:05:17.900
Así que quiero hacer esto: (...) ahora que he instalado el paquete, puedo simplemente escribir P5 en la ventana del terminal

00:05:18.640 --> 00:05:23.960
y me va a decir "tienes instalado P5 versión 0.3.2"

00:05:23.960 --> 00:05:24.460


00:05:24.460 --> 00:05:29.920
Pero cuando quiera correr un comando específico de P5 como "p5 generate",

00:05:30.020 --> 00:05:34.800
éste creará un proyecto y luego tengo que darle algunos parámetros específicos

00:05:34.980 --> 00:05:37.480
sobre qué clase de proyecto quiero generar.

00:05:37.600 --> 00:05:40.800
Entonces, lo que quiero hacer es generar un "bundle" con un nombre en particular.

00:05:40.800 --> 00:05:41.300


00:05:41.300 --> 00:05:44.900
Y para acortar puedes simplemente escribir "p5 g -b"

00:05:44.900 --> 00:05:47.900
pero lo haré de forma literal para este video-tutorial.

00:05:47.900 --> 00:05:54.480
"p5 generate --bundle" y "codingtrain" como nombre de mi proyecto

00:05:55.000 --> 00:05:58.040
y presionaré enter

00:05:59.220 --> 00:06:05.920
Ahora que funcionó me di cuenta de que hice algo bastante terrible. Cuando abres el terminal por primera vez (en Mac)

00:06:06.300 --> 00:06:10.200
éste inicia en el directorio raíz de la computadora.

00:06:10.460 --> 00:06:13.740
y probablemente no es el lugar en el que quiero instalar mi proyecto codingtrain,

00:06:13.740 --> 00:06:19.140
así que (esto está un poco fuera de nuestro tema), puedo cambiar de carpeta

00:06:19.240 --> 00:06:22.120
"cd Documents/" porque lo que de verdad quiero es estar en la carpeta documentos,

00:06:22.120 --> 00:06:22.620


00:06:22.620 --> 00:06:26.540
y puedo crear una carpeta llamada "p5 projects", que ya existe ahí,

00:06:26.540 --> 00:06:27.200


00:06:27.200 --> 00:06:35.180
y ahora "cd p5_projects/" y puedo correr el comando una vez más para que funcione bien.

00:06:36.040 --> 00:06:41.420
Pueden ver que creó esos proyectos, puedo volver al Finder, voy a p5 projects

00:06:41.520 --> 00:06:42.020


00:06:42.020 --> 00:06:43.320
y vean lo que tengo:

00:06:43.320 --> 00:06:47.940
Tengo esta carpeta llamada "codingtrain" que en verdad es solo un proyecto

00:06:48.100 --> 00:06:56.860
el que incluye un archivo HTML, un sketch.js (...) y la carpeta "libraries" con la librería P5.

00:06:57.180 --> 00:07:00.620
Entonces, así es como se crea un proyecto P5 individual.

00:07:00.800 --> 00:07:04.080
Puedo hacer esto cada vez que quiera de ahora en adelante, en mis futuros videos.

00:07:04.080 --> 00:07:04.580


00:07:04.620 --> 00:07:06.940
y puedo editar y trabajar en ellos de esta forma

00:07:07.500 --> 00:07:12.220
y siempre tendré la versión más actualizada de la librería P5

00:07:12.220 --> 00:07:12.720


00:07:12.720 --> 00:07:18.400
y los invito a explorar, también, la colección (.......)

00:07:18.400 --> 00:07:18.860


00:07:18.860 --> 00:07:20.635


00:07:20.640 --> 00:07:23.780
(...)

00:07:25.260 --> 00:07:28.960
Entonces, gracias por ver este video sobre P5-Manager

00:07:28.960 --> 00:07:29.460


00:07:29.460 --> 00:07:34.520
Espero haya sido de ayuda. Espero verlos en un futuro video o quizá ustedes me vean usar el P5-Manager.

00:07:34.520 --> 00:07:36.620
¡Muchas gracias !