Tutoría 1 - RPMI - Curso 25·26 - 4 de noviembre

Bienvenidos a la tutoría, primera tutorial, digamos, de temario, ¿no? 00:00:01

Tuvimos una inicial la semana pasada, pero, bueno, esta es la primera ya que tenemos una unidad de trabajo, digamos, abierta desde hace algunas semanas. 00:00:07

Y, bueno, justo os estaba preguntando que qué tal iba y, bueno, veo que sí que el tema 1 más o menos lo habéis revisado. 00:00:17

No he encontrado ninguna duda o consulta en los foros, ni en el general ni en el del tema. 00:00:24

Entonces, simplemente para recordaros, esto se dijo en la tutoría inicial, la dinámica de los estudios en virtual es que nosotros vamos subiendo el temario y en las tutorías, sobre todo, lo que buscan es resolver dudas que tengáis y que nos planteéis. 00:00:29

Entonces, lo primero que os pregunto es eso, ¿hay alguna duda que queráis que veamos, algún apartado, algún aspecto del primer tema? 00:00:46

Vale, si no es así, es verdad que el primer tema dentro de lo que cabe es bastante teórico y bueno, pues tampoco representa ninguna dificultad, me refiero a lo mejor como vamos a ver en otros de los softwares, porque no encontráis algo, etc. 00:00:57

Si tenéis alguna duda, hacedmelo saber. La tarea también, en parte de lo que se trata, es que en este punto inicial del curso os enfrentéis a hacer, a que veamos qué sabéis de interpretar cómo se articula una web o cómo es la arquitectura de información de una web. 00:01:20

entonces si no hay dudas sobre eso 00:01:38

yo lo que quería plantear es 00:01:40

empezar a hablar un poco de Figma 00:01:42

que va a ser el software que vamos a usar en la unidad 2 00:01:44

un poco también para 00:01:46

empezar a aterrizar ese tema 2 00:01:48

y bueno, pues porque Figma 00:01:50

probablemente 00:01:52

a nivel de dudas, imagino que os generará 00:01:53

más, es decir, la parte más 00:01:56

peleaguda de este módulo 00:01:58

aparte de que se ven muchas cosas distintas 00:02:00

y es uno de los 00:02:02

de los inconvenientes 00:02:04

de las dificultades 00:02:06

que está repartido en muchos temas 00:02:07

y es un poco picotear 00:02:09

como habéis visto en la unidad 1 00:02:10

lo referente a las distintas fuentes 00:02:13

para luego 00:02:15

usarlas en el producto multimedia 00:02:16

interactivo 00:02:19

pero bueno 00:02:20

eso, la parte de los softwares 00:02:23

y que vamos a ir tocando varios softwares va a ser 00:02:25

probablemente lo que más 00:02:27

intríngula y estanca 00:02:28

entonces, lo dicho, no sé si 00:02:30

alguno tiene alguna duda 00:02:33

por si no pasar a lo siguiente 00:02:35

O si queréis que veamos alguna cosa relativa al tema 1, decidme. Si no, mientras tanto yo estoy abriendo una cosa y vais a compartir también la pantalla. Un segundete. Confirmadme que ahora veis mi escritorio. 00:02:36

A ver aquí, confirmadme, si se ve, ¿me ponéis? Vale, genial. Vale, lo dicho, la unidad 2 la abrí, bueno, paso, ¿no? De la unidad 1 algo que queráis ver, en realidad esta tutoría ya lo ponía en la introducción, como es una unidad autoexplicativa en el sentido de que es muy teórica, no quiero darle más vueltas. 00:02:57

Si alguien quiere ver algo, ¿vale? Y si no, como nadie lo dice, vamos a por esa dos. Se abrió la unidad dos el pasado jueves-viernes, está ya por completo el viernes con su actividad, etc. 00:03:23

Y si ya habéis empezado a ver ese tema, que lo voy a abrir aquí rápidamente, ese tema Versa os intenta ocupar sobre todo de uno de los aspectos que menos se tienen en cuenta cuando se habla de esto de fuentes. 00:03:37

Entonces, enseguida hablamos de fotos, vídeo, música, audio, etc. 00:03:51

Pero no nos centramos en que la información, el medio de información más importante que usamos es la palabra. 00:03:58

Y bueno, en su versión, digamos que se transmite la versión escrita de la palabra, la tipográfica. 00:04:05

Este tema se ocupa de ello, ¿vale? Os lo abro, imagino que lo estáis viendo. 00:04:14

Este tema sobre todo va de cómo se transmiten, o intenta enfocarse y dar pinceladas y andar 00:04:19

En cómo se transmiten mensajes escritos, ¿vale? 00:04:26

Como se verá también en el propio tema, pues bueno, todos hemos aprendido a lo largo de nuestra vida 00:04:30

Desde la escuela, desde pequeñitos, pues a usar las letras o a escribir 00:04:37

Pero aquí vamos además a ver las connotaciones que tiene esa representación gráfica de las palabras. No solo en cuanto a fondo, es decir, a lo que significa la palabra, sino a forma, a cómo se representa. 00:04:43

En la primera parte del tema se habla un poco de esto, que este mismo mensaje, que de fondo es el mismo, siempre será el mío, dependiendo de cómo sea representado gráficamente, puede denotar un mensaje de amor o uno de terror. 00:04:59

Entonces, voy a ir pasando un poco por estos aspectos de manera rápida para ir directamente al software que se plantea usar en este apartado, en este tema. 00:05:19

Se emplea Figma como se podrían emplear muchos otros. Para hablar de esto se puede usar el blog de notas incluso. 00:05:33

Bueno, es muy limitado a nivel de tipografía, pero bueno, ya dentro de cómo se representan las palabras que ahí vamos escribiendo, ya tiene un significado. 00:05:42

Pero bueno, también se podría usar un Word, un LibreOffice, que no sé si conocéis LibreOffice, lo dejo caer. 00:05:52

Aquellos que no tengáis licencia de Microsoft, lo general es lo normal, hay alternativas gratuitas de código abierto o freeware, etcétera, como pueden ser, por ejemplo, LibreOffice. 00:05:58

Lo digo por si en algún... Yo, por ejemplo, es el que normalmente uso, porque hasta hace poquito no tenía yo mi licencia de Windows. Bueno, pues LibreOffice es la suite de Microsoft, ¿no? Pues el Word, el Excel, etc. Bueno, pues una versión que se cuenta, pues, de... Si no me equivoco, es OpenSource. Desde luego es gratuita. Ahora que lo tengo que decir, software libre, sí, y OpenSource, sí, exacto. 00:06:14

Entonces, bueno, se podría ver en esto, se podría ver en aplicaciones de Adobe, por ejemplo, Illustrator, aquí está abierto, lo tengo aquí. Vamos a ir a Porfigma por dos motivos. Primero, porque es un software que en general es gratuito, no es que sea de código abierto ni se esté proporcionando de manera gratuita. 00:06:42

Hay una empresa detrás que busca beneficios, no se busca que el conocimiento humano mejore de una forma altruista o al menos no directamente altruista, 00:07:04

pero sí que es verdad que es un software que en su estrategia de mercado decide dar prácticamente todas sus herramientas, hay algunas que no, pero al menos de las de diseño, gratis. 00:07:14

Sí que vais a encontrar alguna limitación, no en lo que estamos explicando ahora, pero sí que podéis encontrar alguna limitación. 00:07:27

Entonces, para haceros esta cuenta de Figma, Figma para empezar es un software que principalmente lo que busca es cubrir una necesidad que es la del prototipado web. Así es como nació, que es básicamente ir generando distintas pantallas. 00:07:33

Aquí, por ejemplo, hay un ejemplo que me he bajado. Hay muchos en la comunidad de Figma que se pueden bajar. Prototipar aplicaciones, es decir, hacer el diseño inicial de cómo va a ser, tanto a nivel visual como también a nivel de interacciones. 00:07:50

Esto ya lo veremos más adelante, pero es una especie de simulador de cómo va a ser una aplicación una vez se implemente ya con código y en una store de aplicaciones o a través de un navegador web. 00:08:06

Entonces, lo bueno que tiene esta aplicación, además con respecto a este módulo de realización de proyectos multimedia interactivos, es que vamos a aprender a usar estas herramientas ya que nos van a ir sirviendo dentro del mismo ecosistema a ser integradas cuando estemos prototipando un producto web, por ejemplo, o una aplicación informática. 00:08:18

También por lo que no he optado es precisamente porque hay otros paquetes, otras suites de software como las de Adobe, el Creative Cloud 00:08:39

Que el problema que tienen es que no cuentan con versiones ni de estudiantes muy duraderas, tienen algunas para probarlo algunos días 00:08:49

Pero implican un coste que no vamos a asumir y además vamos a ir optando por nuevas soluciones o soluciones que no conlleven este gasto 00:08:56

Y que, por ejemplo, en el caso de Figma son plenamente útiles, plenamente profesionales. Sí que es verdad que ya, como se acabó de indicar, estaba más parcelada al diseño web. Por ejemplo, aquí no se hace diseño gráfico como se haría en un Photoshop. Voy también introduciendo software porque entiendo que alguno de vosotros, en estas alturas iniciales, os sonará lo que es un Photoshop. 00:09:06

Ya lo veremos en el tema 3, que es Photoshop 00:09:31

Igualmente, no vamos a contar con Photoshop 00:09:34

Por el mismo motivo, pero 00:09:36

Buscaremos otras alternativas que también son 00:09:37

Profesionales 00:09:40

De hecho hoy, por ejemplo, yo al menos lo he visto hoy 00:09:41

Pero vamos, me consta que ha sido los últimos días 00:09:44

Si os suena un software 00:09:46

Llamado Canva 00:09:48

Que es muy útil para hacer presentaciones 00:09:49

Etcétera, ha comprado un paquete que se llama 00:09:52

Affinity 00:09:54

Y una de las dudas que yo tenía, que era 00:09:54

¿Cómo daros diseño gráfico? ¿Qué aplicación de diseño gráfico utilizar? 00:09:57

Y vamos a usar una que se llama Gimp o una especie de clon que hay online del Photoshop que se llama Fotopea, pero dado que este paquete de momento, luego en el futuro ya se verá cómo van gestionando este modo gratuito que acaban de implementar, vamos a usar una aplicación que probablemente empieza a ganar mucho terreno, o eso creo yo, en el ámbito del diseño gráfico y vectorial. 00:10:00

Bueno, al final lo que quiero que vayáis viendo es que hay aplicaciones de muchos tipos. Sí que es verdad que hay algunas que son el estándar del sector y muchas veces son el estándar ya simplemente por tradición porque es la que más usa la gente. 00:10:24

Ni porque sean las mejores en ocasiones, ni porque tengan las mejores funcionalidades. En el caso de Adobe, por ejemplo, se puede hablar bien y mal, tiene también su política, pero es cierto que perderá sector si no cambia su política, perderá cuota de mercado en el sentido de que, bueno, están saliendo muchas alternativas que apuestan por modelos gratis o que al menos muchas de sus funcionalidades de partida ya se puede hacer allá de manera gratuita. 00:10:42

Bueno, volviendo a Figma 00:11:10

Figma, del mismo modo que empezó con prototipado web 00:11:12

