Whimsical: diagramas de flujo y Wireframes

1. Introducción: Hola. Mi nombre es correcto. Bien diseñado. Haciendo herramientas. Este primer año estás hablando de software físico y online. Esa última colaboración. Marcos de alambre, cercanía del sitio de otras próximas características. Simple. Y creo que te va a encantar, así que saltemos a la derecha. 2. Introducción capturas: Empecemos iniciando sesión. No tienes ningún contador listo. se puede decir, pero ya he creado uno. Entonces voy a iniciar sesión. Y lo que primero vemos es nuestra página de aterrizaje aquí donde en realidad estamos en la carpeta Examples actualmente donde nos han dado tres ejemplos que podríamos ver. Vamos a buscar en esos en tan solo un segundo aquí, pero has hecho clic en el plus. También puedes crear otra carpeta donde realmente podrías almacenar tus tableros dentro de eso para iniciar un nuevo tablero. Tenemos dos opciones actualmente, eso es un diagrama de flujo y el marco de alambre que tenemos a los próximos tableros que las notas pegajosas y la mente mapean. Tenemos cuatro tableros gratuitos que podemos crear con esta versión gratuita. Los ejemplos no cuentan como esos gratuitos, por lo que aún podríamos crear cuatro más. Si realmente entra en uno de estos ejemplos, puede mirar dentro de él y puede ver que en realidad ha estado bastante poblado con realmente algunas cosas que vamos a construir. Pero puedes moverte por aquí y en realidad puedes hacer estas cosas a tu alrededor, y en realidad puedes cambiar el texto ahí tableros totalmente acreditables, lo cual es bastante genial. Y luego para salir de esto, sólo tienes que subir a la esquina izquierda. Haga clic en ejemplos y eso te llevará de vuelta a esta página aquí. Entonces, empecemos. Comencemos primero con crear un diagrama de flujo y luego a continuación pasaremos a crear un marco de alambre. 3. Flowchart (también es la FC): Por lo que para crear un nuevo tablero, seleccionamos cuál queremos crear. En este caso, quiero crear un diagrama de flujo. Entonces selecciona esa. Y aquí me presentan un lienzo en blanco y justo fuera del bate, en realidad puedo a su nombre. Llamemos a este, uh, uh, sándwich. Ya verás por qué en un segundo que nombré un sándwich, Pero luego hice clic en regresar y eso creó a la izquierda. Tenemos nuestra barra de herramientas. Vamos a ver todas estas diferentes piezas individuales a medida que vamos creando nuestro diagrama de flujo sándwich. 4. FC con herramientas y barra de herramientas: empezar con la herramienta de forma, y esa es la opción superior en la barra de herramientas. También es atajo de teclado s para forma de anuncio. Haga clic en eso. Ya ves que tenemos una variedad de formas. Estos eran en realidad símbolos de diagrama de flujo. Y si haces una búsqueda en Google de símbolos de diagrama de flujo, puedes ver cuál es el nombre de cada uno de uno y cuál es el propósito de cada uno. En este caso, vamos a empezar con esta pastilla en forma de uno, que en realidad se llama terminación, que a veces se encuentra al final del inicio de un diagrama de flujo. Entonces si hago clic en eso y podría dejarlo en mi campus, ya verás que tiene un montón de opciones. Nos metemos en eso en tan solo un segundo, pero si hago clic lejos de eso, ya lo puedes ver. Un seleccionó eso. Pero también puedo hacer clic en él para volver a seleccionar. Entonces podría moverlo y posicionarme en lo que quisiera. También, cuando seleccionó, tuvimos la opción de re dimensionar su Si mantengo el turno y muevo estos mangos alrededor redimensionarlo constreñido, pero también puedo no te turno puedo dar forma al tamaño de. No obstante me gustaría. Entonces solo me voy a ir en esto por ahora. Entonces hablemos de cuáles son todas las diferentes opciones en la barra de herramientas encima de ella. 5. FC con la herramienta y barra de herramientas de 2: Por lo que las dos púas de nos permite Teoh añadir texto a nuestra forma. También podemos cambiar la forma para que puedas seleccionar una las otras formas que tenemos también podemos agregarle color. Entonces digamos que quiero hacerlo amarillo, por ejemplo, podemos elegir tener un color de relleno para tenerlo con delineado también tener una discontinua la capacidad duplicada para agregar un comentario Y entonces podríamos simplemente insultar como esa forma ahí. Entonces como que se mueve aquí abajo escupir mensajes de texto eso. Voy a llamar a este inicio ya que este es el inicio de mi diagrama de flujo. Una vez que entré en el modo texto, podía ver que ahí editor de texto me permite cambiar el tamaño del texto. También puedo hacer un tazón talaq encender y apagar esos para que pudieras ver tengo unas opciones correctas y aquí también, cómo es mi Lyman y también cómo es la alineación desde la alineación horizontal y los lineemen verticales. Entonces ahora que tengo, uh, uh, que rápido que a un selecciónela 6. FC: conectores y formas de forma: una cosa que me gusta mucho de caprichoso y lo hace también muy rápido. Es esta idea de lo que voy a llamar conectores de auto. Pero en realidad solo está generando una conexión rápida a una nueva forma. Va a hacer un duplicado de la forma con la que ya empecé en este caso. Tenía esta pastilla amarilla y teniendo más de una de estas puedes ver va a crear otra de esas. Haga clic en eso y al instante tengo otro. Y éste en realidad podría tener texto si quisiera. Por supuesto, podría cambiar la forma, el color y todo lo que vamos a hacer en un segundo aquí. Siguiente parte te va a mostrar que una vez que tengamos estos seleccionados, en realidad puedo hacer este problema. Hacer auto para crear un tenedor fuera de mis formas aquí. Por lo que hago click en eso. Y ahora realmente tengo que hacerlo, en este caso a puntos de partida. Voy a llamar al 2do 1 All Stars es mi punto de partida alternativo. Esto es realmente relevante para lo que estamos haciendo actualmente, pero llamaremos dos puntos de inicio diferentes sin embargo. Entonces le doy este poco espacio aquí. Se puede ver que mover estos alrededor de éstos se conectaron continuamente a las formas de sus formas. Una vez que creamos estos conectores, así una posición que sobre su esta forma en realidad no necesita otra de estas formas. En realidad voy a cambiar este por otro joven y tal vez hacerlo verde al hacer esto en un diamante, que también se llama decisión, y podría mantener el turno, y puedo redimensionar eso un poco más grande, y voy a centrar eso aquí, realidad, texto de persona en eso. Voy a llamar hambriento a éste. Entonces ahora tenemos que tomar una decisión aquí. Por lo que vienes a empezar en este. La primera pregunta que estamos haciendo es: ¿Tienes hambre? De seleccionar eso? 7. FC - añadir conector: Quiero crear dos nuevas formas. En realidad estoy agregando dos rectángulos, así que también podría hacer camión de teclado que son en este caso. Sólo voy a seleccionar en eso cuando voy a dejar caer una aparece y voy a llamar a ésta, hacer el almuerzo Ahora, también podría elegir duplicar esta de aquí para que pudiera simplemente duplicar eso así . También puedes, si está seleccionado, puedes ver que podrías decir que escuchas que no puedes hacerlo todo y arrastró su Danos una pequeña pista ahí. Por qué, sin embargo, sobre esto. Entonces si fuera a dar clic en todo esto hacia abajo debería y luego arrastro eso hacia abajo. Este caso estoy sosteniendo turnos que lo arrastra directamente hacia abajo. Entonces esa es la otra forma de crear eso también. Entonces voy a borrar este que yo había hecho aquí, y voy a llamar a éste, ir a dar un paseo. Aquí están mis opciones. Y lo siguiente que hago es que estaba mostrando cómo acabamos sobre uno de estos Puedes ver que tenemos estos conectores, pero este chico en realidad no tenía los creados aquí, Así que en realidad agrega algunos de ellos así que la próxima vez que voy a mirar es llamado conector de anuncios o atajos de teclado. ¿ Ver? Haga clic en eso. Y lo que puedo hacer es hacer click en la forma que quiero. Y entonces podría simplemente arrastrar hasta la otra forma. Quiero conectarme automáticamente. Yo soy capaz de agregar algún texto en este lugar. Voy a añadir Sí, tengo hambre. Entonces, por tanto, voy a hacer el almuerzo. Además, cuando haces un conector, puedes cubrir esos. Entonces dicen, quiero hacer esto en verde. Podrías convertirle en un guión. Sigue ordenando algunas de las opciones que podrías hacer también y el diferente lugar de donde está la punta de flecha. Entonces puedes tener esto en el frente, um, contra el también. También podemos tener crear codos y estos hacen diferentes formas tipo que tenemos por aquí ya y otra vez. También tenemos duplicar y sumar un común a eso. Hablaremos en los comentarios un poco más tarde. Por lo que los fenomas Gandhi seleccionan que ahora también quiero crear conector entre esta opción. Mi no opción ahora algoto también, también puedes hacer en lugar realmente yendo y usando la herramienta de conector de anuncios es si la forma está cerca de uno de ellos. Si solo haces clic en el sobre sobre esto, hago clic en eso. Va a hacer una conexión con la forma más cercana. En este caso, hizo clic e hizo una conexión ahí mismo. Entonces eso fue genial. Ahora bien, si quiero agregar texto, podría ver ese distante pop up automáticamente. Entonces si solo hago doble clic en él a veces no funciona de inmediato. Pero tengo que entrar ahí y hacer doble clic en él. Y ahí vamos. Ahí está mi texto. Esta no es mi opción y dormí en las pandillas. Yo quiero cubrir este. Se llama Spread y no espaciarlo apropiadamente. Por lo que ahora tengo la opción. Si tengo hambre, sí, que haga el almuerzo. Si no lo estoy, entonces iré a dar un paseo. 8. FC con texto: Entonces me voy a desplazar un poco por aquí y por el de una laptop mashup en mi regazo en el trackpad. Solo estoy usando dos dedos que me permiten anotar alrededor de mi campus. En realidad voy a añadir otra forma. Voy a añadir otra decisión. tiempo y yo podríamos haber copiado, uh, duplicado el hambriento en este caso, decidí solo dejar de hacer ahí. Y voy a hacer sándwich una opción sobre la que tomar una decisión. Ahora. Ya sabes, esposa llamó a este lienzo. Quiero decir llamado un sándwich deportivo. Este caso otra vez, haría un conector en algún lugar de aquí. Podría hacer un conector a ese click off mal. Si hago doble clic en esto, entonces vamos a ver. Sí, eso es lo que me gustaría una opción de sándwich. Cubramos este. Hagamos este naranja para nuestro salmón ahí. Entonces algo más que alguien que Teoh hable de agregar fue la herramienta de texto. Así que agrega el atajo de teclado de texto t Así que selecciona en ese. Este caso puedo bajar eso y decir, tal vez esto sea una nota para mí. Debe incluir una lista de sándwiches. Entonces eso es sólo algo que anote a mí mismo si levitas. El piel que ves por aquí a la derecha, Tuvimos esta manecita como y arrastra por ahí. Esto en realidad me permite por tanto convertir esto en un párrafo donde entonces podría tener múltiples líneas de texto. Voy a centrar estos. Podría hacer un poco más pequeño, tal vez incluso hacer un poco. Eso probablemente sea bueno. Y luego simplemente lo deslizo hacia arriba. Entonces tal vez esta sea una nota para mí que durante el tipo de sándwiches no listados, y eso es algo en lo que podría pensar. 9. FC - añadir ícono: los dos siguientes que vamos a ver es agregar Icon. Esta herramienta me parece genial. Tengo usos cuando un montón cuando estoy haciendo diagramas de flujo. Esta funda es el atajo de teclado X. Así que haz click en eso. Y en esto hay una tonelada de iconos que podríamos usar que están incluidos con caprichosos, y yo podría buscar iconos. Empecemos primero el ir a los animales en la naturaleza y se puede ver que claramente tengo la opción, que son los multi colores que se pueden ver ahí son coloreados. También puedo tener sólo un Phil sólido, o también puede tener una versión león de eso. Entonces volveremos al multi color y me gusta este cangrejo de aquí. Entonces, vamos a dar click en eso. Y luego doy mudanza mi aquí. Hice clic para dejarlo justo ahí. Y, por supuesto, nuevo también puedes entonces redimensionar es al tamaño que me gustaría. Y también tienes estos otros conectores, igual que lo hicimos en nuestra forma. Entonces también podemos crear esto en este caso, parece que uno debería conectarse a mi imagen, pero sólo voy a desmayar que estuvimos ahí en cualquier momento. También puedes ir y decidir que quieres cambiar qué tipo de color y tienes. Por lo que quieres solo llenar el león Subjetivo, multicolor. También puedes rotarlo. También no puedes tener color en absoluto. Para que pudiera cambiarlo a, como, una sensación sólida así. Por ejemplo, consigue un comando Z y vuelve a mi multi color así con los diferentes colores que hay en él. También podemos cambiar, o conservo ir aquí y ver si podemos entrar ahí. Y a lo mejor queríamos algo diferente. Entonces Pero me voy a quedar con el cangrejo por ahora. Entonces que yo. Un Seleccione que en el icono del anuncio, también se puede buscar algo tan bien como lo había mencionado. Entonces si entro aquí y quiero buscar búsqueda de sándwich y ver qué tienen aquí. Entonces a medida que empiezoa escribir, a escribir, ya tenemos algunas opciones. Este caso quiero me gusta este, pero voy a querer sólo un solo todavia de eso. Entonces haz click en eso y luego voy a dejarlo por aquí en alguna parte. Entonces este caso sí quiero ser de diferente color ya que es el sándwich vegetariano. Hagamos bolsa verde Perfecta. Igual que eso. Pero tal vez esto es un cangrejo y vegetales. Entonces ahí vamos. Ahora sándwich de cangrejo y veggie. En este caso, realidad voy a agregarle un conector. Por lo que sándwich espero que hagamos esto como un texto a. Entonces voy a deslizar esto. Dejemos que se acabe el cangrejo. Y yo estaba, como, este año para poner Sí. Entonces, ¿ almuerzo grande? Sí. Sandwich. Sí. Voy a tomar un sándwich de cangrejo y veggie. Suena genial. 10. FC con sube imagen: siguiente herramienta te voy a mostrar es el atajo de teclado de subir imagen. I Esto me permite subir una imagen. En este caso, tengo uno de mi escritorio aquí mismo este delicioso sándwich vegano vegano. Por lo que es click en abrir que esto también tiene el mango. Entonces si mantengo pulsado el turno, entonces puedo arrastrar eso para redimensionarlo. Hagamos un poco más pequeño. Esta opción aquí realmente me permite tener un marco o ningún amigo. Para que pudiera tener un poco de frontera alrededor o no. Yo sólo voy a mantenerlo un poco de frontera, y voy a deslizarlo arriba aquí. Entonces me desplazaré un poco hacia arriba para demostrarlo, Y de esta manera puedo recordar qué tipo de delicioso sándwich voy a tener para cenar aquí. 11. FC - Añade enlace y comentario: por lo que la herramienta final en la barra de herramientas es teátrica. Piensa en el atajo de palabra clave K Haga clic en eso. Esto en realidad nos permite agregar un enlace externo a nuestro diagrama de flujo. Mucho podrías abrir nueva pestaña. Voy a buscar este arrendamiento fiscal Xhaka. Y Santa Cruz es un gran lugar de sándwich. Aquí vamos. Para que sólo voy a seleccionar a tu enfermo va a luego copiar eso, volver a mi Salinger y luego sólo voy a pegar eso aquí. Oops, quería pasta. Aquí vamos y agregamos. Entonces primero deja caer un pequeño símbolo aquí. Yo puedo hacer eso. Fuera del camino. Ahí se puede ver que tenemos. Este es el sabor Khan de la página web para que tengamos ese pequeño símbolo. Y si tuviéramos que hacer clic en esto, claro, lo que va a pasar es que va a lanzar el sitio web así como así. Eso es bastante guay. También en esta opción, si vuelvo a esto cuando hago click en la parte com sabor, damos click en la cámara. En realidad tenemos la opción de tener el pulgar ahora, que tenemos ahora tienes el cabezal de escritorio, que pone ahí solo una parte de la página. También podemos seleccionar para tener la página completa, que en este caso es bastante larga. Entonces si me alejo un poco de diapositiva porque esa es toda la diferencia, todo el menú, esta es toda la página. Yo estaba ahí, y la manera también puede tener la opción de las versiones móviles de eso o quitando la instantánea, supongo que a menos que vas a pulgar ahora la versión, que es otra opción, que es una versión un poco más pequeña de el sitio web. Simplemente Esa es una especie de la versión pequeña de los Sitios web tenía, Así que me gusta que da una pequeña instantánea rápida de ella, y creo que eso es un poco perfecto ahí. También podemos duplicar esto y también comentar como otras partes que hemos visto. Entonces este caso, en realidad, vamos a añadir un comentario que esto te permite. Ver, este es el primer comentario en la página. Hay un número uno va a decir gran lugar para comer y realmente es que tan hit, manda Y allá vamos Ahora le he agregado un comentario a eso. Entonces quien sea también parte de este tablero que es parte y caprichoso también. También pueden ver estos comentarios de que iban a dar click en él. Pueden ver que también pueden contestar que podrían decir que, Sí, han estado ahí, y efectivamente fue un gran lugar. 12. FC - cierre: genial. Bueno, eso envuelve la barra de herramientas izquierda. Como puedes ver, hay muchas opciones que podríamos hacer cuando estamos construyendo son diagramas de flujo para salir de este diagrama de flujo. Vamos a la izquierda, un pequeño menú aquí hacemos clic en eso, y luego simplemente podemos volver a ejemplos, y también podemos cambiar a diferentes tableros de en mi incluso han crear un nuevo diagrama de flujo o crear un nuevo marco de alambre de fuego. Este caso, solo soy rápido, atrás y segundos. Vuelve aquí a mi página de aterrizaje. Acuérdate de llamar a esto tu panel donde pude ver todos los diferentes ejemplos que tengo . 13. FC - Challenge de VUI: mira, dice tiempo para un reto. Y este reto es crear una interfaz de usuario de voz para cualquier tipo de dispositivo que pudieras tener o simplemente podrías elegir uno yo realmente teniendo Alexis. Entonces voy a dar un ejemplo rápido de crear uno para eso. Vamos a hacer eso,por supuesto, por supuesto, usando un diagrama de flujo, ya que eso es lo que estamos trabajando ahora mismo. Entonces voy a hacer clic en nuevo diagrama de flujo para abrir un lienzo en blanco, y esta habilidad en particular que voy a crear se va a llamar Ricky. Y esto va a ser una habilidad que me permita realmente reservar un auto Ricky. Entonces cuando el pequeño tipo de tres coches del mundo para recogerme y llevarme a algún lugar la ciudad ahí, Así que es una especie de la versión uber de otro rickshaw. Entonces empecemos, y como que veas a qué me refiero, y voy a hacer que creas tu propia habilidad. No tiene que ser lo que estoy haciendo. Pero pensé que al menos tendríamos un punto de partida ahí, Así que voy a empezar con ir a un rectángulo aquí, y así solo va a ser como invoque la habilidad Alexa también puedes, cuando crees para meterte en crear usuario de voz interfaces, cuando usas algo como Alexa para invocar, y podrías simplemente invocarlo con un tiempo, con o sin una solicitud, en este caso, solo lo voy a tener sin solicitud. Por lo que en realidad acabas de abrir primero la báscula, y luego puedes hacer tu solicitud. Así que llamemos a éste, Alexa, uh, uh, abre rasguños, Rick. Y ahí vamos, por supuesto, puede hasem las opciones. Entonces la primera opción que va a tener es la ubicación que me gustaría ir. Entonces una vez que abrí eso atrás y luego digo que la ubicación es 100 Main Street y eso es en cualquier pueblo , California, va por ahí. Entonces en este caso, también voy a ir un poco más allá aquí, y voy a dejar uno de estos aquí mismo, anuncios en texto. Entonces llamaremos a esta entrada de un usuario. Entonces esto es algo que el usuario está diciendo. Voy a colorear estos leídos. Hay una buena lectura para ello. Voy a encogerlo un poco. En realidad voy a copiar este. Yo llamo a este Alexa Output Esto es algo que Alexis diría de nuevo y vamos a cubrir este. Hagamos estos amarillos. Entonces voy a arrastrar sosteniendo Ault y el cambio para hacer una copia y restricción yendo directamente hacia abajo. Y yo llamo a esto una lógica del sistema dice que es algo que sucede en segundo plano. Hagámoslo estos azules en realidad va a seleccionar todos estos. Voy a comerme todos estos contornos. Ahí vamos. Economía es que puedes ver Puedo cambiar algunas de estas opciones seleccionando múltiples cosas a vez y luego hacer mi selección ahí. Entonces este caso, en realidad, ambos de estos o algo que soy usualmente y pongo algo de color tanto estos rojos como ambos contornos que allá vamos. Lo siguiente que quiero agregar es la opción de decir que no dije una solicitud de inmediato, así que Alexa realmente me preguntaría qué ubicación quiero. Entonces voy a dar clic y arrastrar esto aquí abajo. Y entonces esta es Alexis diría que sabría a qué hora era en los días que en este caso, son buenos días, y ¿a dónde te gustaría ir? Esto, por supuesto, va a ser miradas, pero así que pon eso ahí dentro, y luego esta niña la va a conectar a eso Un poco más de espacio y aún no hay clic en esto. Es un complicado. Por lo que tenía que conseguir lo correcto. Ahí vamos. El doble clic derecho para que se inicien las cosas de texto. Por lo que este chico iba a poner Usuario no especifica ubicación de inmediato para que suceda. Y como me han especificado ubicación de incendios, este caso, entonces Alexis va a preguntar a dónde quiero ir. Entonces voy a copiar este de aquí, todo en turnos. Deslízala sobre éste. Voy a exponer lo que está pasando en segundo plano. Así que comprueba si hay disponibles Ricky contra Ricky's o los auto rickshaws. Entonces en este caso, este que va a ser azul, me voy a conectar de esta manera. En realidad, ahí vamos. Entonces en este caso, aquí es donde en segundo plano, la habilidad está revisando para ver si hay disponible Ricky. Entonces, pues, flexibilidad para responder con qué hora podría ser recogido, por ejemplo. Por lo que no voy demasiado lejos en esto. Yo solo quiero darle tipo de idea básica. Obviamente puedes llevar esto realmente lejos. Y me emociona ver qué diferente, uh, y la escuela Alexis se te ocurre o podría ser Google home. Podría ser Siri en iPhone. Podría incluso ser un juguete que use voz. No importa lo que elijas, solo la idea de que estás haciendo una interfaz de usuario de voz en el uso de un diagrama de flujo para mostrar las muchas opciones con las que se podría presentar el usuario Grandes gracias. 14. Guitarra de Wireframe (o WF) : introducción: a continuación, vamos a mirar la creación de un nuevo marco de alambre. Entonces haz click aquí y esta llama a este Twitter porque eso es lo que voy a estar reconstruyendo . Aquí está para el ejemplo. Lo primero que vamos a ver es agregar marco. Entonces vamos a saltarnos a Adam. Dejar por ahora ir a la derecha para agregar deshilachado, que es atajo de teclado f Haga clic en eso. Ya ves, tenemos una variedad de marcos diferentes que podríamos agregar. Yo sólo soy adecuado para la ventana. Entonces voy a estar haciendo la versión de escritorio del mismo. Entonces solo dejo caer eso ahí abajo y ahí lo tenemos. Nuestro marco. También podemos hacer doble clic en esto. Si queremos cambiarlo, vamos a decir que llamo a éste principal y luego alejar un poco. Este marco también se puede redimensionar para que pueda estirar. ¿ Cómo? ¿ Verdad? Me gusta hacerlo si quiero hacer ah, marco de tamaño particular. Um, va a hacer 12. 80 para 1964 se ve abajo. Aquí es donde vi el tamaño en esto. También puedo agregarle un comentario si quiero, Pero por ahora, solo lo voy a dejar así 15. WF - añadir elemento: Volvamos al que nos saltamos aquí. Agregar elemento. ¿ Qué teclado? Atajo e Si abrí eso, ya ves, tenemos todo un montón de elementos diferentes que podríamos elegir en este caso voy a dirigir. Que pasa a ser también atajo de teclado son Así que hago clic en eso. No, déjalo en alguna parte. Me gustaría ver que esto también tiene una barra de herramientas de editor aquí, similar a lo que teníamos en los videos de diagrama de flujo donde podría cambiar la forma de este particular a la forma de píldora o a un óvalo. También ir por un relleno versus delineado versus guión. Ella es tu color. Este caso voy a ir por un amarillo. También puedo en ícono duplicado y común en eso. Entonces vamos a hacer clic fuera de eso. Iba a posicionar esto aparecer, y luego voy a arrastrar un poco para que sea sobre el tamaño aquí que vamos a hacer a continuación en realidad va a ser de tamaño. Es un poco más abajo de esta manera. Y luego te estoy pidiendo que hagas click en esto y voy a un Mac Ault shift drag u option shift drag en una PC arrastrando eso aquí abajo. Pequeña brecha de pollo. Barra blanca aquí podría cambiar eso abajo por el camino aquí. Pero por ahora, eso está bien. Arrastra esto hacia abajo y voy a hacer esto gris. Por lo que ya tenemos algo pasando aquí. Entonces ahora cuando agarro y círculo u ovalado y bajaré aquí también. Uh, Círculo. En realidad, preferiría tener un avatar. Entonces este es el atajo de teclado. Un, uh, círculo era atajo de teclado. Ah, pero avatares Lo que me gustaría para este caso pensando Deja eso y luego me voy a desplazar arrastra eso para hacer un poco más grande, y eso va a hacer esto blanco también. Si quieres algo que ver aquí, es una especie de caer detrás de la gris. Si me da la razón, haz clic en eso y traes el frente que realmente levantado en la parte superior de los que hacen posición es donde quiera besarlo puede ponerse un poco mawr en la zona superior. Igual que eso. A lo mejor estricto fuera diminuto, pero es algo grande. Entonces ahí vamos. 16. WF: añade conectores y añade texto: este anuncio conectado realmente rápido. Esta promesa que podría usar con más frecuencia en el tablero de diagrama de flujo. Pero solo para dar un ejemplo rápido, realidad podrías hacer clic en él aquí. Y entonces podría arrastrar hacia fuera. Entonces digamos que fui dedo del pie, adjuntarlo a otra forma. Podría añadir, Texano aquí, muestra parece un poco ah, enderezarse así. Pero lo tienes. Yo quiero arrastrarlo y tenerlo tocado. Algo más así. Podría hacer conexiones de esto. Voy a borrar esa por ahora. Y en realidad, a lo que quiero ir a continuación fue agregar texto, que es el atajo de teclado t, que, como sonidos me permite agregar texto. Entonces este caso va a poner la palabra a casa aquí. Creo que eso y esto va a ir a la cima aquí. Vamos a tener nuestra navegación. Entonces en realidad, quiero hacer ahora es que quiero seleccionar estos tres ítems. Voy a arrastrarlo un poco aquí, y luego voy a mover el hogar arriba a esa sección para hacer en realidad una zona específica de duende , y lo dejaré justo ahí. Suena bien. Voy a querer hacer También son duplicados que tenía duplicado para otro aquí. Voy a hacer este un momento y hago otro duplicado. Puedo dejar caer esa llamada esta una notificaciones. Eso y un MAWR. Llamaremos a este uno mensajes familiarizados con Twitter. Entiendes que probablemente has visto todos estos antes, pero clicables juntos. Eso me da la opción de agrupar. En este caso, sólo quiero una línea que asegurarme de que estén centrados en la línea, que parecen ser. Pero por si acaso me mudé, cualquiera que no parezca negativo, dijo, haciendo especie de también distribuir horizontalmente, los espacia de manera uniforme. Eso es genial, Perfecto. Por lo que hemos terminado de agregar texto por ahora. 17. WF Agregar íconos: lo siguiente que hagamos, vamos a agregar iconos, que es, uh, atajo de teclado X aquí antes que yo, quiero ir a, uh, Twitter aquí, que estaban actualmente haciendo una versión de eso. Esto es lo que no he ingresado ahora mismo, Pero puedes ver que tenemos el ícono, y luego la navegación en la parte superior. El crema de mujer tiene unos cuantos más. Una vez que fuera la ley otra vez, los verías, pero se te ocurre la idea, Uh, iniciamos sesión. Esto en realidad sería una pequeña foto de un hogar, y así vamos a empezar a añadir los que ya pude ver. También volviendo a esto es lo pequeño que es el círculo aquí. Esto es West. Boss es uno de mis amigos y desarrolladores favoritos que estamos viendo en este momento. Y tiene algunas clases geniales como esta. Grilla CSS, que es grande allí. Entonces echa un vistazo a eso si tienes oportunidad. De todos modos, vuelta por aquí. ¿ Qué? Estamos trabajando en este dicho que nos encogimos un poquito esto porque es algo grande a lo que acabamos de ver ahí. Entonces eso probablemente sea mejor por ahora. iconos de Soas faras abrieron esto aquí arriba. Yo puedo, en realidad, uh, si quisiera específicamente ese icono de Twitter, podría buscar Twitter aquí y realmente tener uno. Y podría dejarlo aquí mismo. Eso funciona tan bien. A lo mejor quiero cambiar el color que Hagamos ese verde. A lo mejor cambiar este año para ser también el color de la pantalla porque estamos en la página principal en este momento , así que eso tiene sentido para los momentos. Eso fue un relámpago. Entonces si vuelvo a Icon, podría mirar hacia arriba. Podría significar. Y bastante seguro, tienen uno. Ahí tienes esa. Siguiente para las notificaciones. Voy a necesitar un pequeño símbolo de campana. Entonces, Bill, seguro que no. Ahí vamos. Se puede, por supuesto, volver a dimensionar estos. Simplemente lo voy a soltar como el tamaño que tienen. Eso parece funcionar de vez en cuando para los mensajes. Necesitaré un pequeño símbolo de sobre aquí. Entonces si golpeo X, ves que eso lo abre así también. Y, uh, tenemos parece que tenemos algunas opciones diferentes. ¿ Qué tal si acabamos de agarrar esa? Sólo déjalo caer. Ahí vamos. Ahí hay un sobre. Por lo que de inmediato tenemos de nuevo nuestras diferentes pestañas. Como dije, puedes acercar un poco. Eso parece un poco grande. Puedes desplazarlo y arrastrarlo hacia abajo para cambiar el tamaño. A lo mejor estos rodar como un poquito grande, por lo que puedes decidir que quieres unos amigos más pequeños ya que, así y allá vamos, eso es agregar iconos. 18. WF Agregar enlace: continuación, vamos a utilizar el enlace del anuncio. Entonces voy a alejarme muy poco. Y así haga clic. Agregar enlace. ¿ Qué tal si vamos tan tranquilos? A lo mejor nos permite si queríamos dar click en esto porque queríamos ir derecho al sitio. Entonces de esa manera pudimos ver, uh, lo que estamos tratando de hacer crear Aquí está una copia de Twitter. Entonces al igual que en el diagrama de flujo cuando usamos eso miraba ese tablero. Si haces click en esto, tenemos opciones para que ahora sea un pulgar, que es un pequeño gorro de pantalla rápido del mismo. En este caso, no es demasiado interesante, pero se puede conseguir la idea. También podemos decidir cavar la cabeza de los sitios web o la mitad superior de la misma. Este caso otra vez, no es no parece muy interesante. Un tobogán después del costado aquí. A ver si esto no es todavía no mucho allí. Muy fuera de las versiones móviles de la misma, no puedo quitar la instantánea que la trae de vuelta a solo lo poco de usar el dejar una estafa del sitio Web como algo que podemos hacer click en eso para moverlo, pero como, digamos, si haces click en esto, lo abrirá. Por lo que hacen clic en eso. Por supuesto, vamos a aquí donde realmente iniciaría sesión. Pero si te iniciaste sesión, ahí se puso en marcha el sitio donde te envuelves. Y para que así pudieras revisar lo que estás tratando de hacer y eso es enlace de anuncios, que también es un atajo de teclado K. 19. WF Sube imagen: ahora para el siguiente socio te muestra, que es subir el atajo de teclado de imagen. En realidad te he enseñado una versión que tengo un poco más allá con el clon de Twitter aquí mostrando que he hecho uno llamado Desert Life es el nombre de esta cuenta de Twitter . Y así, Dios, seguido con mucho más texto, algún otro se siente como búsqueda. Y éstas fueron todas construidas de la misma manera que yo había construido las piezas originales. Eso nada nuevo en estos. Pero lo que quiero mostrar sobre la imagen con Zoom en un poquito aquí. En realidad podría colocar aquí una imagen, por ejemplar. Entonces tal vez fui a buscar una búsqueda rápida escenas del desierto buscando imágenes y tal vez me guste esta de aquí. Entonces, vamos a ver. Haga clic en ese. Se va a copiar imagen, volver a ésta de aquí y luego solo pego esa imagen Aquí. Aquí es donde puedo hacer un marco completo o tener un pequeño borde. Voy a ir por un cuadro completo, dejarlo ahí y justo ahí. Y ahí está nuestra imagen de anuncio. Por supuesto, también podrías subir desde el escritorio para preguntarte si tenías alguna carpeta en la que tenías las fotos. Pero trato de tener una idea rápida de lo que parece agregar una imagen y tiene una especie de tema de color coincidente ahí igual. 20. WF WF: lo último de lo que quiero hablar dentro de marcos de alambre fue compartir. Yo he creado aquí algo ir a este pequeño avión de papel. Puedo ver que tenemos cuota de exportación e impresión. Si hago clic en eso, podríamos conseguir una parte de un enlace. Entonces una vez que me dieron eso, creo que podría poner eso en el correo electrónico. Por ejemplar, también podría exportar esto, que lo guardará en mi escritorio, por ejemplar, por ejemplar, o carpeta específica del dedo del pie. También puedo hacer una copia de la imagen, que luego podría pegar de nuevo en el correo electrónico, y luego va a imprimir esto. Entonces esta es una gran manera si realmente quieres compartir lo que has hecho aquí, y eso es todo para marcos de alambre, muchas gracias. 21. WF de desafío #2: y ahora es el momento del reto. Te comparto algunas herramientas diferentes que podrían usar para crear un marco de alambre. Y ahora te toca a ti tomar uno de tus lados favoritos, ya sea Twitter, Facebook, Facebook instagram o cualquier sitio web, realmente, realmente, y hacer una recreación de la misma. Se trata de hacer algo que sea realmente rápido. No hay necesidad de sumergirse realmente en hacer cosa elaborada. Solo estamos haciendo marcos de alambre como una forma de sacar ideas. Incluso podrías crear una idea completamente nueva si te gusta Teoh, espero ver cuando vuelvas a venir con las cosas. 22. El final: De verdad espero que te guste este video. Ver a desde o diseñar haciendo herramientas también. Está diseñado haciendo métodos viniendo futuro. ¿ Ves eso?