YT YouTube2Text

YouTube2Text → Transcripts → Excalidraw, Mi Herramienta para hacer Bozquejos y diseños rápidos

Excalidraw, Mi Herramienta para hacer Bozquejos y diseños rápidos — Transcript

by Fazt · 5,080 words · 737 segments · language en · Watch on YouTube

Open in transcriber Summarize with AI Download SRT/VTT

Full transcript

0:00en estas últimas semanas como está
0:01actualizando varios cursos en casi todos
0:03está usando una nueva herramienta
0:05gráfica y muchos de ustedes me han
0:07estado preguntando de esto así que en
0:08este vídeo les mostraré de qué se trata
0:10esta herramienta y qué es lo que ofrece
0:11la herramienta de la que les estoy
0:13hablando es calidro
0:16cuando trato de explicar algún concepto
0:18siempre trato de añadirle algún recurso
0:20visual con el fin de que me escucha
0:21puede entenderlo mejor o más fácilmente
0:23y esto en código es muy necesario porque
0:26muchos temas son puramente abstractos
0:28como algoritmos redes y herramientas de
0:30software en general Así que es cálido es
0:32una pizarra online que te permite hacer
0:34dibujos trazos diagramas mockups y
0:36básicamente cualquier tipo de gráfico y
0:38lo genial es que como es tan solo un
0:40sitio web si visitas scarleydrop.com ya
0:42puedes utilizar al instante además
0:44puedes importar gráficos de otras
0:45personas y finalmente puedes exportar tu
0:48gráfico como una imagen o guardarlo como
0:50un archivo con extensión puntos cálido y
0:52ya luego puedes volver a importarlo esta
0:54herramienta me viene bastante bien
0:55porque me permite dibujar rápidamente
0:57mis ideas Y mostrárselas en lugar de
0:59pasar bastante tiempo creando
1:00animaciones o simplemente mencionándoles
1:03el término Ok entonces qué podemos hacer
1:05con escalerador bueno entre las cosas
1:07más básicas y lo más obvio es que
1:09podemos Añadir elementos dentro del
1:10Lienzo si nosotros entramos a
1:12escalibro.com nosotros vamos a ver por
1:14lo general un Lienzo en blanco aunque
1:15también está en su versión Dark o
1:17versión oscura ahora nosotros podemos
1:18Añadir aquí gracias a este panel
1:20superior los elementos Como por ejemplo
1:22recuadros en círculos flechas texto por
1:25darles un ejemplo si yo doy un clic aquí
1:27en esta etiqueta a puedo venir aquí
1:29puedo decirlo por ejemplo Hola mundo y
1:31esto añade un texto dentro del Lienzo
1:32ahora cada vez que yo doy un clic yo
1:34simplemente selecciono donde quiero
1:35Añadir el texto y esto se añade luego
1:37también puedo colocarlos dentro de
1:38recuadros lo que me permite hacer como
1:40dibujos rápidos o también puede utilizar
1:42esta forma que es un rombo o utilizar
1:44también un círculo ahora lo interesante
1:46de porque lo uso tanto es que cuando yo
1:48hago estos trazos por lo general utilizo
1:49estas flechas para poder unir y poder
1:51mostrarles como un concepto está Unido
1:53con otro aquí nosotros podemos poder
1:55copiarlos podemos volver hacia atrás Es
1:57decir supongamos que nosotros movimos
1:58este Lienzo y yo quiero volver hacia
2:00atrás voy a presionar control Z y vuelvo
2:02o puedo seleccionar todos estos
2:03elementos como si fueran una especie de
2:05dibujo o archivos y puedo seleccionarlos
2:08y moverlos ahora Estas son las bases
2:09otra cosa que también permite hacer es
2:11que nos permite importar imágenes por
2:12ejemplo aquí tenemos un icono y si doy
2:14un clic Esto me permite Llamar una
2:15imagen desde mi carpeta por ejemplo
2:17puedo colocar una imagen de aquí y luego
2:19me dicen dónde quiero insertarlo
2:20entonces doy un clic y esto se añade
2:21dentro del Lienzo otra cosa que también
2:23podemos hacer en escalero es que si lo
2:25notan aquí en la parte superior cada uno
2:27de estos dibujos tienen como un número
2:28estos dos números significa que yo puedo
2:30acceder rápidamente estos elementos
2:32presionando eso en mi teclado por
2:34ejemplo Supongo que quiero el círculo
2:35presiono 4 y pueden ver que cambia el
2:38cursor y bueno supongamos Aquí yo quiero
2:40el círculo simplemente doy un clic Y
2:41extiendo hasta qué tamaño Quiero el
2:43círculo o puedo presionar dos y creo
2:45también un recuadro o presionar la tecla
2:477 y puedo colocar este lápiz que ven
2:50aquí y bueno con esto también podrían
2:51hacer trazos digamos un poco más libres
2:53como si fuera una especie de Lápiz
2:56típico eso les vendría bastante bien si
2:57ustedes tienen una tableta de dibujo por
2:59ejemplo y bueno al final esta aplicación
3:01también funciona desde móvil Así que
3:03también podrían probarlo Desde allí
3:04ahora si nuestro Lienzo va creciendo lo
3:06que podemos hacer es que podemos
3:07alejarnos por ejemplo aquí en la parte
3:09inferior izquierda nosotros tenemos
3:11estos botones que me permiten hacer zoom
3:13zoom es un out es decir acercarme y
3:17alejarme Entonces por ejemplo yo puedo
3:18dar en zoom out y pueden ver que me
3:20alejo del Lienzo y puedo seguir haciendo
3:22trazos o puedo seguir dibujando ahora el
3:24estar viniendo aquí y alejándose es un
3:26poco incómodo Así que lo que yo hago es
3:28presionar control y con la rueda del
3:30Ratón puedo acercarme o alejarme otra
3:32cosa es que si ustedes dan por ejemplo
3:33un zoom demasiado cerca y ustedes
3:35quieren Navegar pueden presionar Las
3:37ruedas del Ratón y pueden moverse
3:39alrededor del Lienzo esto le da mucha
3:41más libertad de moverse fácilmente ahora
3:43si están en un laptop Por ejemplo y no
3:45pueden moverse con la rueda del Ratón
3:47porque no existe pueden mantener
3:48presionado la barra espaciadora y a
3:50partir de allí se mueven es decir
3:51simplemente presionan un clic y se van
3:53moviendo de nuevo es manteniendo la
3:55barra espaciador del teclado y luego
3:56dando un clic hacia donde quiere moverse
3:58entonces Esta es otra forma también de
3:59Navegar desde un laptop otra cosa
4:00bastante Útil es que como esto está
4:02manejándose directamente desde su
4:04cliente decir desde el navegador si
4:06ustedes refrescan la página o por
4:08ejemplo por algún motivo refrescan la
4:10página quizás porque se cerró o
4:12presionaron alguna combinación de tecla
4:13Esto va a seguir almacenando los
4:15gráficos que han hecho Entonces esto le
4:17va a dar la facilidad de no preocuparse
4:19si refresca en la página y si hay dos
4:21todo el trabajo otra cosa que también se
4:22puede hacer con esto es que si ustedes
4:24quieren utilizarlo para hacer por
4:25ejemplo mockups o wireframe y no tan
4:28solo hacer dibujos sencillos pueden
4:30hacer algo como esto por ejemplo ustedes
4:31pueden simplemente utilizando los
4:33recuadros que hay aquí crear como un
4:35pequeño mockup sencillo del sitio que
4:37quieren diseñar por darles una idea y a
4:39partir de aquí si van uno a uno puede
4:41ser incómodo Así que lo que pueden hacer
4:43es seleccionar el elemento presionan
4:45control c control v y pueden ir
4:46copiandolo ahora esto también funciona
4:48para múltiples elementos pueden
4:49seleccionar varios por ejemplo y pueden
4:51darle control C de control v y se copia
4:53todo el bloque Entonces esto le da más
4:55facilidad de poder avanzar rápido con el
4:57dibujo ahora aparte de esto supongamos
4:59que usted diciendo que quiero crear
5:00varios de estos trazos pueden
5:02seleccionarlos todos pueden alejarse un
5:04poco seleccionan todo lo pegan y hacen
5:06otro gráfico al lado el asunto es que
5:09probablemente se va desacomodar si van a
5:12copiar esto varias veces entonces una
5:13forma que pueden hacer bastante útil
5:15aquí en escala ustedes pueden agruparlo
5:17como en herramientas típicas de dibujo
5:20por ejemplo pueden seleccionar todos
5:21estos elementos dar un clic derecho aquí
5:23y pueden ver que aparece una especie de
5:25menú y poniéndole aquí donde dice Group
5:27selección y da un clic y ahora todo este
5:29gráfico es uno solo Entonces ahora
5:31simplemente selecciono cualquier parte y
5:33pueden copiar las cuantas veces quieran
5:35por ejemplo Unas cuatro veces y de esta
5:37forma tengo el mismo gráfico y bueno al
5:39final lo he creado a partir de uno solo
5:41otra cosa es que también pueden eliminar
5:43pueden presionar por ejemplo simplemente
5:45la tecla de Back space y Esto va a
5:47quitarlos o pueden también darle en
5:49suprimir o delite y esto también va a
5:51quitar el elemento y bueno esa es una
5:53forma digamos más rápida aunque también
5:54hay un icono aquí que dice y Race que es
5:57el borrador da un clic y esto lo quita
5:58Entonces ustedes colocan el elemento que
6:00quieren quitar de pantalla y bueno al
6:02final es una opción yo no lo uso tanto
6:04de esa forma porque utilizo más el
6:06teclado entonces por eso que les comento
6:08los atajos también ahora otra opción que
6:10quizás han visto es que cuando yo creo
6:12un elemento supongamos que crear este
6:13elemento de aquí y quiero cambiar los
6:15trazos o quiero cambiar como luce un
6:17elemento yo puedo venir aquí por ejemplo
6:19y pueden ver que hay opciones
6:20relacionadas con este elemento que tengo
6:21seleccionado el primero es el stroke que
6:24es como el trazo es decir que color
6:26Quiero el trazo por ejemplo le colocó un
6:28azul y pueden ver que todo esto cambia a
6:30ese color o le digo Ok también quiero un
6:31background entonces puedo venir y
6:33seleccionablemente le digo Aquí en
6:34background doy un clic le digo que
6:36quiero que todo esto sea de un color
6:37azul por ejemplo o lo mismo con este le
6:39digo que este yo quiero que sea de color
6:41celeste por allí y luego le digo que
6:43quiero que todo el fondo sea de un color
6:44amarillo por ejemplo o bueno un naranja
6:46si ustedes quieren colocar su grupo
6:48colores también pueden hacerlo aquí por
6:49ejemplo si coloca un fff de todo de
6:53todos los colores Ahora aquí le está
6:54colocando simplemente un color oscuro y
6:56no está respetando lo que le estoy
6:57colocando aquí porque está invirtiendo
6:59los colores Entonces en este caso voy a
7:00probar con otro color por ejemplo 30 30
7:0130 y pueden ver que allí sí funciona
7:04ahora si yo le quito el color light
7:07pueden ver que allí se queda solamente
7:08es el asunto con los colores blanco y
7:10negro aparte de esto cuando nosotros por
7:12ejemplo queremos cambiar el trazo
7:14supongamos que decimos ok está bien que
7:16sea este trazo pero quiero que luzca eh
7:19Como un recuadro sólido no así con estos
7:21esta especie de textura que le añade
7:23escalerador puedo venir aquí le digo que
7:26el rellenado quiero que sea con este
7:27tipo de llenado es así como marcado en
7:31ambos trazos como en x o le puede decir
7:33que es color completo o si en todo caso
7:36voy a cambiar de color le digo que
7:37supongamos le digo este trazo yo quiero
7:40que al final se note lo que hay adentro
7:42entonces voy a colocar el estrobo en
7:44blanco Ahí se nota mucho mejor y aquí le
7:46voy a decir que es un color sólido
7:48también entonces aquí lo puedo colocar
7:49en nuestro y pueden ver que las líneas
7:51también se marcan mucho mejor o también
7:53puedo darles alguna especie de puntos o
7:55también puedo hacer que se note como si
7:56fuera una especie de dibujo a mano Es
7:58decir puedo colocar ese tipo de trazos
8:00marcados que al final permiten dar la
8:03idea de que es tan solo a lo que se ha
8:05creado en el momento también puedo
8:07colocarle bordes por ejemplo que en este
8:09caso lo colocaría de este modo este
8:10gráfico Pero bueno al final es tan solo
8:12unas cuantas opciones luego en esta
8:14parte inferior pueden ver que como una
8:16especie de imágenes una encima de otra
8:18yo simplemente cuando hay elementos por
8:20ejemplo en este caso el elemento está
8:22encima Pero supongamos que yo quiero que
8:24este aparezca atrás del otro entonces
8:25puedo venir aquí donde
8:27dice doy un clic esto lo envía hacia
8:29atrás como pueden ver es decir ahora
8:31este está adelante del otro elemento o
8:33si hay más por ejemplo si copio varias
8:35veces esto Ok Tengo cuatro elementos Ok
8:38Voy a cambiarles de color Entonces por
8:40ejemplo yo tengo este elemento que es
8:41ese color verde y este otro que va a ser
8:44un color rosa por ejemplo Entonces
8:46quiero que el rosa esté encima de todos
8:48entonces puedo venir aquí directamente
8:49en este primer icono y me dice traer
8:51adelante Ok Brain Forward si doy clic
8:54esto lo que va a hacer es que delante de
8:56todos está ahora esto solamente que no
8:58se le nota porque tiene un color sólido
8:59pero pueden ver que está delante de
9:00todos Ahora el verde por ejemplo yo le
9:03digo Ok ese quiero que esté al fondo de
9:04todos entonces vengo aquí en donde dice
9:06Send Back y esto lo va a enviar al fondo
9:08de todos Ok pueden verlo allí y Bueno
9:10aquí tan solamente este como es
9:12transparente no se nota pero pueden ver
9:13que ahora los tengo en el orden que
9:15quiero Ok entonces de esta forma yo
9:17puedo luego crear un gráfico un poco más
9:18avanzado Y utilizando flechas puedes
9:20decir Ok esto al final esta flecha de
9:22aquí también quiero que tenga un otro
9:24tamaño un stroke más amplio y bueno
9:25puedo mover le digo que y este es un
9:27cero por ejemplo Supongo que es aquí
9:30coloco un texto 0 y aquí le digo que
9:32arriba de todo esto es 100% supongamos
9:35Entonces al final es tan solo para que
9:38ustedes puedan crear un gráfico sencillo
9:39rápidamente y de esta forma como yo creo
9:42al final las explicaciones en muchos de
9:44mis cursos ahora a partir de aquí ya
9:46simplemente probar lo que hace es
9:47bastante intuitivo realmente lo que le
9:49estoy mencionando es algo que fácilmente
9:51lo pude haber visto en unos cuantos
9:53minutos y Bueno aparte de esto a lo que
9:55él no les he comentado Es que yo lo
9:56utilizo en inglés pero si ustedes lo
9:58quieren utilizar en español también aquí
10:00hay como una pestaña que dice inglés da
10:01un clic y pueden ver que también está
10:03disponible en otros idiomas entonces en
10:06nuestro caso pueden buscar aquí donde
10:07dice español y pueden ver que todas las
10:09herramientas también están traducidas si
10:12tienen problemas con el inglés ahora
10:13otra cosa que también es Útil es que si
10:17ustedes vienen aquí al lado del idioma
10:18pueden ver que aparece como un icono de
10:20duda de un clic Y usted le da como un
10:22shift de todos los
10:24atajos que tienen ahí dentro del Lienzo
10:26Entonces por ejemplo supongamos que
10:28ustedes no recuerdan algo bueno pueden
10:30dar un clic allí y pueden ver
10:31directamente todos los atajos por
10:33ejemplo aquí pueden ver que para Añadir
10:35un texto simplemente presiona la tecla t
10:37y Esto va inmediatamente Añadir un texto
10:39Entonces miren vengo aquí en Alianza le
10:41digo t y pueden ver que ya está marcado
10:42aquí este icono entonces doy un clic
10:44simplemente le digo que y esto se va a
10:46llamar web design por ejemplo por darles
10:49una idea OK ahora aparece bastante
10:51pequeño porque porque estoy alejado De
10:53hecho si ustedes Ven aquí estoy en un
10:56zoom de 34% es decir no es el zoom
10:58típico o el zoom establecido voy a dar
11:00al 100% simplemente dando click y este
11:02es el tamaño normal entonces
11:03probablemente ustedes dirán Ok eso está
11:05demasiado grande vamos a seleccionarlo
11:07todo y vamos a disminuirlo Entonces
11:09vamos a seleccionar todos los elementos
11:10Ok bueno el título no solo los dibujos y
11:14los números y simplemente seleccionar
11:16todo y voy a reducir el tamaño Ok
11:18entonces voy a colocarlo Aquí le voy a
11:20dar Ok vuelve al 100% y esto sería el
11:22tamaño real más o menos voy a disminuir
11:23un poco más incluso OK Vamos a darle
11:26Ahora sí 100% y bueno este sería el
11:28tamaño normal es por eso que el texto
11:29aparece así listo entonces a partir de
11:32aquí ustedes pueden cambiar también el
11:33texto Pueden decir lo que quiero que sea
11:35un texto mucho más grande puedo pueden
11:37colocar también un tipo de fuente pueden
11:39variarlo un poco no es que le permite
11:41colocar su propia fuente pero de esta
11:43forma pueden también cambiarlo ahora por
11:46lo general le coloca esta fuente tipo
11:47como si fuera una especie de escritura a
11:49mano y luego también pueden cambiar la
11:51alineación esto es si han escrito varios
11:53textos porque bueno Esto no es tan solo
11:54para escribir un texto sencillo sino que
11:56también pueden crear una lista por
11:57ejemplo Pueden decir aquí
11:59Esta es una lista y pueden colocar aquí
12:02un asterisco por ejemplo que diga uno
12:04solo
12:06que diga tres otros tres hijos que diga
12:08tres Y de esa forma pueden ver que aquí
12:10yo quisiera alinearlos entonces
12:12simplemente le digo que la línea te a la
12:13derecha o la izquierda y de esa forma yo
12:15puedo mover también esos elementos
12:17Entonces es bastante útil también en ese
12:18aspecto ahora si por algún motivo basada
12:21en tu diseño tú quieres que el color del
12:22fondo cambie también puedes hacerlo si
12:25ven aquí en la parte izquierda superior
12:26tienen como unos cuantas opciones por
12:28ejemplo aquí pueden ver que dice fff
12:31porque es un color blanco inicialmente
12:32es decir el color original es de esta
12:33forma pero si ustedes quieren cambiar se
12:36lo pueden colocarle por ejemplo 0 0 0 y
12:38todo cambia a negro o pueden colocarle
12:40un 2020 o el color que quieran por
12:42ejemplo supongamos 60 60 Ok y bueno de
12:45esta forma también pueden cambiar
12:46Alianza en mi caso yo prefiero el color
12:49típico el blanco y simplemente le dejo
12:51con su color oscuro o su invertido y
12:53bueno otra cosa que también hace esto es
12:55que si ustedes vienen aquí en la parte
12:56al lado donde están estas opciones
12:58ustedes pueden ver esta opción que dice
13:00como un librito da un clic Y esta es la
13:02biblioteca esta biblioteca es para que
13:04ustedes puedan importar imágenes de
13:06otros usuarios por darles una idea vamos
13:09a venir aquí Esto va a abrir una pestaña
13:10nueva de nuestro navegador y pueden ver
13:12que aquí dice scale drow librarys y
13:14Bueno aquí ustedes van una lista de
13:16gráficos que vienen por parte de otros
13:18usuarios y pueden importarlos
13:19rápidamente ahora estos gráficos cumplen
13:22con una especie de diseño es decir todos
13:24son como esta idea de que están escritos
13:26a mano entonces pongamos que yo quiero
13:27colocar un check y una x yo no tengo que
13:29crearlo desde cero entonces voy a darle
13:31Añadir escalero y pueden ver que ahora
13:33tengo esto y panel aquí al lado y aquí
13:36están las imágenes puedo arrastrarla
13:37directamente y puedo extenderla Ok y
13:40puede utilizarlo aquí o por ejemplo abro
13:42nuevamente la biblioteca y puedo
13:43utilizar este otro también entonces
13:45inmediatamente puedo hacer uso de esos
13:47gráficos otra cosa por ejemplo que yo
13:49hago con esto es que si yo vengo aquí le
13:50doy explorar biblioteca nuevamente y
13:52vengo yo uso bastante este gráfico de
13:55aquí que son básicamente de base de
13:57datos que está al inicio que vendría a
13:59hacer esto de aquí le doy aquí por
14:00ejemplo Añadir scalidro y aquí ustedes
14:03pueden tener también iconos como de base
14:04de datos y demás ahora como esto estaba
14:07siendo utilizado también por muchos
14:08desarrolladores a ver iconos que están
14:10dedicados a tecnologías como engines
14:12covernetes postres por ejemplo
14:15servidores que hay computadores y así de
14:18hecho esta herramienta no está dedicado
14:19tan solo a desarrolladores hay muchos
14:21otros usuarios que desarrollan yo hay
14:23también con esto pero bueno Esto es una
14:25herramienta Digamos como más abierta
14:27puedes desarrollar distinto tipo de
14:28gráficos por ejemplo aquí también hay
14:30algunos gráficos o iconos de tipología
14:32de red entonces pueden añadirlos y
14:34también pueden crear una mini estructura
14:36de red basada en este tipo de gráficos
14:38de hecho esto de Aquí estos gráficos de
14:41red son los que sale en su página
14:42principal que pueden verlo aquí donde
14:44dice introduciendo escaley droplash o
14:47scalidro más pueden dar un clic o un
14:49control será una pestaña nueva y pueden
14:52ver que lo que tenemos aquí es un
14:53landing page de esta herramienta ahora
14:55que es escala hidroplash escala
14:57hidroplas es digamos la versión Premium
14:59de esta herramienta Es decir la
15:00herramienta Es Open source es gratuita
15:01que ustedes pueden usarlo directamente
15:03sin tener que pagar nada pero tiene otra
15:05versión que le permite crear una cuenta
15:07y poder manejar allí sus espacios de
15:10trabajo ahorita se los voy a mostrar
15:12pero tan solo para darles una idea este
15:14gráfico de
15:15en este caso que les he mostrado de red
15:17pueden ver que aquí se puede crear este
15:19tipo de gráficos Sencillamente y bueno
15:21inmediatamente ustedes pueden darle una
15:23idea a quizás a su cliente o a la
15:25persona que están enseñando o quizás en
15:27una reunión si tienen que explicar algo
15:28pueden utilizarlo rápidamente volviendo
15:30Lienzo como guardamos Esto bueno para
15:32guardar esto supongamos que ustedes ya
15:34trabajaron y quieren convertirla una
15:36imagen es bastante fácil ustedes vienen
15:38aquí en la parte superior izquierda y
15:40van a poder ver a estos tres botones que
15:41dice cargar para poder importar un
15:43archivo pueden exportar o pueden en este
15:46caso guardarlo como imagen la más simple
15:48es esta guardarla como imagen dalen aquí
15:50y pueden ver que aquí está su imagen
15:52convertida todo su Lienzo como pueden
15:54ver el Lienzo no tiene como un tamaño
15:55definido esto quiere decir que ustedes
15:57deciden qué tamaño es necesario para su
16:00gráfico Ahora aquí lo da en su versión
16:03Lite yo no quiero esta versión entonces
16:04pueden venir aquí donde está este icono
16:06y pueden cambiarlo su versión oscura
16:07Entonces tal cual lo hemos visto en
16:09nuestro Lienzo luego también pueden
16:11escalar la imagen decir pueden colocarle
16:12el doble su tamaño o el triple su tamaño
16:14ok puede darle el tamaño normal y
16:17finalmente pueden decidir si quieren
16:18guardarlo en png svg o quieren copiarlo
16:20el portapapeles es decir si quieren
16:22volver a pegarlo en otro Lienzo Por
16:23ejemplo si yo le doy en copiar el
16:25portapapeles que puede ser una opción da
16:27un clic y se abre una pestaña nueva y
16:28buscan excalid y entra nuevamente desde
16:31otro desde otro Lienzo por ejemplo
16:33obviamente este Lienzo está en blanco
16:35Pero simplemente control v y ahí está
16:37todo su gráfico OK ahora lo estaba
16:39copiando como una imagen entera ok En
16:41este caso y bueno es una opción pero
16:44también es una opción mucho mejor
16:46guardarlo como un png y pueden ver que
16:48aquí aparece una imagen Ok si doy un
16:49doble clic vamos a ver que la imagen
16:51también está disponible desde mi
16:52computadora Entonces ya pueden guardarlo
16:53donde ustedes quieran subirlo a imágenes
16:55en Twitter o en donde quieran realmente
16:57luego también lo mismo con el svg si dan
16:59un clic este va a crear un archivo svg
17:01en su computadora aquí está y bueno
17:03pueden importarlo nuevamente Ok si le
17:05importan aquí dentro de una de un
17:07navegador pueden ver que allí está como
17:08un svg típico ahora Estas son las
17:10características básicas y bueno la
17:12última sería que ustedes si no lo
17:13quieren guardar como una imagen sino
17:15volver a editarlo luego pueden venir
17:17aquí donde dice en este caso exportar da
17:21un clic y aquí les da varias opciones la
17:22opción típica es guardarlo en disco como
17:24un enlace o escalerador en la opción que
17:27ustedes escogerían sería guardar en
17:28disco esto les va a crear un archivo
17:29para que puedan editarlo luego pueden
17:31darle en guardar archivos pueden
17:32seleccionar al escritorio y pueden
17:33colocarle un nombre por ejemplo le digo
17:35mi gráfico y pueden ver aquí le va a
17:37Añadir con una extensión llamada
17:38escalero que va a ser punto escalero
17:40vamos a engordar y vamos a ver que aquí
17:42se crea un archivo nuevo pueden ver Ok
17:44que sea mi gráfico punto escala Drop
17:46Entonces yo le digo OK Vamos a abrir una
17:47nueva ventana que se llama escalibro
17:49escaladro.com y aquí yo puedo importar
17:52el gráfico puedo venir en esta primera
17:53opción que sería cargar y si vengo mi
17:55escritorio simplemente Busco el archivo
17:57que sería mi gráfico scary Drop doy un
17:59clic y pueden ver que ya está todo el
18:00gráfico nuevamente para que yo pueda
18:01continuar editándolo ahora muy aparte de
18:03la web también es calidad tiene una
18:05extensión para visual Studio code esto
18:07no lo he utilizado mucho pero también es
18:09otra opción que se ha implementado hace
18:10poco entonces puede medir aquí en
18:12extensiones en visual Studio code y
18:13pueden buscar por scary y van a llegar
18:16en esta extensión de aquí y lo que les
18:18ofrece esta extensión es que si ustedes
18:20por ejemplo lo instalan van a poder
18:22empezar a crear o van a poder importar
18:25archivos que han creado dentro de
18:27escaladro.com es decir la versión web
18:29para entre las cosas que pueden hacer
18:30por darles una idea es que si ustedes
18:32vienen ahora en su editor de visual
18:34Studio code aquí por ejemplo yo tengo
18:36una carpeta abierta Pero puede ser un
18:37proyecto simplemente voy a colocar el
18:39archivo de escalibro Y si doy un clic
18:40esto lo que va a hacer es que va a
18:42intentar abrirlo con esa extensión Ok
18:45Probablemente van a tener que cerrar y
18:47volver a abrir el editor Pero bueno una
18:48vez lo abren van a ver su dibujo
18:50nuevamente allí dentro de en este caso
18:52de visual Studio code y bueno sería
18:55Exactamente lo mismo por ejemplo si
18:56ustedes vienen aquí le dicen Ok vamos a
18:58volver a mover esto y supongamos que
19:01añaden algo nuevo un trazo o algo por el
19:04estilo De hecho voy a colocar aquí un
19:05texto que diga algo nuevo y simplemente
19:08si Tratamos de guardarlo puedo venir
19:10aquí le digo OK Vamos a exportarlo
19:12nuevamente Okay guardar como imagen o
19:14también puedo darle aquí donde se
19:16exporta y le digo guardar en un archivo
19:18en el mismo archivo le doy say to file y
19:20puedo guardar en la misma carpeta le
19:21llamo por ejemplo gráfico dos por
19:23ejemplo guardar y aparece el segundo
19:25gráfico Entonces ahora tengo dos
19:27archivos y de esta forma bueno puedo
19:29guardarlo o simplemente puedo presionar
19:31control S Y ya se guarda el cambio
19:32entonces tengo los dos archivos y al
19:35final los dos Me pueden mostrar lo mismo
19:37entonces es bastante útil también el
19:39poder utilizarlo de esta forma porque al
19:40final Yo también voy a poderlo subir
19:42esto a github y voy a poder luego
19:45importarlo clonarlo y puedo continuar
19:47con el diseño entonces también es otra
19:49forma de poder continuar con esto Ok y
19:51lo último es probar esta versión que es
19:53scale hidroplast que vendría a ser como
19:54la versión pro de este servicio y bueno
19:57ustedes pueden darse a basto con la
19:59versión gratuita realmente pero cuando
20:01pagan por la versión Pro que tiene un
20:03trial de dos semanas creo luego pueden
20:06obtener acceso a crearse una cuenta
20:08dentro de Scary Drop y pueden guardar en
20:10múltiples espacio de trabajos organizar
20:12sus espacios de trabajo sus dibujos por
20:15Bueno yo aquí tengo varios que utilizo
20:17en streaming o lo utilizo aquí para los
20:19cursos Entonces por ejemplo este es el
20:21último en el curso de Django ya
20:23utilizado este tipo de gráficos y puedo
20:25entrar rápidamente y pueden ver que aquí
20:27están los gráficos que ya había hecho
20:29previamente entonces puedo continuar
20:30editándolos o los usos realmente cada
20:33forma de explicación ahora muy aparte de
20:35esto ustedes pueden Navegar y
20:36organizarlos aquí en espacios de
20:37trabajos Ok pueden darle aquí donde dice
20:39colección y crear una colección nueva
20:41con el nombre que quieran o pueden crear
20:43digamos pueden importar escenas que ya
20:45han guardado con un punto escala de draw
20:47o crear una escena nueva otra cosa que
20:48también pueden hacer es crear escenas
20:50directamente el asunto es que como
20:53pueden ver el servicio a veces lanza
20:54errores Así que personalmente no los
20:57recomiendo que paguen por el servicio
20:58Plus yo le he pagado por un año Bueno en
21:01realidad a veces funciona a veces no
21:03Entonces no es un servicio que sea
21:05infalible enviado soportes y demás Pero
21:07bueno me dicen que hay errores quizás
21:09porque está migrando desde fire veis a
21:12otro servicio etcétera entonces a menos
21:15como la diferencia pueden ver que pueden
21:16hacerlo también pueden utilizarlo en mi
21:19caso he tenido muchos errores a veces
21:20crear las escenas a veces no Entonces a
21:22veces funciona yo hago un trazo por
21:24ejemplo y bueno el servicio a veces no
21:26guarda ahora la gracia de todo esto es
21:28porque si ustedes pueden venir aquí
21:29donde dice por ejemplo compartir y esto
21:31les va a dar un enlace fácilmente lo
21:33activan Y si copian esto y les dan en
21:36ver y editar esto significa que
21:38cualquier persona que entre este enlace
21:40va a poder entrar en su Alianza y va a
21:42poder editar también en tiempo real Por
21:44ejemplo yo voy a abrir un nuevo
21:45navegador Ok mi pego el enlace Y eso
21:48sería como otra persona conectándose y
21:50bueno pueden ver que si dentro desde
21:52otro navegador me hice va a centrar en
21:53este espacio de trabajo y Bueno estoy
21:55entrando con otra cuenta voy a darle en
21:57oscuro voy a darle entrada en el runt y
21:59pueden ver que aquí estoy entrando con
22:00mi otra cuenta Ok entonces pueden ver
22:01que aquí yo estoy desde mi otra cuenta y
22:03puedo editar Claro en este caso lo estoy
22:04editando yo mismo pero pueden ver que
22:07aquí en la otra ventana yo puedo ver
22:08cómo las otras personas también editan
22:09ahora dependiendo Dónde se encuentra
22:11esto puede que le funcione Puede que no
22:13pero bueno es una opción también si
22:15quieren trabajar con otras personas yo
22:17lo utilizo esto cuando estoy en
22:19streaming Así que es por eso que lo lo
22:20pago Pero bueno si ustedes lo tienen a
22:23modo de un servicio personal yo creo que
22:25guardándolo localmente con eso les basta
22:27y Bueno finalmente también deben saber
22:30que es opensores así que este es el
22:32repositorio de la herramienta la
22:34herramienta también tiene de un servicio
22:35backen que eso pensor pero bueno en este
22:38caso estamos hablando de la propia
22:39herramienta de dibujo Entonces esta
22:41vendría a ser si quieren ver el código
22:42fuente la medida está desarrollada en
22:44type escribir read Así que van a poder
22:46darse una idea de cómo utilizarlo De
22:49hecho también tiene un contenedor de
22:50dockers si saben docker pueden clonarlo
22:52rápidamente o pueden ejecutarlo con este
22:54Comando de aquí Ok simplemente sería
22:57clonar el repo y hacer un pie y
22:59ejecutarlo y ya estaría ahora aparte de
23:01esto también les dice las herramientas
23:03que están utilizando principalmente que
23:05es real type screen Yes que es para
23:07poder ser los trazos y bueno eso sería
23:10básicamente ahora a partir de aquí si
23:13ustedes quieren integrarlo pueden
23:14desplegarlo también sale en su propio
23:16servicio pero de nuevo esto vendría a
23:18ser las bases y ya está esta herramienta
23:20Es la que he estado utilizando bastante
23:21en otros vídeos Espero que les haya
23:23interesado y nos vemos en un próximo
23:24ejemplo

About this transcript

This page contains the full transcript of Excalidraw, Mi Herramienta para hacer Bozquejos y diseños rápidos by Fazt, generated from the public captions YouTube serves with the video. The transcript has 5,080 words across 737 segments, with the original timestamps preserved so you can click any line to jump to that moment in the embedded player.

What you can do with it

Use the transcript to take notes, quote the speaker, build a study guide, generate a summary with ChatGPT or Claude via the YouTube Summary tool, or export it as a timed subtitle file with YouTube to SRT. You can also re-open it in the transcriber to translate the transcript into 100+ languages.

Free YouTube transcript tool

YouTube2Text is a free YouTube transcript generator — no signup, no daily limit. Paste any YouTube link and get the full transcript instantly, with timestamps, click-to-jump, translation to 100+ languages, AI prompts for ChatGPT, Claude, and Gemini, and exports to TXT, SRT, VTT, or Markdown.