Al final se está convirtiendo en una herramienta que se usa también para maquetación en general 00:11:15

Tiene limitaciones, sobre todo si se quiere usar para medios impresos 00:11:21

Sobre todo se centra en la parte más de pantallas 00:11:25

Pues eso, web, pero también puede ser para presentaciones en pantalla cualquiera 00:11:31

Sin tener que recurrir a ninguna web ni aplicación 00:11:36

Pero también están metiendo ya un factor más grande, un apartado más grande de diseño vectorial, que hasta hace poco tenía mínimo. Vamos a ir usando distintas herramientas y como veréis también a lo largo de los estudios en este ciclo, las herramientas son contextuales. 00:11:38

Lo que vais a aprender hoy, probablemente dentro de tres años, o no os sirva o lo tengáis que adaptar a otra aplicación. Esto que estamos empezando el curso, y estamos en un módulo además de primer curso, es algo que vais a tener que tener en mente. 00:11:59

Las aplicaciones están cambiando continuamente, ahora con la inteligencia artificial más que nunca, porque salen aplicaciones, pues cada semana hay novedades de una o sale una nueva directamente, etc. 00:12:16

Entonces, simplemente que tengáis abierta la mente de que ya el enfoque creo que no va a ser tanto aprender una aplicación de pe a pa, 00:12:30

sí que evidentemente si es la que vais a usar durante un periodo de tiempo, pues es lo que sí tendréis que saber usarla, 00:12:38

pero sobre todo lo que se va a buscar es contar con los conocimientos base o esenciales que permitan extrapolarlo a cualquier paquete de softwares. 00:12:46

porque ya os digo que va a pasar 00:12:55

de hecho yo, eso, a la hora de decidir 00:12:57

qué software sin parto 00:13:00

dentro de las limitaciones también que tengo 00:13:02

pues ya cada año 00:13:04

tengo que ir eligiendo unas distintas 00:13:08

así que 00:13:10

eso, es un sector cambiante 00:13:11

para bien y para mal 00:13:14

dame un segundo que me voy a quitar el jersey 00:13:15

no sé si tenéis alguna duda 00:13:17

porque hay un compañero que ha dicho, justo he visto la noticia 00:13:19

de Affinity, entiendo 00:13:22

y lo dejé instalado por curiosidad 00:13:23

sí, bueno, ya veremos en la siguiente unidad 00:13:25

lo decido hoy, igual luego al final Affinity no 00:13:28

porque primero me tengo que poner yo también 00:13:30

con ello, que es un software que he abierto 00:13:32

pocas veces, pero bueno 00:13:34

creo que es más útil probablemente 00:13:35

Affinity que aprender otros 00:13:38

de los que sí tenía previsto y que eran 00:13:40

gratuitos 00:13:42

pero sí, yo os digo 00:13:42

es un cambio que he visto hoy 00:13:45

espera que me quito esto, no sé si queréis 00:13:48

comentar algo más de esto 00:13:50

vale, pues nada, vamos a 00:13:51

Por Figma, que es el que ahora nos interesa. Figma, para empezar, si os metéis en la web directamente, y aunque ahora a mí es probable que me salga algo distinto que a vosotros, si os metéis, buscáis en Google Figma, lo voy a poner sin nada, Figma en el Google, pone la interfaz de diseño colaborativo. 00:14:05

Vale, pues nos metemos. A mí me va a llevar a una pantalla que es el gestor de proyectos que tiene propio Figma. Voy a salirme para que todos veamos lo mismo. Aquí, logout. Y os va a salir esta ventana. 00:14:24

normalmente no voy a ir en todos los 00:14:43

softwares explicando como se instalan porque 00:14:45

no suelen tener más complicación 00:14:46

o el propio tema ya se indica 00:14:49

pero si me interesa que en este 00:14:51

caso entendáis también una aplicación 00:14:53

que 00:14:55

la tendencia también que está habiendo últimamente 00:14:56

es una aplicación que se controla 00:14:59

mediante 00:15:01

puede tener una versión digamos web 00:15:02

y una versión también que es 00:15:04

de escritorio 00:15:06

que se instala en el escritorio y se puede 00:15:08

usar en ambas y además son 00:15:10

compatibles entre ambas cuando queráis instalar un software así vale lo primero 00:15:12

que va a pedir pues por ejemplo camba que es esta que os digo que ahora ha 00:15:18

comprado affinity sé que digo muchos nombres iguales los estoy aquí 00:15:21

aturullando y los apuntando porque vais a tener que ir conociendo todas estas 00:15:24

herramientas y lo primero que va a pedir va a ser que inicie una sesión vale 00:15:28

normalmente yo os voy a decir que mientras estéis en este curso vale menos 00:15:34

en algunas excepciones de otros módulos, os voy a decir que uséis el código del instituto, 00:15:39

es decir, el de educa.madrid.org, con el que os metéis en el correo electrónico. 00:15:47

Sobre todo porque en ocasiones, en Figma no sé si lo haremos y merece la pena, 00:15:53

pero en ocasiones vamos a pedir la licencia de estudiantes. 00:15:57

Por ejemplo, si ya estáis en algún módulo del Ordemaya, pues ya os estarán dando las instrucciones 00:16:00

y os dirán el mail que tenéis que usar ahí para pedir la licencia educativa. 00:16:04

en otros lo mismo, en este 00:16:07

es de los casos, os lo pongo en el tema 00:16:09

que os aconsejo, no pasa nada 00:16:12

si no lo hacéis tampoco, pero bueno 00:16:14

sí que a lo mejor en siguientes temas 00:16:15

si 00:16:18

intentamos usar alguna de las 00:16:19

funcionalidades que tiene 00:16:22

pero va a pedir en cualquier caso 00:16:23

que os hagáis una 00:16:25

que os creéis una cuenta 00:16:27

ahí os va a pedir que correo electrónico 00:16:29

que rellenéis algunos datos 00:16:32

rellenarlo sin problema 00:16:33

Una vez os registréis, os va a llegar, no me quiero entretener mucho en esto, probadlo a la que leéis el tema, que se habla algo de esto y ya lo probaréis. Pero si queréis ya optar porque queráis probar alguna funcionalidad más e ir allanando el terreno, si le dais a Figma Education, vais a ver que hay licencias que podéis pedir con vuestro carné de estudiantes. 00:16:35

Si lo enviáis. Es verdad que a mí me tardó, pone que son 24 horas, pero me tardó como una semana en llegar. Ya os digo que no es especialmente relevante que cuando tengáis la cuenta de Figma os registréis en este Figma para educación. 00:17:05

Únete a un taller, ¿no? Es consigue la verificación 00:17:22

Vale, os tenéis que loguear con esa cuenta 00:17:26

Que habéis creado e ir rellenando 00:17:27

¿Vale? Cuando os pidan 00:17:29

El único dato 00:17:31

Que puede que sea un poco farragoso 00:17:33

Es cuando os pidan el nivel educativo 00:17:35

No pongáis 00:17:38

Otro que el de educación superior, higher education 00:17:39

¿Vale? Porque a veces 00:17:42

Pensamos que estamos en un instituto 00:17:43

Que sería el nivel K-12 00:17:45

En realidad nosotros estamos en niveles 00:17:46

Para Estados Unidos 00:17:49

que son los que desarrollan estos niveles educativos, somos Higher Education, ¿vale? 00:17:51

Entonces os metéis ahí y el centro, el instituto, el IES, CIP, Ignacio y Acuría, si lo buscáis, 00:17:57

bueno, pues si lo ponéis tal y como sale aquí o empezáis a escribirlo, ¿vale? 00:18:06

Centro Integral de Formación Profesional de Distancia, como aparece aquí, ¿vale? 00:18:12

Va a aparecer este instituto, ¿vale? Pues si os registráis y dais la credencial de vuestro carnet de estudiante, que si no os ha llegado, os llegará, ¿vale? Pues lo podéis pedir. Pero eso a más largo plazo. Os lo voy diciendo también para que sepáis que normalmente los softwares, por ejemplo, en Affinity pasaba antes hasta que lo ha comprado Canva, esto que os digo, suelen tener licencias de estudiante que amplían o dan acceso a las funcionalidades extra que tienen los softwares. 00:18:16

Pregunta, ¿usted sabe cuándo llegarán los carnes de estudiante por el tema de licencia de estudiante? 00:18:44

Pues no lo tengo claro, pensaba que ya los estaban proporcionando, pero lo pregunto, me lo apunto y luego me lo pregunto para que lo diga el tutor, ¿vale? 00:18:50

Si ya hay previsión, entiendo que sí que la va a haber. ¿A alguien le ha llegado por casualidad ese carnet de estudiante o la credencial de carnet de estudiante? 00:19:00

A nadie, vale. Pues lo preguntaré porque yo pensaba que ya lo estaban enviando, por ejemplo, para Maya y me costaba, pero igual, vale. Pues lo dicho, debe llegar por físico o digital. Normalmente os lo hacen llegar físico, es decir, suele haber carnes físicos, pero si no me equivoco también nos envía la versión digital. 00:19:11

Lo tengo que confirmar y os lo dice el tutor. Lo dicho, para Maya, etc., también vais a necesitar la credencial. No sé si alguno ya en los otros módulos de Maya habéis tenido que solicitar el software. 00:19:36

Imagino que habrán empezado con parte del temario que no lo requiere, pero bueno, sí que llegará el momento si estáis, por ejemplo, en el módulo de modelado, en el de lo intentado, pero no puedo. 00:19:51

pero cuando me dices que lo has intentado 00:20:01

es que ya cuentas con algo para demostrar 00:20:04

que estás en el centro 00:20:06

en cualquier caso, vale, por eso no puede 00:20:07

eso es que todavía no lo han enviado 00:20:17

os llegará, lo voy a consultar 00:20:18

para que el coordinador os lo 00:20:21

transmita, que yo ahora mismo 00:20:23

sinceramente no lo sé 00:20:25

y sé que 00:20:27

próximamente os va a llegar 00:20:29

lo dicho, para Figma 00:20:31

para el caso de esta unidad 2 00:20:33

del módulo 00:20:35

Pero con que hagáis la cuenta estándar podéis de momento ir haciendo todas las funcionalidades y de hecho probablemente no pasemos a la educativa, que lo que amplía, por ejemplo, son opciones de compartir proyectos entre nosotros, pero como vais a ver en la tarea 2 os la pide con otras formas de compartir. 00:20:37

Entonces, bueno, simplemente que sepáis que hay esa versión educativa. 00:20:53

Luego también, como vais a ver aquí, para instalar la versión de escritorio, voy a apartarme un segundo mi ventana para iniciar sesión con mi correo. 00:21:00

Dame un segundo. A ver si me acuerdo la contraseña. Vale. Cuando iniciáis sesión, ¿vale? De pronto, bueno, aquí ha salido algo que no nos interesa. La página de firma cuando os metáis va a ser este gestor de proyectos. 00:21:15

Un gestor de proyectos, como por ejemplo también podéis ver en otros softwares, en Canva vais a ver uno si también alguna vez usáis Canva. A ver, me ha dejado usar la matrícula supuestamente, pero a mí al menos me la rechazaron porque Secretaría Virtual me dio un archivo en mal estado. 00:21:32

Vale, pues lo consulto y os lo digo, ¿vale? Esto os lo he comentado para que sepáis esto de las licencias, pero de momento en este módulo no tenéis que pedir ninguna en concreto de estudiante. Pero bueno, se lo comunico al coordinador para que lo vaya preguntando en caso de que no lo hayan dado ya, que por lo visto no es el caso, ¿no? 00:21:52

Vale, cuando metéis aquí vais a ver, bueno, pues un montón de ventanas, etcétera, ¿vale? Y va a estar asociado a esta cuenta de correo electrónico. Bueno, yo aparte cuando generéis vuestra cuenta os va a pedir un nombre de la comunidad, ¿vale? Ahora veremos qué es eso. 00:22:13

Pero vais a poder ir gestionando distintos proyectos directamente desde una web 00:22:31

A diferencia, por ejemplo, de esto entre comillas 00:22:39

Porque a veces sí sacan aplicaciones que se controlan desde la web 00:22:42

A diferencia de si te instalas un Photoshop o un Illustrator 00:22:44

Fijaos que aquí Illustrator es una aplicación como el LibreOffice que tengo aquí abierto 00:22:47

Cuando nos metemos, la web de Figma de pronto 00:22:52

Mientras estamos logueados, mientras estamos con el inicio de sesión activo, tiene este aspecto para trabajar directamente en web. No hace falta instalar nada. Aunque aquí ahora mismo aparezca esto, que estaba por ahí el logo de Figma, aquí tenemos ahora mismo un gestor de proyectos basado en web. 00:22:58

Esto hasta hace no mucho era algo muy extraño porque los navegadores web no tenían capacidad de tener softwares tan avanzados, pero poco a poco cada vez es más la tendencia a trabajar en entornos que son webs. 00:23:19

y no hay que instalarse nada 00:23:32

y todo se guarda en la nube directamente 00:23:34

se puede compartir desde la nube 00:23:36

y no se basa en proyectos 00:23:38

como vamos a ver que si sucede en otros softwares 00:23:39

o en el propio Figma si se usa 00:23:41

procedimientos más 00:23:43

vamos a decir tradicionales 00:23:45

que se siguen usando 00:23:48

y se seguirán usando en local 00:23:49

pero son comportamientos que cada vez van 00:23:51

dejando más espacio a la nube 00:23:54

si tenéis duda de lo que voy hablando 00:23:56

me vais parando 00:23:59

entiendo que todo lo que voy diciendo 00:23:59

bastante asumible y básico, pero oye, que igual queréis que veamos 00:24:01

algo primero. Entonces, desde este navegador web, como he hecho 00:24:06

al meterme en este proyecto, esto es un proyecto por ahí, yo puedo 00:24:12

meterme y veis que es una web y yo de pronto digo, este diseño en vez 00:24:15

de un 9 quiero que sea un 8 y en vez de título quiero que lo ponga 00:24:19

en español, título. Veis que no he tenido que abrir ninguna aplicación 00:24:23

más que el navegador web, eso es importante. Sin embargo, a menos que lo hagamos por algo en concreto o se me ocurren pocas opciones, 00:24:27

pues bueno, que a lo mejor estáis en un ordenador que no es el vuestro y no queréis instalar nada, o por facilidad o porque queréis hacer algunos cambios rápidos. 00:24:39

Lo normal sería emplear la versión de escritorio que optimiza o tiene más recursos porque digamos que tira desde los recursos del propio ordenador 00:24:46

y no de la propia web vale entonces os dejo aquí en el tema pero voy a ir cerrando pestañas que 00:24:56

ya se van acumulando os dejo aquí en el tema el enlace del de desde el que se puede descargar 00:25:04

la versión de escritorio de firma vale otra pregunta que a veces cuando instala y software 00:25:10

surge y ya es normal vale bueno veis que firma también hay una aplicación móvil para ios android 00:25:16

Estas aplicaciones están muy limitadas 00:25:22

Esta versión sí que no es 00:25:25

La que deberíais usar 00:25:26

Es sobre todo para hacer revisiones 00:25:28

Trabajo colaborativo, pero no tanto para diseño 00:25:31

Simplemente porque igual decís 00:25:33

Anda, si me puedo instalar 00:25:35

Figma en mi móvil, bueno, podéis 00:25:36

Pero no para dejar hacer 00:25:38

Ni la mitad de las cosas 00:25:40

La aplicación de escritorio aquí, bueno, lo primero que vais a ver 00:25:41

Es, dependiendo del sistema 00:25:45

Operativo en el que estéis trabajando 00:25:47

Entiendo que ya sabréis 00:25:48

que existen los de Microsoft, que son los Windows, y los de Apple, que son los Mac, los Macintosh, los Mac, ¿vale? 00:25:51

Pues tendréis que instalar, y esto va a pasar en todos los softwares, un software u otro. 00:25:57

Y además el instalador, el archivo que os bajáis para instalar, pues en un caso puede ser un .mg, en el caso de Mac, 00:26:02

en el caso de Windows puede ser un .exe, bueno, de distintos tipos. 00:26:08

Pero ahí creo que eso está claro, pero muchas veces vais a ver también que hay un tipo de aplicación de descargable 00:26:12

que también pone que es Windows y pone para ARM, ¿vale? 00:26:21

En general estas versiones no son las que tenéis que usar. 00:26:24

Estas versiones están más pensadas para dispositivos 00:26:27

con configuraciones más dirigidas a dispositivos móviles. 00:26:29

Esto todo tiene asterisquillos, 00:26:34

pero si estáis trabajando en vuestro ordenador, ¿vale? 00:26:36

Ceñíos siempre a la que pone Windows a secas, ¿vale? 00:26:39

Lo digo porque en otro software os va a pasar lo mismo 00:26:42

y decir, joder, ¿cuál de las dos tengo que instalar? 00:26:44

Normalmente la que es ARM, no. 00:26:47

Y si aparece más información, habrá que ir viendo también que a veces hay distintos tipos de instaladores. Pero por lo general, cuando deis a Windows, os va a bajar un archivo que cuando lo activéis, cuando entréis en él, empezará el instalador del software. 00:26:49

Una vez lo instaléis, os va a aparecer en el propio escritorio o en el buscador, en el explorador de Windows o de Mac, la aplicación de Figma, que cuando se abre, me lo va a abrir ya con un proyecto abierto, que ya estoy viendo que está ahí, con el mismo que tenía. 00:27:07

¿Vale? Vais a ver que si vais a esta casita que hay aquí, es, y me pongo en el punto donde estaba, es básicamente la traslación. Fijaos aquí, la versión aplicación y la versión, espera que me he salido justo, pero la versión web. 00:27:23

Vais a ver que, hombre, idéntica no es, pero son casi primas hermanas, ¿vale? Y veis que lo que hagáis en un sitio se va a reflejar en otro. Por ejemplo, yo digo, este proyecto le voy a llamar, le voy a renombrar como, pues yo qué sé, no me caliento la cabeza, proyecto, probar. 00:27:40

Lo guardo y fijaos que en la versión web, aunque lo haya hecho el escritorio, de pronto se ha cambiado. Es decir, todo cambio que hagamos en una se va a ver en otra. Por tanto, si no tenéis instalada una versión, en la versión de web, en vez de llamarla así, le voy a cambiar el tamaño. 00:28:00

La voy a poner un poquito más grande, 40. Sin hacer nada, no he hecho nada porque tiene autoguardado en la nube. Cuando me meta en este proyecto en la web, fijaos que ya se ve igual de grande. Esto quiero que lo que veáis, fijaos también que como tengo una versión abierta de la desktop y la web, fijaos que está apareciendo por ahí un cursor que pone Daniel Profesor. 00:28:18

Esa es una de las funcionalidades que se capa, que no deja usar en profundidad cuando estamos usando las versiones que no son premium o de pago o la educativa. 00:28:45

Ya os he dicho que una de las opciones buenas es que a lo mejor podemos estar trabajando 10 personas en paralelo o en un mismo proyecto y las 10 podemos estar seleccionando elementos e ir cambiando elementos en línea. 00:28:56

Eso está muy bien cuando se trabaja profesionalmente en equipos 00:29:08

Aquí, bueno, en principio tampoco preveo que vayamos a hacer eso 00:29:12

Por eso os digo que tampoco es necesario esto de la licencia de estudiante 00:29:15

Aunque está muy bien que podáis usarla 00:29:18

Pues para ver otras funcionalidades 00:29:20

Como, por ejemplo, esta funcionalidad de desarrollo 00:29:22

Que bueno, ya veremos 00:29:28

Que a mí no me la capa porque yo ya estoy validado como educación 00:29:29

Pero a vosotros sí os pasará 00:29:33

¿Vale? Entonces, simplemente eso 00:29:35

Que os sugiero o deberíais trabajar con la versión de escritorio. Y normalmente siempre que haya un software que pueda trabajar en web o en escritorio, os recomiendo que trabajéis en escritorio, ¿vale? Porque va a funcionar de una forma más óptima respecto al equipo que tengáis. 00:29:37

Ojo, esto también, entre comillas, depende mucho de los sistemas, puede ser al revés, porque si tenéis un ordenador bastante limitado, pero con el navegador lo podéis correr sin depender de esas capacidades que están un poco limitadas, en ocasiones justamente es lo contrario a lo que os estoy diciendo. 00:29:54

Es mejor, bueno, pues usarlo en la versión web. Vale, pero en general no va a ser el caso. Vale, no sé si de hasta aquí alguna duda. Estoy siendo muy general. De momento bien, ¿no? Vale. Así que yo ya, como no me interesa la versión de web, la cierro y me voy a la de esta aplicación. 00:30:14

Voy a ir hablando de cosas que son comunes a los softwares en general. Los softwares de diseño, pero las interfaces de softwares. De hecho, la tarea de la unidad 1 es analizar interfaces o funcionalidades o la usabilidad web. 00:30:37

Al final, también lo que tenemos que ir haciendo, y por eso este módulo lo recomendamos de primer curso, sabéis que aquí podéis escogerlo un poco en otros órdenes, es porque hacer la cabeza, cómo se van estructurando las distintas aplicaciones o softwares, ayuda a que en realidad siempre cuando se está diseñando una aplicación, pues se busca que tenga una cierta lógica. 00:30:54

y vais a ver que cuando se va aprendiendo una herramienta, pues en las otras, aunque cambien las cosas, 00:31:18

pues suele tener cierta coherencia o cierta consistencia entre ellas. 00:31:23

Entonces, bueno, se hace bastante más fácil cambiar de Photoshop a Affinity, como os acabo de indicar, 00:31:29

si ya se ha usado alguna de ellas, porque ya dice, bueno, tengo que buscar las capas. 00:31:33

Pues si no está aquí, estará en otro lado, en la interfaz, pero bueno, sobre todo es ir conociendo las funcionalidades. 00:31:38

vale, si no 00:31:43

si arrancamos Figma y no tenemos abierto 00:31:46

ningún proyecto, vale, lo que vais 00:31:48

a estar es en la sección esta de la casita 00:31:50

que es el gestor de proyectos, aquí hay 00:31:51

distintas pestañas, vale, de las cuales 00:31:53

las útiles, bueno 00:31:56

todo es útil pero son demasiadas 00:31:57

cosas y no se pueden abarcar, poco a poco se van 00:32:00

se van 00:32:02

se puede ir desbloqueando, en el tema 00:32:03

os pongo muchos apartados 00:32:06

para que vayáis trasteando y tocando, que es lo interesante 00:32:07

y luego ya en la tarea pues vais 00:32:10

cristalizando 00:32:12

dándole forma a un proyecto más 00:32:15

concreto 00:32:17

todo lo relacionado a 00:32:18

el gestor 00:32:21

de vuestra 00:32:23

cuenta, etcétera, pues para añadir otra 00:32:25

cuenta, para 00:32:27

las propiedades de la cuenta 00:32:28

si os metéis veréis más 00:32:31

suele estar representado siempre con este 00:32:32

circulito y una letra y vais a 00:32:35

ver que si os metéis por ejemplo en Creative Cloud 00:32:37

que yo si lo tengo activo aunque 00:32:39

vosotros no vale cuando os metéis aquí son las aplicaciones de adobe vale de 00:32:41

aquí podríamos bajar las aplicaciones de adobe vais a ver otro círculo que es el 00:32:46

administrador de esta cuenta vale si os fijáis en una está en la esquina en otra 00:32:50

está en la otra pero al final se parece mucho en este sentido de que los 00:32:54

usuarios suelen ser este círculo siempre todos los software suelen tener este 00:32:59

Este circulito ya cuando os estáis logueando. Luego a medida que vayáis trabajando, la sección de reciente va a ir mostrando los últimos proyectos en los que habéis trabajado. Community, si estáis ahora empezando a trastear, es una sección muy interesante porque podéis ir abriendo proyectos, ir viendo cómo están hechos. 00:33:05

Aquí es donde la gente va subiendo plantillas, proyectos, etc. Y si le dais doble clic, se os añade a vuestros drafts, a vuestros bocetos, a vuestros trabajos y podéis trastearlos y tocarlos o usarlos a veces de plantilla. 00:33:23

Pero bueno, esto os dejo explorarlo de momento, pero lo que me importa es hablar de estos drafts que tenemos aquí, borradores, estos borradores de trabajo en los que podemos ir haciendo nuestros diseños. 00:33:39

lo primero que hay que distinguir en Figma 00:33:53

es que existen estos borradores 00:33:57

y en la versión gratuita podéis hacer 00:33:58

todos los borradores que necesitéis 00:34:00

y luego está lo que se llaman los proyectos 00:34:03

que simplemente los proyectos 00:34:05

lo que pasa es que se incluyen un equipo de trabajo 00:34:06

como os he dicho antes para compartir 00:34:09

el diseño entre varios equipos 00:34:11

o compartirlo con privilegios 00:34:12

de edición para los terceros 00:34:15

a los que se comparta, etc. 00:34:16

pero siempre que estéis trabajando podéis generar 00:34:18

un nuevo draft, si vais a este más 00:34:21

o directamente dais también a Design, pues se va a generar un nuevo borrador. 00:34:23

Si abro este borrador, vais a ver que la interfaz de Figma está preparada para ir trabajando. 00:34:31

Esto, igual que en Windows o en los navegadores, vais a ver aquí que se pueden ir generando nuevos archivos 00:34:38

y se irán abriendo aquí para ir trabajando en ello. 00:34:46

Puede haber varias pestañas en paralelo. 00:34:49

Si queremos cambiar el nombre, pues lo que he hecho antes, esto es prueba o tutoría, RPMI, Figma, nombre cualquiera. Y este proyecto ahora será el draft que se llama así y que al dar doble clic se abre. Bastante parecido a un explorador de Windows. 00:34:51

Luego, estos proyectos, como os he dicho, se irán también traduciendo en la web 00:35:09

y llegará un punto en el que en ocasiones digáis 00:35:17

y si yo esto me lo quiero guardar en el ordenador, veréis a lo largo del tema 00:35:21

que se explica lo que es un punto FIG, Figma, la extensión de archivo 00:35:26

digamos local en el que se guardan los archivos locales en vuestro ordenador 00:35:30

Pero Figma, como os he indicado antes, es un software que sobre todo se basa en trabajo en la nube 00:35:36

Todo lo que vayáis haciendo, y esto es lo bueno y lo malo, es que a medida que vayáis trabajando 00:35:43

Pues lo que ha pasado antes, que yo he puesto hola o he cambiado el tamaño de algo 00:35:48

Y sin dar a ninguna tecla, como por ejemplo tenemos que hacer en Word, que tenemos que guardar 00:35:52

Pues ya se está guardando automáticamente 00:35:56

Esto tiene el peligro de que en ocasiones podéis decir, yo quiero volver a una versión anterior 00:35:58

El control Z, que no voy a explicar qué es porque imagino que todos sabéis lo que es, que es deshacer una acción, ir para atrás. Funciona, pero bueno, en cierto momento a lo mejor queréis ir a una versión de hace dos días de este proyecto. 00:36:03

Otra de las opciones que tenéis aquí en esta cabecera es ver la versión de cambios que vayáis haciendo. 00:36:18

Aquí es donde podéis ir guardando, y aquí pone el atajo con Control-Alt-S. 00:36:28

Imaginaos que yo, en este momento, aunque poco trabajo he hecho, la verdad, doy Control-Alt-S y digo, 00:36:33

Esta es arranque proyecto. Y aquí donde dije hola. Bueno, yo qué sé, cualquier cosa. Se va a añadir una versión que cuando se vayan acumulando versiones, que a lo largo del tiempo se van haciendo automáticamente también, pues podréis volver a este punto. 00:36:38

Aunque yo ahora ponga, habría que restaurarla, habría que decir restaura esta versión y volvería a ponernos esa versión para que trabajemos. Este es el sistema de guardado en las aplicaciones en la nube. 00:36:58

Sí que es verdad. A ver, que ahora mismo no me está dejando las aplicaciones porque estoy en... Vale, hay que cerrar este menú de ver el historial de versiones. 00:37:13

cuidado porque en ocasiones como cuando metéis aquí los historiales de 00:37:32

versiones por decir en otro caso vais a ver que la barra de herramientas va a 00:37:36

tener más o menos herramientas es contextual según donde estéis puede 00:37:40

tener más o menos opciones a esto está pensado también para ir poniendo pues si 00:37:44

hay distintos usuarios trabajando en un mismo proyecto pues para ir poniendo 00:37:48

para ir viendo esas versiones pero lo que os acabo de decir si yo salgo de 00:37:52

esta versión y empiezo a poner 00:37:57

pues yo que sé, como estáis 00:37:59

vale, y esto 00:38:01

se guarda automáticamente, ¿cómo 00:38:03

vuelvo ya a una versión que he guardado? pues 00:38:05

a diferencia de lo que se haría en 00:38:07

otros softwares que puedes ir guardando 00:38:09

distintos archivos locales 00:38:10

aquí tendrías que ir a la versión de 00:38:13

de... al historial 00:38:15

de versiones y restaurar pues esta que 00:38:17

teníamos de arranque de proyecto, ver que 00:38:19

se van añadiendo más a lo largo del tiempo 00:38:21

y en la versión de pago lo que 00:38:23

proporcionan es que este historial sea mucho más largo que en el normal vale 00:38:25

pues si yo esta versión digo quiero restaurarla vale pues veis que he vuelto 00:38:29

a esa versión en el que estaba con el hola y ya no pondrá el cómo estás vale 00:38:33

pues cierro y ya sigo trabajando de esa versión vale bueno 00:38:38

aquí hay un montón de funcionalidades hay un montón de 00:38:45

de parámetros vale no me quiero meter hoy tampoco en detalle porque en el tema 00:38:49

Me gustaría que lo leyerais y lo estudiarais por ahí. Pero lo que os he indicado es que este tema 2 se basa sobre todo en la tipografía. Y la herramienta esencial para escribir es esta que tenemos aquí, que es la herramienta de texto, en la que podemos ir incluyendo textos. 00:38:53

En muchas ocasiones os lo pongo en recursos de saber más, en estos que os indiqué que eran de ampliación. En realidad no es un saber más, es algo que tenéis que tener. En otras aplicaciones, cuando escribes una caja de texto, esto es Illustrator, cuando escribes una caja de texto hay una opción que es esta de rellenar con texto falso, que os la rellena con un texto de prueba para que veáis cómo queda o ir probando y luego metéis el vuestro. 00:39:14

Se puede activar. Entonces ya podéis ir cambiándolo. Con este tamaño ya sé que lo que quiero poner es esta práctica, lo que sea. Cuando estáis en Figma, esta funcionalidad se consigue a través de widgets o plugins, que son como ampliaciones que tienen los softwares con paquetitos o con mini programas que hacen otras funcionalidades. 00:39:38

Vais a ver en el tema que cuando queráis poner textos de prueba hay una convención, un estándar, que es lo que se llama el Loren Ibsen. 00:40:07

Esto no es muy... es decir, podéis usar ya textos de prueba, vamos, en plan copiarlo de un periódico o escribir vosotros un párrafo, ¿vale? 00:40:16

Pero si queréis usar, dado que en este tema vais a tener que emplear mucho texto y lo que he dicho, una de las partes importantes es cómo la maquetáis y cómo componéis, ¿vale? Pues pensad que podéis usar estos textos de prueba, ¿vale? Sobre todo para hacer esos diseños iniciales. 00:40:28

Y aquí podéis ir definiendo cuántos párrafos queréis en ese texto que luego vais a copiar y transmitir o cuántas palabras, pues poner 3.000 o 10 párrafos. Se pueden hacer listas que tienen como indexes. Esto que se va poniendo, lo que vais viendo aquí, que tienen números y van ordenando, pues un índice. 00:40:44

Si dais esta generación, por ejemplo, aquí tenéis 10 párrafos con este texto de Loren Ipsum que podéis copiar. Aquí os pone los datos de cuántas palabras y lo podéis pegar. Ahí tenemos un párrafo que hemos pegado muy largo. 00:41:05

Y de hecho vais a ver que aquí tiene 10 líneas porque los saltos de línea coinciden con los párrafos. Esa es una de las cuestiones que vais a ver en el tema. Ya me contaréis, si queréis, en la próxima tutoría, si erais conscientes de la cantidad de parámetros que tiene el trabajo tipográfico. 00:41:23

Porque vais a ver que el trabajo tipográfico no solo consiste en elegir una tipografía y ya está, sino que hay opciones, por ejemplo, como qué espacio hay entre estas líneas. 00:41:43

Yo imagino que ya cuando habéis hecho vuestros trabajos de cualquier estudio o vuestro currículum o lo que sea, habéis usado estos parámetros. 00:41:56

Pero, por ejemplo, una de las cuestiones que se pueden definir es qué espacio hay entre las distintas líneas, lo que se llama el line height o el interlineado. Por ejemplo, aquí cuando tenemos este texto, es el espacio que hay entre líneas. 00:42:05

Voy a poner un lore en Ipsum para que tenga sentido de frase. Voy a poner dos párrafos y lo pego ahí. Cuando yo pego dos párrafos vais a ver que se puede controlar el espacio que hay entre líneas. 00:42:20

Y si aquí hubiera más líneas, ahora os digo por qué esto se pone tan largo, que no suele tener sentido que sea tan largo, y de hecho en el tema vais a ver que se indica que cada cierto número de caracteres, según el medio, si es impreso, si es digital, debería tener un salto. 00:42:37

Pero hay distintos parámetros que, según lo que queráis expresar, ya mismamente se van a tratar de una forma u otra. 00:42:54

Y a medida que vais trabajando también vais a ver que aquí en el margen de la derecha va a aparecer lo que se llama el inspector. Creo que en Figma no lo llaman inspector, lo llaman propiedades, dependiendo de los software lo llaman de una forma. 00:43:07

Es cierto que en todos los softwares siempre va a haber una parte de la interfaz que cuando seleccionáis un elemento os va a mostrar las características, las propiedades de ese elemento. En otros softwares, yo por ejemplo en Unity se llama el inspector, en DaVinci Resolve para hacer vídeos se llama el inspector, en otros se llama propiedades. 00:43:20

Vale, que sepáis ya a nivel de interfaz que siempre va a haber un punto en el que cuando cliquéis de manera contextual, según lo que cliquéis, veis que si yo clico fuera en lo que se llama la página, salen unas propiedades, ¿no? Y si clico en este texto aparecen otras, ¿vale? 00:43:39

Si de pronto en algún punto veis que, porque veis una captura de pantalla o porque estoy explicando, porque me estáis trasteando, pensad que todos los softwares tienen ya comportamientos basados en, pues eso, en comportamientos contextuales, ¿vale? 00:43:55

Que a veces, dependiendo de la herramienta que escojáis, veis que yo a medida que voy cogiendo una u otra herramienta, ¿vale? En algunos casos, pues van cambiando estas opciones, ¿vale? 00:44:11

Es el mismo panel que comparte distintos usos. 00:44:21

En el caso del texto, vais a ver que hay un apartado que se llama typography, 00:44:24

que es este que nos interesa en este tema, sobre todo. 00:44:28

Bueno, la posición, el alineamiento, todo esto nos interesa, 00:44:31

pero el que más nos ocupa aquí es el que tenemos aquí de typography, 00:44:34

que además, para aprovechar el espacio, tiene más opciones ocultas 00:44:38

con otros menús que son más avanzados, como este que tenemos aquí. 00:44:44

Si me pongo encima, va a poner Type Settings. Y cuando doy aquí, veis que hay más pestañas, etc. Importante, también común a todo software de diseño o de audiovisual, vais a ver a veces que hay opciones con flechas, una flecha pequeñita. 00:44:48

Eso significa que dentro de una herramienta va a haber subherramientas o va a haber un espacio, un slot, un hueco de esa interfaz que, nuevamente, para economizar, va agrupando herramientas que tienen un comportamiento común o una funcionalidad común, que a veces no están en la barra de herramientas a menos que despleguéis esta flechita que suele indicar que tiene otras herramientas dentro. 00:45:07

Si os fijáis, por ejemplo, la de texto, esta T, no tiene subherramientas, es texto y ya está. En este caso, en este software no va a tener otras. Pero veis que, por ejemplo, esta que es la de frame, si extendemos podemos escoger, por ejemplo, la herramienta de section y cambiará aquí el icono que representa esa herramienta, pero podemos ir escogiendo una u otra. 00:45:34

Si veo una duda, ahora la contesto, pero si vamos a otro software, 00:45:56

abro Illustrator, como podría ser casi cualquier otro software que empleemos. 00:46:00

¿Veis que en este panel de herramientas, lo voy a hacer flotante para que lo veamos mejor, 00:46:05

en este panel de herramientas, que hay muchas herramientas, vais a ver que hay herramientas, 00:46:10

que es el icono y ya está, y otras que tienen esta flechita aquí pequeña, 00:46:14

que si clicamos y dejamos clicado, de pronto despliega a otras subherramientas. 00:46:18

¿vale? importante 00:46:22

que aunque en una barra de herramientas 00:46:24

lo digo porque a lo mejor, claro, veis 00:46:26

la barra de herramientas de los apuntes 00:46:28

y decís, pero si los iconos de esta 00:46:29

barra de herramientas no se parecen en nada 00:46:32

a las de 00:46:33

mi interfaz 00:46:34

ojo, claro, esas herramientas irán mostrando 00:46:37

en cada apartado 00:46:40

la que corresponda, que esté seleccionada 00:46:42

o escogida, ¿vale? y tienen memoria 00:46:44

en este caso, en otro lado no tienen esta memoria 00:46:45

según deselecciones esa herramienta 00:46:48

vuelves a la principal, pero aquí sí tienen 00:46:50

memoria si yo dejo aquí la estrella y luego me pongo a seleccionar con este puntero con este 00:46:52

cursor veis que aquí se queda la estrella vale ir haciendo la cabeza eso las interfaces son 00:46:56

contextuales intentan agrupar estos software es tantas usos tantas herramientas tantas 00:47:02

funcionalidades que para que no ocupe claro porque si cada herramienta ocupará un espacio 00:47:07

la barra de herramientas sería inmensa pues hacen este tipo de atajos de trucos vale que 00:47:13

hay que ir haciendo pues eso ir acostumbrándose e incluso esta barra de herramientas illustrator 00:47:17

que tiene muchas herramientas tiene luego aquí una opción vale como puede ocurrir también otro 00:47:23

software que es editar barra de herramientas y te metes aquí y hay muchas más herramientas que 00:47:28

puedes arrastrar e incorporar vale que en ocasiones también hay otras herramientas que igual no son de 00:47:33

uso tan general o son para comportamientos más específicos que hay que buscarlas en otras 00:47:38

barras de herramientas que están por ahí escondidas 00:47:43

¿vale? entonces 00:47:45

también hago una incisa antes de la duda 00:47:46

no os agobiéis 00:47:49

estos subers 00:47:51

estos y los que os darán en otros módulos 00:47:52

¿vale? tienen muchas opciones 00:47:55

y 00:47:57

usar todas o conocer todas 00:47:57

pues a veces no es sólo que 00:48:01

sea abrumador sino que tampoco tiene sentido 00:48:03

si no las vais a usar ¿vale? que a veces 00:48:05

incluso van dejando herramientas ya 00:48:07

por traición 00:48:09

pues porque alguien las usará pero que ya ni se usan 00:48:11

Entonces, no hay que ir una a una conociendo las herramientas. Siempre los softwares además tienen sus manuales de uso, que está muy bien consultarlos, pero suelen ser también un poco inabarcables, de 500 páginas que te van describiendo cada herramienta. 00:48:13

pues bueno, lo suyo es usarlos a modo de 00:48:26

a ver esta herramienta y la buscáis en la página 00:48:29

320 que pone en el índice 00:48:30

¿vale? leerse lo de PAPA pues 00:48:33

bueno, puede estar bien, claro, pero 00:48:35

lleva demasiado tiempo como para 00:48:36

aprender un software de PAPA 00:48:38

y también, y esto lo digo 00:48:41

por la medida que trabajéis 00:48:43

lo que se indica antes de que 00:48:44

es que ese software igual en dos años ya ha dejado 00:48:47

de existir, entonces, sed 00:48:49

funcionales también vosotros 00:48:50

igual que intentan ser las propias interfaces a la hora 00:48:52

de ir aprendiendo estas herramientas. 00:48:55

Sí, me preguntan, ¿el inspector es ese panel de propiedades? 00:48:58

Sí, en Figma, por ejemplo, mira, ya que estoy en Illustrator, 00:49:00

yo, si os fijáis, a medida que voy seleccionando partes 00:49:03

en este panel que se llama propiedades en este software, 00:49:06

van cambiando. 00:49:09

Y mirad, esta parte de carácter, o typography sería en inglés, 00:49:10

creo que es, o type, ¿vale? 00:49:15

Aquí está el análogo, ¿vale? 00:49:16

La tipografía, el tamaño, el interliñado que os decía. 00:49:18

Fijaos que ahora si muevo esto empieza a cambiar este interlineado. Al final son las mismas herramientas dispuestas en otro sitio. En Figma, a ver si se abre, el inspector o el panel de propiedades está aquí. 00:49:21

Y ojo, nuevamente, para darle más vueltas, se verán las propiedades de diseño que son las que estamos ahora mismo si estamos en la pestaña de diseño. Si estamos en la de prototipo, que en este caso está más pensada para hacer los comportamientos que ocurren cuando interactuamos con esta aplicación. 00:49:36

Por ejemplo, ¿qué debe pasar cuando demos a un botón o cliquemos en un botón? Todos estos comportamientos que veremos bastante más adelante en el módulo ocupan el mismo espacio en la pestaña prototipo. Por tanto, de momento nos quedamos aquí en diseño. 00:49:54

¿Vale? Y sí, es contextual. Si yo, por ejemplo, hago una estrella, ¿vale? Pues las propiedades de la estrella aparecerán cuando cliquemos en la estrella. Si clicamos en el texto, por ejemplo, aparece la de tipografía, pero cuando damos a la estrella, pues no aparece nada de tipografía porque no se ocupa de eso. ¿Vale? Nuevamente, opciones que son contextuales. 00:50:08

Vale, veis millones de opciones aquí 00:50:29

Iremos desgranándolas, en el tema se ven 00:50:33

Vuelvo al margen izquierdo 00:50:36

La duda la he respondido, ¿verdad? 00:50:38

Sé que voy rápido porque intento introduciros cosas que en realidad se ven en el tema 00:50:40

No es que esto sea el contenido como tal 00:50:45

El contenido lo tenéis en el tema 00:50:48

Vale, en este panel de la izquierda, aparte de las opciones de cómo se llama este draft 00:50:49

Aquí pone esto, es un draft 00:50:55

Os he dicho que esto es donde podéis trabajar sin problemas y podéis hacer tantos drafts barra diseños como queráis porque es la funcionalidad gratuita de trabajo que dan en firma. 00:50:57

Cuando lo paséis a proyecto, porque aquí de pronto si os metéis y le decís quiero mover esto, quiero mover este archivo, lo quiero mover a qué proyecto. 00:51:09

Digamos que este draft una vez a nivel propio quisierais que se validara por otro equipo, lo que pasaría es a pertenecer, a ocupar un espacio en este proyecto de equipo. 00:51:22

Se pueden ir generando distintos, pero estarán en este proyecto. En la versión gratuita, el máximo de proyectos que se pueden tener son tres. En la versión educativa, barra, porque la hacen equivalente, la de premio, la de pago, también amplía el número de proyectos que se pueden tener. 00:51:33

Lo dicho, esto de los proyectos, si acaso más adelante, es para trabajos colaborativos que ahora mismo no nos ocupan. Nos vamos a centrar siempre en estos drafts, en este tema, ¿vale? 00:51:52

Vuelvo al tema. Aquí, donde pone el nombre que se puede cambiar de este draft, es donde también tendríais que buscar lo relacionado a cambiar lo relativo a este proyecto a nivel general. 00:52:02

Aquí es donde podemos cambiar el nombre, donde lo podemos enviar a la basura. No os lo he dicho, pero igual que en Windows, por ejemplo, en el explorador podéis mover. Voy a coger otro porque este de Figma Basics. Esto es una plantilla de community que enseñaba cosas sobre el funcionamiento de Figma. 00:52:14

Mira, yo lo puedo abrir, se me abre otra pestaña y aquí te dice conoce Figma en tres minutos. Y mira, han generado un espacio y te va explicando con los propios diseños ciertas cosas. Hay bastantes. Bueno, luego aparte de aquí te ponen un tour. Hay muchas formas de aprender los softwares y una de ellas es bajar los proyectos y trastearlos. 00:52:30

Y algunos de los proyectos incluso son educativos, ¿vale? Su propio contenido sirve para que pruebes o que te diga, prueba, mira, mueve tu propia tarjeta aquí y es para que probéis, por ejemplo, a moverla aquí el diseño, yo que sé, ¿vale? Veis que a medida que voy abriendo proyectos, pues igual que en el explorador, puedo ir trabajando en uno u en otro. 00:52:49

Lo dicho, podéis decir, oye, este, aunque los drafts ya os he dicho que podéis tener muchos, puede haber un momento que queráis deshacerlo o borrarlo, ¿vale? Pues con clic derecho, clic derecho, nuevamente voy a algo básico, pero que es importante hablar, es que el clic derecho, normalmente los software, lo que hace es abrir un menú contextual del elemento en el que estemos clicando, ¿vale? 00:53:10

De acciones que podéis hacer con ese elemento. No son tanto las propiedades del elemento como acciones directas sobre el elemento, como por ejemplo abrir, en este caso, este draft o moverlo, renombrarlo, moverlo a que sea un proyecto, duplicarlo, compartirlo, bueno, distintas opciones. 00:53:35

Una de ellas es moverlo a la basura, al trash. Si lo movéis al trash, igual que ocurre en... bueno, pone, vais a mover el archivo a la basura, siempre lo puede restaurar más tarde desde la sección detrás. 00:53:53

Si lo movéis al trash, deja de estar aquí, pero aquí tenéis una sección que es esta detrás y aquí está. 00:54:06

No tengo claro, bueno, en la versión gratuita sé que hay un límite, no tengo claro de cuánto tiempo, pero cuando metéis algo, tened en cuenta que todo este material que estamos generando en la nube, a los servidores de Figma les van ocupando espacio y tampoco ellos considerarán que se lo llenemos de bytes y bytes y bytes de información y de vez en cuando querrán que borremos cosas, por eso también lo limitan. 00:54:11

Si lo metéis en el trash, el problema, aunque siempre podéis dar con clic derecho nuevamente y aquí las opciones contextuales son las de un archivo dentro del trash, es que lo podéis restaurar y volverá a estar en el draft. Aquí está. 00:54:34

¿Qué ocurre? Que estas cosas que enviamos al trash, pasado un cierto tiempo, que ahora mismo no sabría decir, seguramente serán 30 días, suelen ser así, pero bueno, hablo un poco por hablar, desaparecerían permanentemente, ya no lo podría recuperar. 00:54:48

Entonces, lo que borréis y enviéis al trash, que de verdad sea lo que necesitéis que se envíe al trash, ¿vale? Vale, lo he dicho. Entonces, clic derecho según donde vayáis clicando, por ejemplo, me meto en este archivo y doy clic derecho sobre el texto que he hecho. 00:55:03

Fijaos la cantidad de opciones directas que se pueden hacer sobre un texto 00:55:21

Si lo hiciera sobre la estrella que antes he dibujado 00:55:26

Pues en este caso son parecidas porque son las opciones directas de un elemento 00:55:30

Pero cambian, no son exactamente las mismas 00:55:35

Por ejemplo, esto de... 00:55:39

Justo esto igual no es el mejor ejemplo 00:55:41

Pero si hago un frame, luego iremos viendo que es un frame 00:55:44

Si hago un frame, por ejemplo aquí pone enviar a Figma BAS 00:55:47

Sea lo que sea eso. Si le doy aquí al texto, el contextual, lo de FigmaBuzz no sale. Entonces, nuevamente, las opciones irán variando según donde estemos. No sé por qué borro todo, solo quiero borrar esto. 00:55:51

Cuando vamos haciendo elementos o dibujando elementos, por ejemplo hago esta estrella, fijaos que aquí se van acumulando ítems. Va apareciendo la elipse, la capa. Esto es otro compartimiento común en los softwares de diseño, las capas. 00:56:05

Entonces, al final de cuentas, todos los softwares suelen consistir en un lienzo, que es como se llama el espacio de trabajo, en el que vamos a ir desplegando nuestros elementos y vamos a ir disponiendo, en este caso, nuestras fotos, formas, textos, etc. 00:56:21

Y todo se irá acumulando o disponiendo, mejor dicho sería la palabra, en forma de capa. Y capas, nuevamente habrá software que quizá limiten las capas. Aquí en Figma podemos tener infinidad de capas que necesitemos. 00:56:38

Las capas además se encuentran incluidas dentro de una página. Nuevamente intento seguir la lógica que tienen las interfaces. Nuevamente aquí también estoy hablando de Figma a nivel de una interfaz extrapolable a otra. 00:56:55

No es casualidad que cuando nos metemos en este margen, lo primero que tengamos sean las opciones generales del proyecto, vayamos bajando, tengamos aquí dos pestañas, que una es de archivo en el que estamos trabajando, nuevamente otra pestaña que son los assets, que es un poco lo que hablábamos de la community antes que podíamos bajar plantillas, etc. 00:57:13

Si estamos trabajando con assets de terceros, lo gestionamos desde aquí, veis que también contextualmente esta pestaña es una que si trabajamos en nuestro file, en nuestro archivo. Si bajamos al file, lo primero que encontramos son las páginas. Cuidado a veces también cuando veáis flechicas así porque se pueden desplegar o colapsar, se llamaría, o hacer más pequeñas o ocultar las opciones para que ocupen menos espacio de la interfaz. 00:57:32

¿Vale? Nuevamente, si veis una flecha es que se puede desplegar. Entonces, a veces no es que no esté la opción, sino que simplemente está oculta. Vais a ver que podéis trabajar dentro de un propio draft, ¿vale? De un proyecto de diseño, podéis generar distintas páginas, ¿vale? 00:58:00

Pues, por ejemplo, la página que se ocupa de, yo qué sé, esto ya dependerá de la tipología de proyecto que hagamos, pero la página que puede ser la versión móvil de nuestro diseño, ¿vale? 00:58:18

Y luego tenemos otra página que es la versión web, yo qué sé, ¿vale? Y podemos ir haciendo más páginas. 00:58:33

Podemos tener muchas páginas 00:58:42

Cada página, cuando nos vayamos metiendo en ellas 00:58:44

Pues nuevamente irá desplegando 00:58:46

Lo que está en esa página 00:58:48

¿Vale? Nuevamente os podéis meter en un proyecto 00:58:50

No ver lo que hay porque no estáis en la página adecuada 00:58:52

¿Vale? 00:58:55

Si damos clic derecho 00:58:56

A alguna de las opciones 00:58:59

Pues saldrá su menú contextual 00:58:59

Como por ejemplo borrar esta página porque no la quiero 00:59:02

O esta 00:59:05

Borrar la página 00:59:05

Algo nuevamente básico pero por si no lo conocéis 00:59:07

Podéis ir seleccionando distintos elementos o ítems usando atajos de teclado. 00:59:11

Los atajos de teclado es algo también, igual que los menús contextuales o estos paneles de propiedades, 00:59:18

algo que tenéis que ir incorporando en vuestro día a día, sí o sí. 00:59:24

Ya no solo porque ahorre mucho tiempo de trabajo, sino porque a veces hay opciones que para encontrarlas, 00:59:29

si no sabéis el atajo, cuesta. 00:59:36

Bueno, entonces, imagino que vosotros ya en vuestro propio uso del ordenador, aunque nunca hayáis abierto una aplicación de este tipo, usáis atajos, por ejemplo, y si no me decís, digo, para no perder tiempo, si no sabéis lo que es, lo explico, pero imagino que aquí todos sabemos lo que es el control C y el control V, ¿vale? Los dos atajos de copiar y pegar. 00:59:38

¿Hay alguien que no sepa de qué le hablo? Bueno, sí, pone alguien, sí, claro, bueno, yo que sé, a lo mejor hay alguien que no sabe a este nivel. Vale, atajo de teclado. Pues en vez de ir en nuestro explorador y dar menú contextual con clic derecho, copiar o pegar, ¿vale? 01:00:02

Veis que siempre va a aparecer aquí el atajo que se usa. Si dais a Control-C, copiáis y si me voy a otro punto y hago el otro atajo que era Control-V, se pegará. Lo mismo ocurre con este software. 01:00:23

fijaos que al lado de muchas de las opciones pone el atajo de teclado vale 01:00:40

pues estos atajos hay que irlos aprendiendo poco a poco y por lo que os 01:00:45

decía esto es porque para seleccionar diversas páginas esto también nos ayuda 01:00:50

en windows podéis ir clicando una a una vale y seguirá seleccionando esa pero si 01:00:54

queréis coger varias si mientras pulsáis control vais clicando podéis ir escogiendo 01:00:59

varias entonces ya cuando veis con clic derecho en alguno de ellos veis que el 01:01:04

Menú contextual se ciñe a ese número de elementos. ¿Que queremos borrar esas cinco páginas? Pues, ale, fuera, ¿vale? Si además, otro atajo, eso era con la tecla control, mientras la tenemos pulsada vamos añadiendo o restando, ¿vale? 01:01:09

Si lo hacemos con la tecla Shift, ¿vale? Y tecla Shift es como yo llamo a la de mayúsculas. Y ojo, la tecla de mayúsculas no es la que pone Block Mayus, la tecla de mayúsculas es la que en la esquina izquierda de nuestro teclado, voy a abrir aquí un teclado de imagen, a ver, ¿vale? 01:01:22

Cuando yo hablo de shift es esta tecla que tenemos aquí para hacer mayúsculas de manera temporal, no la de bloquear la mayúscula, sino la temporal. Ese es el shift, ¿vale? Y luego el alt, esas tres son las teclas, shift, control y alt, modificadoras de atajos más habituales, ¿vale? Entonces, si tenéis que seleccionar distintos elementos consecutivos con la tecla shift, se selecciona sin dejar hueco entre ellos, ¿vale? Y nuevamente, pues podríamos hacer la opción que corresponda. En este caso, borrar. 01:01:42

Vista ya que podemos ir creando distintas páginas, normalmente, bueno, en la tarea os pido que hagáis páginas, ¿vale? Así que trastaréis con ello, pero luego cada página irá teniendo sus propias layers, sus propias capas, lo que os decía antes. 01:02:10

En esencia, los distintos elementos que tenemos en nuestro proyecto. Estas capas, igual que casi todo, se pueden ir renombrando. Se pueden ir haciendo estos elementos. Nuevamente, un montón de opciones que son contextuales. 01:02:26

cada capa vais a ver que tiene además indicadores para bloquear que no se pueda mover la posición, que no se visualice sin borrar la capa, no es que estamos borrando la capa, que no se visualice 01:02:44

este tipo de comportamientos nuevamente son muy comunes o muy parecidos a por ejemplo el sistema de capas en Illustrator 01:02:55

aquí si vamos duplicando elementos vais viendo que se van haciendo más capas y puedo ocultarlas con el ojo, es un icono muy habitual 01:03:04

o irla bloqueando con un candado. Esto nuevamente en casi todos los softwares que uséis, de diseño, de audiovisual, etc. 01:03:13

Los distintos elementos de capa, las pistas de video audio, por ejemplo, en softwares de edición de video, tienen un comportamiento similar. 01:03:22

Ocultar la capa sin borrarla, mostrarla o bloquearla para que no se pueda cambiar su contenido o algunos parámetros. 01:03:31

¿Vale? Entonces, básicamente aquí estamos introduciendo que vamos a ir teniendo por cada elemento un ítem, una capa, ¿vale? Luego veremos que va a haber de otros tipos, como por ejemplo, que se pueden agrupar, ¿vale? 01:03:37

Si doy aquí al menú contextual y le digo agrupar, vais a ver que de pronto hay un grupo, un elemento que es un grupo que no existe en sí, más allá de agrupar distintos elementos que tiene en su interior. 01:03:51

Y fijaos que cuando hacemos eso, nuevamente aquí aparece una flechita. Si doy a la flechita y aquí están los elementos. Se han agrupado y los puedo mover ahora en bloque, pero realmente este grupo lo que hace es un objeto vacío que cuando lo rellenamos agrupa distintos elementos para hacer comportamientos en bloque. 01:04:02

vale 01:04:23

hasta aquí alguna duda 01:04:25

algo que queramos 01:04:27

voy a explicar un par de cosas más 01:04:28

así de introductorias 01:04:33

y a menos que queráis que veamos algo concreto 01:04:34

pues ya 01:04:36

lo vais leyendo en el tema 01:04:37

y habrá más tutorías 01:04:40

si alguien ha levantado la mano para hablar 01:04:42

si es así pues desbloqueate el micrófono 01:04:44

si lo vas a hacer por micrófono 01:04:48

y adelante 01:04:50

o no sé si lo has levantado por error 01:04:52

vale 01:04:56

Si es por escrito, pues ahora cuando la pongas la leo 01:05:00

Vamos a seguir 01:05:04

Dentro de este lienzo casi infinito 01:05:06

No es infinito, pero es muy amplio 01:05:09

Claro, aquí lo que vayamos diseñando en realidad está en la nada 01:05:12

Luego de esto, ¿dónde está la página en la que se imprimiría? 01:05:16

¿Dónde está la pantalla en la que se vería? 01:05:21

Necesitamos un marco de referencia 01:05:23

En el caso de Figma, ahí es donde entran en juego 01:05:24

esta herramienta y este concepto que es el del frame vale nuevamente el atajo aparece ahí la 01:05:27

letra efe vale y se selecciona con esta herramienta podemos arrastrar y generar un área que vamos a 01:05:32

entender pues eso como la página o como la o como como el área de una pantalla etcétera y si os 01:05:39

fijáis cuando seleccionamos esta página vale esta herramienta aquí a la derecha aparecen distintos 01:05:47

presets, distintos ajustes preestablecidos 01:05:53

con dimensiones, pues por ejemplo para un A4 01:05:56

o para un teléfono 01:05:59

iPhone 14 Pro. Vale, pues le doy 01:06:01

y esto nos da ya las medidas 01:06:05

en píxeles, ¿vale? Vuelvo a 01:06:08

indicar y enfatizo que Figma está 01:06:11

centrada principalmente en diseño 01:06:14

para pantallas, no tanto para impresión, aunque se puede hacer 01:06:17

pero no es el punto fuerte, vaya. 01:06:19

Ya tendríamos aquí el marco en el que ya tendríamos la disposición de este trabajo. 01:06:23

Entonces ya si tuviéramos que hacer la maquetación, la composición de elementos para un iPhone 14 Pro, 01:06:32

pues ya empezaríamos a hacerlo en relación a este espacio que tenemos aquí. 01:06:38

Cuando estamos trabajando en un frame, vais a ver que aquí aparece otro elemento, 01:06:44

que igual que antes os he dicho lo de los grupos 01:06:50

a medida que vayamos incluyendo elementos 01:06:53

en su interior, por ejemplo este ola 01:06:55

pues va a aparecer el icono 01:06:56

de frame, que es el mismo 01:06:59

y irá incorporando aquí 01:07:00

todo lo que arrastremos, es decir 01:07:03

vais a ver que a medida que voy 01:07:04

arrastrando cosas 01:07:07

elementos, capas 01:07:09

en ese frame, al meterlo 01:07:11

pasa a pertenecer 01:07:12

a ese frame, entonces 01:07:14

tened en cuenta que todo lo que queráis 01:07:16

que pertenezca a una pantalla 01:07:19

podéis estar haciendo distintas pantallas, por la del home, la de logueo, la que sea, 01:07:20

pues se van a ir agrupando dentro de lo que se llama frames. 01:07:26

Y estos frames son esenciales, lo veréis, a la hora de ir agrupando, 01:07:30

de ir haciendo las distintas pantallas o páginas de vuestro proyecto final. 01:07:37

Dentro de estos frames, como os he dicho, también podéis arrastrar y hacerlos del tamaño que queráis. 01:07:44

Si, por ejemplo, imaginaos, digo yo quiero tener este iPhone 14 Pro, pero no en su versión en vertical, lo que se llamaría el portrait, lo quiero en el landscape, que es la versión horizontal. Por defecto, si os metéis en los presets, aquí no os va a decir las versiones en horizontal, os las va a poner siempre en vertical, al menos las de móvil. 01:07:50

Si queréis, por ejemplo, cambiar esa orientación, como os he dicho antes, si seleccionáis, y la herramienta, no lo he dicho, pero bueno, es como la básica. 01:08:11

La herramienta de seleccionar básica es esta que tenemos aquí, la herramienta de mover, cuyo atajo es la V. 01:08:21

Si clicáis en el nombre, que también se puede cambiar, en el nombre de un frame, veis que selecciona todo lo que hay en ese frame. 01:08:27

pero sobre todo me interesa también que veáis 01:08:35

que aquí aparecerán las opciones 01:08:37

relativas al frame 01:08:39

y 01:08:40

si por ejemplo 01:08:42

quisierais rotar 01:08:45

este frame 01:08:46

para que sea horizontal, pues aquí tenéis una opción 01:08:49

de rotación y así 01:08:51

lo haríamos, ¿vale? es verdad 01:08:53

esto tiene una desventaja 01:08:55

rotarlo así, pero es bastante 01:08:57

más avanzada, os lo pongo en el tema 01:08:59

de hecho, lo suyo sería 01:09:01

decir, vale, está con esta 01:09:02

posición y qué dimensiones tiene 393 por 852 vale pues lo que voy a hacer es invertir esto 01:09:04

852 por 393 y ahí lo tenemos vale y la rotación se queda en cero bueno esto como detalle que 01:09:12

sepáis vais a ver luego en el tema porque os digo esto pero lo que me importa es que dentro de este 01:09:20

frame todo lo que esté en su interior forma parte de ese frame a nivel de grupo no a nivel 01:09:24

de agrupamiento luego existen los grupos como os he indicado antes si yo cojo este texto y fijaos 01:09:30

en la capa vale si lo saco del frame y lo pongo fuera fijaos que ha salido de ese frame vale lo 01:09:37

digo esto porque en ocasiones cuando vayamos a exportar lo que hay dentro de una pantalla de 01:09:43

una página es es importante que esté dentro del frame y que lo perciba así vale porque si yo luego 01:09:48

quiero exportarlo si yo luego quiero ir al archivo y exportar vale pues en ocasiones se puede exportar 01:09:54

de diversas formas también se puede también desde las propiedades bueno pues al final lo que va a 01:10:01

necesitar es que esté dentro de esa página de manera efectiva vale en ocasiones podemos estar 01:10:07

ahí como a medio gas y que se vea así pero fijaos que ahora mismo aunque se ve como que está dentro 01:10:11

no está dentro del frame vale cuidado de hecho hay una opción importante interesante cuando 01:10:17

seleccionamos un frame que es esta que se llama aquí de clip contento recortar el contenido vamos 01:10:24

a decir esto lo que hace es para que no sucedan estos problemas es de que algo esté dentro o 01:10:29

fuera de la página es que bueno claro esto lo hace lo voy a desagrupar un segundo dicho 01:10:35

Ungroup, ¿vale? Esto lo pone 01:10:44

El tema también, ¿vale? Si yo me pongo 01:10:49

Aquí 01:10:51

Y selecciono este clip 01:10:51

Si lo clipeo 01:10:55

Bueno, no me lo está haciendo porque es una forma vectorial 01:10:56

Pero si metiéramos una imagen 01:10:59

A ver, voy a meter 01:11:01

Una foto en un segundo 01:11:03

Vale, esto también lo veremos, lo voy a hacer rápido 01:11:04

Porque ahora no es lo que importa, pero yo puedo arrastrar 01:11:07

Una foto y echarla aquí 01:11:09

Si yo la meto dentro de este frame 01:11:10

vais a ver que cuando lo saco a los extremos, aunque sigue existiendo, me lo recorta para que tenga siempre conciencia de qué es lo que se va a imprimir 01:11:13

si imprimo esta página. Con las formas vectoriales, ya veremos un concepto de vectorial también más adelante, para aquellos que no lo sepáis, 01:11:22

no lo hace porque está rasterizándolo continuamente. Está haciendo un proceso intermedio todo el rato. 01:11:31

Pero bueno, que sepáis que al final, dependiendo de cuánto de dentro y de fuera lo pongamos, pertenecerá a un frame o no. Se puede también cambiar el orden de las capas arrastrando. Se puede ir diciendo que vaya algo delante de otro. 01:11:37

Esto es importante porque si, por ejemplo, tenemos esta figura y la ponemos así, lo que decide que visualmente se vea por encima el círculo a la estrella es la posición en las capas. 01:11:53

Lo que esté por encima en el sistema de capas es lo que se va a ver. Por ejemplo, que yo quiero ver esta estrella por encima del círculo, pues lo tendré que arrastrar para que esté encima. 01:12:07

¿Vale? Esto os lo podría también enseñar en otros softwares y suele ser el comportamiento como lo que esté encima en la estructura de capas se verá también visualmente por encima, a menos que hagamos ciertos requiebros que hagamos conscientemente y porque no queramos que sea así. 01:12:17

¿Vale? Entonces ya podríamos ir generando distintos frames, ¿vale? Para ir trabajando en nuestros diseños, que es básicamente lo que se os pedirá en la tarea de esta unidad. 01:12:33

Hasta aquí, ¿qué tal? ¿Algo que queráis que veamos? ¿Alguna curiosidad? ¿Algo que os haya surgido leyendo el tema? Porque no me quiero extender mucho más en el sentido de que, bueno, voy a dar una pincelada más de un par de cosas, pero que quiero que leáis el tema. 01:12:49

vaya vale todo bien vale algo importante que también es común a toda la interfaz por supuesto 01:13:06

es la navegación por esa interfaz es decir cómo movernos o cómo ampliar habréis visto que yo me 01:13:13

voy moviendo y me voy acercando me voy alejando digo quiero ver ahora este frame ahora este otro 01:13:18

vale esto se puede hacer de diversas formas y cada software también tiene sus sus fórmulas no 01:13:23

No todos son iguales, aunque también, como os he dicho antes, normalmente todos suelen ser parecidos, ¿vale? Entonces, hay un menú aquí en el panel de inspector, en la parte de arriba, junto a otras opciones que ya se irán viendo, que es este porcentaje que tenemos ahí. 01:13:31

Si nos ponemos, bueno, otra cosa también que es como obvia, pero si nos ponemos encima de una opción, de un parámetro y dejamos quieto el ratón, normalmente nos enseña lo que se llama la tooltip. En español no sabría decirlo, pero bueno, la indicación de qué es esa herramienta. En inglés es tooltip. 01:13:46

Aquí, si nos ponemos, va a decir, esto es las opciones de zoom y visionado, ¿no? Y visión. 01:14:03

Si desplegamos, hay distintas opciones para hacer zoom in. 01:14:11

Si damos aquí, pues vamos a ir viendo que vamos haciendo zoom, ¿vale? 01:14:15

Por porcentaje normalmente del 100, si le doy hacia atrás del 50, ¿vale? 01:14:18

Podemos escribir directamente el nivel de zoom, 75%, distintos niveles de zoom y otras opciones, ¿vale? 01:14:23

Esta forma de ir escribiendo el número, dando a zoom in o zoom out, no es la mejor, o al menos no es la más ágil. Hay otros atajos y aquí entran ya también las teclas modificadoras que he dicho antes, control, shift y alt. 01:14:30

Y lo que hagamos con el ratón, que si tenemos un ratón, esto lo ponía en la requisito de entrada al módulo, de cuando os matriculabais, es muy importante o es casi esencial si vais a usar ratón, que sea un ratón de tres botones con ruleta. 01:14:45

¿Vale? Normalmente ya son los que se venden, pero bueno, en ocasiones puede que tengáis uno de solo dos, porque la ruleta del ratón y el botón central suelen ayudar en todos los softwares a esta navegación, ¿vale? 01:15:05

Si lo tenéis aquí delante y lo podéis probar, si no, hacedlo después, si clicáis en la propia ruleta, si apretáis en la ruleta, veis que el cursor se convierte en una mano y al arrastrar nos vamos moviendo. 01:15:17

Aquí no estamos moviendo ningún elemento, nos estamos moviendo nosotros por la interfaz, ¿vale? Para ir viendo. 01:15:29

Nuevamente, si no tuvierais este ratón, hay una herramienta secundaria aquí, que es la mano, que ya se queda, no hay que tocar nada con esta mano, 01:15:36

y arrastrando nunca seleccionamos elementos, sino que nos vamos desplazando por la interfaz. 01:15:43

Pero normalmente lo que queremos tener es esta herramienta de selección, que vamos clicando y seleccionando y moviendo y haciendo lo que queramos, 01:15:51

Y si queremos temporalmente, de manera temporal, activar la mano para movernos, clicamos en esa ruleta y nos movemos. En Illustrator, por ejemplo, exactamente el mismo comportamiento. Es el cursor de selección, si os fijáis. Y cuando clico la ruleta, muevo la visualización. No estoy moviendo la página, me muevo yo. 01:15:57

que quiero hacer zoom 01:16:18

pues digo, quiero hacer zoom a la letra F12 01:16:21

si dais a control y mientras 01:16:24

mantengáis pulsado giráis la ruleta, os vais acercando 01:16:27

que giráis con el control hacia atrás 01:16:30

pues os vais alejando, si no estáis 01:16:33

pulsando el control veréis que sube y baja la visualización 01:16:36

lo mismo que si arrastramos hacia arriba y abajo con la mano 01:16:39

pero el zoom es mucho más rápido para ir a la parte 01:16:42

que nos interesa con esta ruleta y decir, yo ahora quiero ir a Lola y ponernos ahí, que usar estas opciones que además no nos dice exactamente 01:16:45

en qué va a hacer zoom, ¿vale? Entonces, bueno, pues es una opción que hay que conocer, ¿vale? Entonces, si pulsamos este botón central, 01:16:53

nos desplazamos, si pulsamos con control y damos también a la ruleta, la giramos, hacemos zoom sobre la parte en la que estamos situando el cursor, ¿vale? 01:17:05

comportamiento comportamiento básico luego vais a ver también común bueno digo una cosa que es 01:17:15

importante aunque nosotros podamos estar trabajando al nivel de zoom que queramos sí que es verdad que 01:17:24

esto que estamos diseñando en este caso luego va a estar representado en una pantalla en una página 01:17:30

etcétera cuando queramos comprobar cómo se ve de verdad y que no se ve algo pixelado o no vale el 01:17:36

el nivel de zoom que hay que poner es el del 100%. 01:17:42

Este sí es importante de vez en cuando tenerlo en cuenta, 01:17:44

porque si no, de pronto podéis ver elementos pixelados 01:17:47

porque os estáis acercando mucho. 01:17:49

Y esto realmente es un zoom que estamos haciendo nosotros, 01:17:52

estamos casi a un 1000%. 01:17:54

No es que esté pixelado, es que nos estamos acercando demasiado. 01:17:56

Para ver si algo está pixelado o no, vamos al 100% y decimos, 01:18:00

bueno, si nos acercáramos sí. 01:18:02

O podría estar más nítido, pero es verdad que al nivel de zoom 01:18:05

para el que está diseñándose esta interfaz, 01:18:08

Pues se ve bien, ¿vale? Entonces también contad con esas opciones. Este 100% a la que os estoy diciendo es fiable y no fiable porque cuando os digo, por ejemplo, que se puede hacer para páginas, aunque tú pongas un número de píxeles concreto de ese frame, ¿no? 01:18:10

Sirve para no ver artefactos o elementos pixelados, pero tampoco fíjese en la medida final. 01:18:40

Cuando es una pantalla digital sí tiene más sentido. 01:18:46

Cuando es algo impreso, por ejemplo, no, porque depende mucho de las medidas del monitor. 01:18:49

El zoom del 100%, si estuviera una pantalla más pequeña, el papel se vería más pequeño 01:18:54

y la hoja de papel es la que es, debería tener unas medidas concretas. 01:18:58

También viene de que en digital se usan píxeles y en impreso se usan otras medidas, como los puntos, etcétera, que sí que son basados en medidas físicas. Los píxeles suelen ser relativos al número de píxeles, de cuadraditos, vamos a decir, que emiten luz, que tenga una pantalla. 01:19:03

Entonces, bueno, es otra forma de distribuir de lo que también se habla más adelante. Cuando con la herramienta de selección, con esta herramienta de mover, la V, ¿vale? Seleccionáis un elemento, vais a ver que por defecto aparecen este recuadro azul, ¿vale? Me acerco un poco. Este recuadro azul con distintos, lo que se llaman tiradores o manejadores, ¿vale? 01:19:21

Entonces, esto también es común normalmente a los distintos softwares que permiten mover y escalar objetos o elementos de nuestro diseño. 01:19:44

Van a aparecer aquí medidas o indicadores, marcas, pues por ejemplo, que si os ponéis en un extremo va a permitir que escaléis y hagáis más grande o más pequeño el elemento. 01:19:58

¿Vale? Y si os ponéis en una esquina, fijaos en los cursores, que aparece esa curvatura, para si arrastráis podéis rotarlo, ¿vale? No es solo moverlo, podéis también escalar y rotar. 01:20:08

¿Vale? Esto, si vamos a 01:20:21

Photoshop, a Illustrator, a cualquier otro software, vais a ver que yo cuando 01:20:25

coja cualquier capa, mira, he bloqueado todas y no podía 01:20:28

vais a ver que hay algo parecido, puedo, si me pongo en la esquina, rotar 01:20:32

¿Vale? Esto no rota, bueno, voy a poner un cubo aquí 01:20:36

¿Vale? Si me pongo aquí, lo roto, ¿vale? En la esquina 01:20:39

lo puedo hacer más, un grande más pequeño, lo puedo mover 01:20:44

con la herramienta de selección básica 01:20:48

y luego vais a ver, mirad por ejemplo aquí 01:20:50

si me voy a estos extremos, herramientas que pueda ver 01:20:53

esto depende del software, pues para curvar 01:20:55

los picos 01:20:57

los bordes, aquí por ejemplo 01:20:59

ocurre también, si yo tiro de aquí puedo 01:21:01

hacer más redondo el diseño 01:21:03

o no, bueno, esto ya son otras herramientas 01:21:05

más avanzadas, pero que sepáis 01:21:07

que algo básico también son los manejadores 01:21:09

de transformación que son estos 01:21:11

que se basan en tres, mover o cambiar 01:21:12

la posición y fijaos que en las propiedades 01:21:15

A medida que voy moviendo el elemento, se puede ir también ajustando con las propiedades. Tiene una posición dentro de los lienzos. O la rotación también se puede ajustar desde aquí o desde aquí. O la escala, que básicamente en este caso son las dimensiones. 01:21:17

Todas estas dimensiones, si supiéramos que son de 500, se puede meter a mano, pero se puede hacer también, por ejemplo, arrastrando desde el propio parámetro, si os ponéis, donde pone la magnitud o el indicador de qué es esa dimensión o ese parámetro, mejor dicho, esa propiedad, podéis arrastrar a izquierda o derecha para ir también haciendo las variaciones de modos más o menos precisos. 01:21:34

Y luego hay atajos, por ejemplo, si rotamos con el shift, esto también nos pone indicaciones, veis que lo va haciendo en incrementos de unos grados concretos, ¿vale? 01:22:03

Pues bueno, esto ya es ir probando y probando según el software y las opciones, pero en general, esto que os he contado con este software, 01:22:11

si vais a cualquier otro, va a tener comportamientos muy parecidos, como podéis ver, ¿vale? 01:22:19

Entonces, bueno, el objetivo de hoy era un poco servir de modo de introducción a una interfaz de diseño, ¿vale? 01:22:23

En el tema, eso, se va detallando más que son distintas herramientas, distintas propiedades que usaréis, todo lo relativo a tipografía, por supuesto, también en FIMA, a veces os pongo ejemplos de Microsoft Word, bueno, pues la que sea, ¿vale? 01:22:31

No sé si alguna duda o algo que queráis que tratemos, porque por mi parte era un poco lo que quería que viéramos hoy, para no ir más allá. 01:22:44

Mientras alguien me dice algo o no, eso, me apunto lo relativo al carnet de estudiantes, ¿vale? 01:22:54

Para que lo tengáis. Eso no sé si va a ser algo inmediato, pero bueno, al menos que contéis con un plazo. 01:23:00

Y eso, no sé si algo más que queráis que veamos. 01:23:08

O alguna duda, ¿eh? Algo incluso que no hayamos tratado, alguna inquietud que os surja lo podemos ver. Que de momento no me sacan del aula, así que vale. Pues todo claro. Bueno, quedan muchos temas, queda mucho por ver, así que id practicando y en la siguiente vamos viendo dudas, ¿vale? 01:23:15

genial, pues bueno 01:23:34

no sé, simplemente por hacerme un poco 01:23:36

la idea, aquí cada uno tendréis un nivel 01:23:38

y una 01:23:40

procedencia, ¿no? a nivel de 01:23:40

esto es muy básico 01:23:43

o ya más o menos todos conocíais 01:23:46

lo que he ido contando, entiendo que a lo mejor no en este 01:23:48

software, pero 01:23:50

digo, hay alguien, sobre todo me importa, hay alguien 01:23:51

que le suponga algo 01:23:54

que le suponga un mundo esto 01:23:56