Transcripciones
1. de punto: Hola a todos, así que
bienvenidos a todos ustedes en mi
serie completa Master en Google Teach. En esta serie
Master en particular, te
enseñaré que
¿cómo puedes crear un sitio web completo con la
ayuda de pocos prompts He cubierto todas
y cada una de las características de una manera muy detallada. Esta serie maestra
comenzará desde el nivel muy
principiante, y después de eso, te
enseñaré cosas avanzadas. Y la mejor parte
es que no necesitas un fondo de codificación o diseñador
gráfico solo
debes tener habilidad básica de
ingeniería rápida mediante la cual explicarás
lo que quieres exactamente. En realidad, puedes crear muchas
cosas como puedes crear tu propio sistema de diseño con
la ayuda de Google teach. Puede crear un diseño
atractivo para el usuario. Puedes crear diferentes
variaciones de tu diseño. Incluso con la ayuda de ingeniería
rápida, puede hacer prototipos donde hará
que su
diseño sea interactivo Con la ayuda de
esta serie de conferencias, puede aumentar
su productividad. Y esto ahorrará mucho esfuerzo y tiempo. En pocos minutos, puede crear fácilmente
todo el sitio web. Todo el sitio web significa
incluir prototipos, y aquí
obtendrás Infinite Canvas en el que crearás página
infinita para que puedas
realizar un proceso de diseño complejo Esta es una característica
del diseño de UIUX. Entonces, según yo, IA no reemplazará tu trabajo, pero la persona que ya está usando IA definitivamente puede
reemplazar tu trabajo. Básicamente, tienes que evolucionar tu tiempo de estilo así que si no
vas a ser hábil, entonces cualquiera puede reemplazarte. Entonces te veo en el
ciclo de conferencias. Bien, adiós.
2. Introducción a Google Stitch: Hola a todos. Así que
bienvenidos a todos ustedes en mi serie maestra completa
en Google Steeg Entonces, en esta serie de
conferencias en particular, te
enseñaré eso
cómo puedes crear tu propio diseño de sitio web o aplicación
móvil con la
ayuda de Google Speech. Entonces, sin perder el tiempo, comencemos esta serie de conferencias. Entonces, antes que nada,
discutamos sobre su interfaz. Bien. Esta es un área donde
escribirás tu aviso. Ahora lo que puedes hacer,
puedes escribir tu prompt manera
muy aleatoria o
en lugar de eso, lo que puedes hacer, puedes escribir tu prompt de manera muy
detallada. Si va a escribir su prompt de manera muy detallada,
entonces ¿qué pasará? Obtendrá un resultado muy
preciso si va a escribir su
aviso de manera detallada. Aquí tienes una opción de dos
llamada app y web. Obviamente, si
vas a hacer clic en app, entonces generará resolución de
retrato, que es
resolución vertical. Bien. Entonces usarás app opson cuando tengas que crear
diseño para app móvil Bien. Por otro lado, si
vas a hacer clic en la web, entonces obviamente
generará resolución horizontal, que es resolución horizontal. Bien, entonces usarás esta
opción cuando necesites
crear diseño de aplicaciones de escritorio,
diseño web de escritorio. Bien. En tal caso
, utilizará web. Bien. Aquí tienes una
opción llamada adjuntar un boceto de ordenamiento de pantalla
o inspiración visual. Esta es una opción de archivo multimedia. Si va a hacer clic en eso, entonces tiene una opción de tres llamada Upload Files website
URL, y mejorar prompt. Entonces supongamos que si tienes
alguna imagen de referencia, entonces tienes que
subir esa imagen. Y sobre la base de
esa imagen de referencia, generará
todo el diseño, ¿bien? Supongamos que si tienes
alguna URL de referencia, entonces proporcionarás esa URL, y sobre la base de esa URL, generará diseño. Bien. Y aquí tenemos una opción
llamada prompt mejorado. Supongamos que ya ha
escrito el mensaje UR y si desea mejorar
la calidad del prompt, puede mejorar fácilmente con
la ayuda de esa opción. Aquí tenemos la opción
llamada use Design System. Entonces, si eres
diseñador gráfico o diseñador de UIUX, entonces es posible que ya te des
cuenta de eso. Bien. Así que el sistema de diseño
no es más que una plantilla predefinida, qué marcas utilizan? Bien. Uh, cada marca tiene colores
propios y únicos. Bien, entonces el sistema de diseño es un color predefinido
de cada marca. Bien. Entonces puedes seleccionar
desde aquí, ¿de acuerdo? A partir de aquí, puedes elegir
el modelo a partir del cual modelo, tienes que generar
tu diseño. Bien. Y cualesquiera que sean
las cosas que crees, aparecerá en la página de historial. Esta es una sección de
página de historia donde verás tu proyecto
anterior. ¿Bien? Para que puedas
saltar fácilmente a tu trabajo anterior. Bien, entonces esta era una interfaz básica,
que deberías saber.
3. Cómo crear diseño de UI con indicaciones: Entonces ahora intentemos
crear algo. Ya escribí mi
aviso. Puedes leer esto. Crear un diseño de sitio web
para el sitio web de aprendizaje electrónico. El diseño debe ser
estético y moderno. Crea primero la página principal donde tienes que mencionar
cursos populares como diseño UIUX,
filmura, edición de video, afinidad, diseño
gráfico y master course GPT
para el cabello Bien. Aquí voy a hacer click en web porque tengo que
crear diseño para sitio web. No tengo ningún archivo multimedia de
referencia, así que no voy a adjuntar ningún archivo. A partir de aquí, puedo
elegir sistema de diseño. Como ya les he dicho ese sistema de
diseño es una
combinación de los mejores colores. Esto variará de marca a marca. Escojamos a cualquiera. Escojamos Neon
Tokyo. Empecemos. Entonces, antes que nada, estoy
consiguiendo este sistema de diseño. Sobre la base de
este sistema de diseño, generará toda la página web. Bien. Entonces este es mi color primario, este es tersario secundario
y podemos cambiar este color más adelante en nuestra clase Bien. Desde aquí, se puede ver que
tenemos un botón primario, botón
secundario, contorno
invertido. Entonces este es todo nuestro sistema
de diseño. ¿Bien? Ahora ha comenzado a
crear pantallas. Y se puede ver que ha creado el sitio web de Elning para mí. Ahora, supongamos que si
no está satisfecho con esto, puede hacer clic en esa página, puede hacer clic en esa
página y puede ver que esta página ha sido
mencionada en nuestro cuadro de aviso. Ahora necesito escribir
cambiar todo el diseño. Prueba algo nuevo. Ahora
, creará nueva página. No va a cambiar
nada en la página existente. Creará nueva página fresca en lugar de cambiar
nada en la página anterior. Por lo que ha proporcionado
nuevo sistema de diseño, y sobre la base de eso, obtuve este sitio web y se ve
mejor que el anterior. Bien. Ahora necesito cambiar
algo en esta página. Entonces creo que aquí se enumerarían más
cursos. Estar actualmente
solo tenemos cuatro cursos. Bien. Entonces deberíamos tener
más cursos aquí. Entonces lo que voy a hacer,
iré a la página de Mark, y aquí agregaré esta caja, y después de eso, escribiré,
agregaré muchos cursos de diferentes habilidades. Ahora bien, no va a cambiar
nada en la página existente. Creará una página completamente nueva en lugar de cambiar
en esa página. Entonces, finalmente, ha enumerado
muchos cursos aquí, pero aquí no tenemos
miniaturas para muchos cursos Entonces qué vamos a hacer,
volveremos a hacer clic en esta página de inicio, y lo mencionaremos. Por favor, agregue una miniatura. En todos los cursos. Sea cual sea el cambio
que tengas que hacer en tu diseño, tienes que seleccionar esa página o elemento
en particular. Tengo que cambiar algo aquí. Seleccionaré esa página
en particular. Ahora generará un diseño
completamente nuevo. Por último, ha creado
thumbnel para todos los cursos. Ahora se ve bien. De igual manera, vamos a crear
otro sitio web. Entonces este es un mi prompt. Crear sitio web de comercio electrónico para juegos, consola y hardware. Crear diseño sistemático de
acuerdo a categorías, agregar muchos elementos en la página de inicio. Los diseños se verían de aspecto
moderno y limpios. Bien, así que hagamos clic en la web
y presionemos el botón Enter. Y si no va a
seleccionar ningún sistema de diseño, entonces
seleccionará automáticamente el sistema de diseño. ¿Bien? Entonces bien, este es
nuestro sistema de diseño, y sobre la base de
este sistema de diseño, nuestro sitio web está generando ahora. Por lo que actualmente se está generando
cuatro páginas diferentes. Dios mío, mira el diseño. Ha creado un diseño impresionante. Así que vamos a explorar cada
diseño uno por uno. Así que esta es nuestra página de inicio, ¿de acuerdo? Esto es una pancarta. Bien. Y se ve increíble. Se puede ver que muchos productos se
han mencionado aquí. Se ve increíble,
en realidad, ¿verdad? Aquí tenemos un detalle del producto. Si persona va a hacer clic en GPU, entonces deben
aterrizar en esta página. Bien. Aquí tenemos
un listado de categorías. Bien. Bien, genial. Entonces también aquí tenemos una página de
pago. Bien. Ahora, lo que puedes
hacer, puedes pedir
crear cualquier página diferente también. Bien. Por lo que actualmente,
ha creado homepage, detalles
del producto,
listado de categorías, checkout. También puedes pedir crear
cualquier otra página. Bien. Aquí tenemos alguna
sugerencia como cambiar el
color de ascenso primario a verde eléctrico Entonces, si vas a hacer eso, entonces el color primario de todo el diseño cambiará
automáticamente. Aquí tenemos otra
opción llamada agregar una versión móvil de la página
de inicio. Bien. Entonces, si vas a hacer click en esa opción,
¿qué pasará? Este es nuestro diseño web, y creará una
versión móvil de todo nuestro diseño. Pero crearemos
verson móvil después de algún tiempo. Bien. Bien, bien. Y supongamos que si tienes que
generar una versión diferente, total versión diferente
de tu diseño, entonces lo que harás,
seleccionarás todo tu diseño. Bien. Y aquí tienes una caja, que es click para generar
múltiples variaciones. Así que vamos a hacer clic en eso. Bien. Vamos a hacer clic en eso. Veamos qué
pasará en nueva vari. Bien, chicos, así que aquí tenemos una versión diferente
de nuestro sitio web, y también se ve bien. 1 minuto. Se trata de un nuevo
diseño. Eso se puede ver. En realidad se ve bien. Se puede ver la calidad. Si eres diseñador de UIUX, entonces puedes relacionar cuánto tiempo tardará en
crear esta página Hemos creado muchas
páginas en un minuto 1. T es un futuro de UINUX. Aquí tenemos otra
versión de homepage. Obviamente, el color primario se
ha cambiado aquí, se
puede ver que también
se ve bien. Y aquí tenemos otra versión de homepage con efecto neón. En realidad, todos los diseños
se ven bien. Ahora iremos con diseño verde
cinético. Bien, entonces eliminaremos otro diseño para que no nos
confundamos. ¿Bien? Entonces arreglemos todo de una manera muy
sistemática. Entonces, eliminemos todo. Bien. Entonces iremos con
Kinetic green. Bien. Y si disfrutaste de esta conferencia, entonces no olvides darme buena calificación positiva y comentar para que
pueda motivarme
4. Usaremos la herramienta MARCA para editar algo en el diseño de interfaz de usuario: En esta conferencia en particular, exploraremos la herramienta Mark
dentro del escenario de Google. Bien. Entonces con la
ayuda de la herramienta Marcar, puedes marcar cualquier elemento, cualquier objeto, cualquier texto,
cualquier imagen, ¿bien? Y puedes pedir editarlos. Bien, entonces
activemos la herramienta Marcar. Bien. Y supongamos que tengo que
añadir efecto resplandeciente aquí Entonces lo que voy a hacer,
marcaré ese botón. ¿Bien? Voy a marcar ese botón. Ahora hemos marcado nuestro objeto
objetivo con éxito. Entonces ahora vamos a escribir aquí, hacer que este botón pegando
presione el botón enter. Entonces como ya les he dicho
que esto va a crear nueva página. Siempre que pides
editar algo, se creará una nueva página. Sin reemplazar uno más antiguo
, proporcionará nueva imagen. Entonces, finalmente, tenemos
un botón resplandeciente. Supongamos que tienes que
cambiar el logo, entonces voy a usar Mark toool
y marcaré esa zona Voy a marcar esa zona. Bien. Y después de eso,
voy a escribir aquí, cambiar logo en toda la página. Ogoname es el nombre del logotipo es Lab NKt lab El nombre del logotipo debe ser UNKTlab. Por lo que ha creado cuatro nuevas páginas en las que se
menciona el nuevo nombre del logotipo Unkit Lab. ¿Bien? Laboratorio Ankit. Akilab. Bien, entonces estas
son nuestras cuatro nuevas páginas. Ahora lo que podemos
hacer, podemos eliminar nuestra página anterior
porque va a crear confusión. Así que eliminemos
nuestra página anterior, y mantengamos solo un nuevo diseño. Bien, mantengamos
solo nuevos diseños. ¿Bien? Bien. Aquí
también podemos agregar efecto resplandeciente Qué haremos, usaremos MarkTol Usaremos la herramienta
Marcar y
marcaremos ese botón, y vamos a escribir
agregar efecto resplandeciente Entonces así es como
puedes usar la herramienta Marcar. Puedes usar la herramienta Marcar para
cambiar cualquier texto, cualquier imagen, logotipo, o incluso
puedes cambiar todo el diseño
con la ayuda de Mark Tool. Supongamos que tiene que cambiar
el diseño de esta página. Entonces lo que harás,
seleccionarás toda el área.
Usted seleccionará. Seleccionarás toda el área. Y puedes pedir que se
cambie su diseño. Bien. Pero ahora mismo, no
voy a hacer eso,
pero tú puedes hacerlo. Bien. Y finalmente, conseguimos efecto resplandeciente
muy rápido. Bien. Y aquí también, tenemos
un efecto resplandeciente. Así es como puedes
usar fácilmente la herramienta Marcar. Bien, bien.
5. Vamos a usar la herramienta DIRECT EDIT para editar algo en el diseño de la interfaz de usuario: Ahora aprenderemos sobre la herramienta de edición
directa. En video anterior,
ya hemos cubierto
lo que es la herramienta Marcar. Con la ayuda de la herramienta Marcar, puedes marcar cualquier objeto
específico, imagen, texto o diseño, y puedes cambiarlo. Con la ayuda de la edición directa, puedes
editar directamente tu diseño. Entonces activemos
Activemos la edición directa, y supongamos que tengo que
editar esta página, así que voy a hacer clic en
esa página. Bien. Bien. Entonces ahora, puedo cambiar fácilmente cualquier cosa
en esta página. Bien. Supongamos que tengo que
cambiar el texto aquí. Voy a hacer click en eso. Bien. Y aquí
tenemos una opción de dos llamada editar texto
o editar con IA. Obviamente, con la
ayuda de editar con IA, se
puede generar algo
con la ayuda de la IA. Y si vas a
hacer clic en Editar texto, entonces puedes cambiar su título. Tablero moderno. Bien. Entonces, con la ayuda de la edición directa, puedes editar fácilmente cualquier cosa. Puedes cambiar el precio aquí. ¿Bien? Se puede decir 199. Bien. Aquí puedes cambiar
cualquier cosa. placa E moderna es la más popular entre los AMR Puedes escribir cualquier cosa aquí. ¿Bien? Supongamos que tengo
que cambiar de imagen aquí. Entonces lo que voy a hacer,
activaré directo, editaré, y
seleccionaré esa imagen. Ahora, me pedirá
ingresar URL o editar con IA. Bien, así puedo hacer las
dos cosas, bien puedo ingresar URL o puedo generar imagen
con la ayuda de la IA. Y si disfrutas de esta conferencia, entonces no olvides darme buena calificación positiva y comentar para que
pueda motivarme
6. Reemplazo e imagen en el diseño de interfaz de usuario: En este video en particular, te
mostraré
cómo puedes subir tu propia imagen en cualquier
lugar donde quieras. Bien, así que
comencemos esta conferencia. Bien. Entonces supongamos que tengo que
subir mi propia imagen aquí. Bien, entonces, ¿cómo voy a hacer eso? Entonces antes que nada, voy a
activar la herramienta de edición directa. ¿Bien? Pero antes de
usar esa herramienta, lo que haré,
subiré mi propia imagen. Entonces supongamos que tengo que
agregar esta imagen aquí. Supongamos que tengo que
subir esta imagen aquí. Entonces, ¿cómo voy a hacer eso? Entonces antes que nada,
tienes que subir tu propia imagen en
Lienzo en blanco así. Entonces aquí tenemos una opción
llamada Upload File to Canvas. Entonces, si vas a hacer clic en eso, entonces puedes seleccionar cualquier
imagen desde Escritorio. Entonces ya he
subido esa imagen. Bien. Ahora, lo que puedes hacer, puedes cambiarle el nombre. Entonces voy a copiar unnamed dot JPG. Bien. Ahora ¿qué voy a hacer? Voy a ir a esa página, y supongamos aquí tengo
que subir mi propia imagen. Después usaré la herramienta de edición directa con la ayuda de la herramienta de edición
directa, seleccionaré esta imagen en
particular primero con la ayuda
de Edición directa, puedo seleccionar esa imagen. Bien. Y si, la imagen ha
sido seleccionada correctamente. Ahora, en prompt, hay
que escribir. En prompt, hay que escribir. Cambia la imagen, lo siento, reemplaza esta imagen
con tu nombre de archivo, que has copiado recientemente con un punto JPG sin nombre y
pulsa el botón enter Ahora, con la ayuda
de un cambio de nombre adecuado, puede cambiar cualquier imagen Bien. Ahora veamos
que va a funcionar o no. Y boom, finalmente, aquí se han subido nuestra propia
imagen. Así es como puedes
cambiar cualquier imagen. Entonces, con la ayuda
de la Llama adecuada, puedes
reemplazar fácilmente cualquier imagen. Bien. Entonces supongamos
que ha creado un sitio web que tiene banner. Bien. Para que puedas cambiar el
banner de la misma manera. Bien.
7. ¿Cómo crear tu propio sistema de diseño en Google Stitch?: Hola a todos. Entonces en esta conferencia en particular, te
enseñaré
eso como puedes crear tu propio sistema de diseño. Entonces como ya
les he dicho ese sistema de
diseño es una combinación
de diferentes colores, iconos, y texto, que
queda bien juntos. Bien, entonces cada empresa
tiene sistema de diseño propio. Bien, por lo que el sistema de diseño puede
variar de una empresa a otra. Bien. Entonces, si hablo de cuál es el
color primario de Instagram, entonces dirás que es
un poco como el rosa o el morado. Bien, rosa, creo. Y si hablo de cuál es
el color primario de YouTube, entonces dirás rojo y negro. Bien. Entonces esta es una
combinación de colores. Bien. Y se llama sistema de diseño. Para que puedas crear tu propio sistema de diseño
en Google Stitch. Entonces tienes un método de dos. El primer método es,
puedes ir aquí. Puede hacer clic en sistema de diseño, y aquí
verá el botón más. Bien. Entonces, o puedes crear uno o puedes importar desde
cualquier sitio web existente. Entonces, si vas a hacer clic en
Importar desde un sitio web existente, entonces
te pedirá que pegues la URL. Entonces, si va a pegar
URL de cualquier sitio web, analizará ese sitio web y extraerá el
sistema de diseño de ese sitio web. Bien. Pero no vamos a usar esto. Aquí, haremos clic
en Crear Nuevo. Bien, entonces antes que nada, aquí
puedes elegir tu propio nombre. Bien, entonces diseñe el sistema. Bien. Y aquí puedes seleccionar el modo
oscuro, el modo de luz. Y este es un color de semilla. Puedes elegir cualquier color. Digamos naranja. Entonces a partir de aquí, puedes crear
tu propio sistema de diseño. Bien. Se puede seleccionar
color primario, color secundario. Bien. Bien, entonces he
seleccionado primario, tersario
secundario
y color natural Bien. Y desde aquí, se
puede seleccionar la tipografía Bien, tu estilo de texto.
Puedes seleccionarlo. Entonces, seleccionemos Inter. Bien. Y aquí tenemos
un radio de esquina. Entonces, siempre que Google Stitch
cree algún sitio web, entonces obviamente
creará botones de componentes. Entonces, la esquina del botón debe
ser redondeada, SRP. Bien. Así que seleccionemos éste
y hagamos clic en el botón Guardar. Ahora, creará
nuestro propio sistema de diseño. Y se puede ver que se
ha agregado aquí. Bien. Entonces siempre que
tenga que usarlo, iré aquí, y
aquí pueden ver que
este es mi sistema de diseño, así que simplemente voy a seleccionar eso. Y ahora puedo pedir crear cualquier sitio web
usando este sistema de diseño para crear un diseño de aplicaciones de
redes sociales. Entonces ahora, como he
seleccionado mi sistema de diseño, por
eso utilizará esa paleta de colores
en particular. Veamos que está
funcionando bien o no. Ahora tenemos que
esperar un poco. Usando el mismo sistema de diseño, finalmente
conseguimos este. Y se ve increíble. Bien, bien. Se puede ver que ha creado sitio web utilizando
el mismo sistema de diseño. Bien, ahora tenemos otra forma por la cual puedes
crear tu sistema de diseño. Supongamos que tiene un
diseño existente y
desea extraer el sistema
de diseño de ese diseño, entonces cómo puede hacerlo. Bien. Entonces para eso, solo sube tu diseño existente del que
tienes que extraer el sistema de
diseño. Así que vamos a subir 1 minuto.
Aquí está mi diseño. Bien, entonces este es mi diseño. Bien. Bien. Este es mi diseño. Bien. Ahora, quiero extraer el sistema de
diseño de
este diseño existente. Entonces, ¿cómo voy a hacer eso? Obviamente, primero seleccionaré
ese diseño. Bien, ahora puedes ver
que en el cuadro de aviso, esta imagen ha sido seleccionada. Ahora voy a escribir
crear sistema de diseño usando este diseño web. Pulsa el botón Enter. Ahora, lo que va a hacer, extraerá sistema
de diseño del diseño existente. Extraiga texto, colores,
iconografía, todo. Y por último, se ha creado sistema de
diseño a partir de la página
existente. Bien. Ahora puedes ver que
tenemos botones, texto, colores,
etiquetas, todo. Tenemos todo lo que viene
bajo sistema de diseño. Bien. Ahora, la mejor parte es, si vas a ir al sistema de diseño, entonces notarás que este sistema de diseño se han agregado
automáticamente en nuestra lista. ¿Bien? Eso se puede ver. Su nombre es Patrimonio de San Juan. Bien, Herencia de Santa Juana. Entonces, si vas a ir al
sistema de diseño, entonces podrás ver que ha listado en nuestra lista de sistemas de
diseño. Entonces así es como puedes crear
tu propio sistema de diseño. O puedes crear tu sistema de diseño desde
el principio, o si tienes algún diseño
existente, entonces puedes subir
ese diseño y extraer el
sistema de diseño de ese diseño. Bien. Bien, bien, chicos. Y si disfrutaste de esta conferencia, entonces no olvides darme una buena
calificación positiva y comentar.
8. ¿Cómo hacer un prototipo en Google Stitch?: En una conferencia anterior, ya
hemos creado
nuestro sitio web de redes sociales. Por lo tanto, hemos creado cuatro
feeds de inicio de página diferentes, mensaje de perfil de
usuario
y sección Explorar. Ahora es el momento de hacerlo vivir. Bien, así que con la
ayuda de Prototype, podemos jugar nuestro diseño. Bien, así que antes que nada,
seleccionemos todo el diseño y hagamos clic en Conectar
y previsualizar con
Instant Prototyping Bien. Ahora, conectará
todas las páginas para que veas que
tenemos una ventana de vista previa. Y lo mejor es
dentro de la ventana de vista previa, podemos editar cualquier cosa. ¿Bien? Bien, entonces antes que nada, hablemos de este rectángulo
punteado. Este rectángulo punteado representa este botón es interactivo. Bien. Si va a hacer clic en el botón de inicio,
entonces no va a funcionar. Si vas a hacer
clic en Notificación, entonces no funcionará
porque no es interactiva. Bien. Entonces eso significa botón
Explorar, botón de
mensaje, botón de perfil y texto de Sarah Miller. Todas las cosas son interactivas. Así que hagamos clic en Explorar. Bien. Y aquí
tenemos una página de inicio. Entonces está funcionando bien. Eso se puede ver. Bien. Entonces en la página Mensaje
en la página Mensaje, si voy a hacer clic en el botón Inicio, entonces no está funcionando. Entonces necesito conectarlo con
el botón de inicio. Entonces lo que voy a hacer,
voy a ir de perfil. Lo siento, voy a seguir Edit. Voy a ir a editar.
Bien. Ahora voy a establecer la conexión
entre este texto y la página principal. Voy a hacer clic en el botón Mensaje. Aquí tenemos una opción Editar
conexión. Así que hagamos clic en
Editar conexión. Ya que tenemos página existente, es por
eso que no vamos a crear toda la página desde el principio. Bien. Pero ahora mismo
tenemos una página de inicio. Bien. Entonces ahora me está pidiendo
que conecte página diferente. Bien, así que conectemos
con el feed de Home. Bien. Y aquí tenemos
una conexión de aplicar. Bien. Vamos a recargar esta página Juguemos nuestro prototipo. Vamos a la Página de Mensajes. Ahora dentro de la página Mensaje, ahora puedes ver que
el botón de inicio también es interactivo. Así que vamos a hacer clic en el botón Inicio. Bien. Entonces así es como puedes conectar varias páginas
entre sí. Bien. Bien, bien. Y vamos a crear la página
Editar perfil. Bien. Por lo que actualmente, no tenemos página llamada Editar perfil. Bien, entonces tenemos
que crear eso con la ayuda de EI. Entonces, antes que nada,
iremos a Editar, y después de eso,
seleccionaremos el botón Editar perfil. Ahora me está pidiendo conectar una pantalla o imaginar nueva pantalla, ya que no tenemos página
llamada Editar perfil. Por eso no podemos
conectarlo con ninguna página. Así que necesitamos crear una nueva
página llamada Editar perfil. Por lo que haremos click en
Imagen Nueva pantalla. Ahora va a AutomaEdit página
de perfil. Bien. Y la mejor parte es que seguirá nuestro sistema de diseño, lo que significa que veremos
consistencia en todo el diseño. Si ya tienes muchas páginas, entonces puedes conectarlas Bien. Pero si no tienes
ninguna página específica, entonces te puedes imaginar con IA. Se trata de crear la página Editar perfil porque no tenemos página de perfil de
edición. Entonces, finalmente, tenemos
una opción de editar página. Bien. Esta es una página de edición. Entonces si voy a ir a
la página anterior, si voy a ir a la página
anterior 1 minuto. Esta línea punteada está apareciendo, lo que significa que
se ha vuelto interactiva. Así que vamos a hacer clic en Editar perfil. Bien, ahora está funcionando bien. Bien. Así que hagamos clic
en el botón Crear publicación. Se puede ver que
no está funcionando porque no
hemos conectado ninguna
página con ese botón. Bien. Así que de nuevo,
iremos a la sección Editar. Seleccionaremos nuestro botón. Ahora me está
pidiendo diferentes opciones. O podemos conectar este
botón con cualquier página. Entonces si ya he creado la
página llamada Crear Post, entonces puedo conectarme
con esa pantalla. Bien. Si tienes que
editar el texto, supongamos que si vas a
hacer clic en Editar texto, entonces puedes cambiar su texto. Crear publicación. Bien. Crear Nuevo post. Bien. Para que puedas cambiar su
texto muy fácilmente. Bien. Veamos qué
tenemos otra opción. Cambiar con IA. Puedes cambiar cualquier tipografía
de color
con la ayuda de la Y aquí tenemos una imagen
Nueva opción de pantalla. Entonces obviamente usaremos la pantalla
Image New porque no
tenemos ninguna
página existente llamada Create Post. Por lo que haremos click en
Imagen Nueva pantalla. Bien. Así que vamos a hacer
clic en Imagen Nueva pantalla. Ahora, generará
crear página de post. Y por último, tenemos una nueva
página llamada Create Post. Entonces si voy a hacer clic
en el botón Vista previa, entonces se puede ver
que está funcionando bien. Bien. Crear Post. Bien. Entonces puedes
ver que tenemos una línea punteada por encima de la cruz, lo que significa que si voy a
dar click sobre esta cruz, se cerrará sola. Bien, así que vamos a hacer clic en Publicar. 1 minuto. Bien. Entonces aquí tenemos un botón. Ahora vamos a hacer clic en Publicar. Nuevamente, el botón post no
es interactivo porque no hemos conectado
este botón con ninguna página. Así que de nuevo, vamos
a ir a Editar página. O podemos conectarlo
con nuestra pantalla existente, pero en este momento no tenemos una pantalla
existente llamada Post. Por eso haremos clic
en Imagen Nueva pantalla. Se creará una nueva pantalla. Bien. Ahora se ha creado una
nueva página llamada Post SAD. Si voy a hacer clic en el botón
Vista previa, entonces puedo ver que
el botón de inicio es interactivo, el botón
Explorador es interactivo. Bien. Entonces Babton
también está funcionando bien. Así que vamos a hacer clic en Publicar Publicar. Entonces así es como puedes crear y conectar
cualquier número de páginas. Bien. Así que ahora vamos al botón
de Vista previa. Vamos a la vista previa. Creo que deberíamos tener
pantalla PL opsonAbrir en Nuevo tipo. Bien, entonces este es
un verson de escritorio. Se puede ver que
está funcionando bien. Haga clic en post post. Bien. Tarifa Post. Y tenemos tanto la opción
ver Post, volver a alimentar. Así que vamos a hacer clic en viewpost. Entonces view Post no está funcionando. Entonces nuevamente, lo que podemos hacer, podemos seleccionar ese botón. Vamos a ir a Editar página, y vamos a reimaginar Lo sentimos, nos imaginaremos
ver Publicar página. Bien. Entonces va a funcionar. Bien. Volver a alimentar. Entonces así es como puedes crear prototipo de tu propio sitio web. Bien. Y obviamente, puedes cambiar el logo,
texto, color, en cualquier momento. Así que he cubierto todo lo relacionado con el Google Stitch. Entonces, si disfrutaste de
esta serie de conferencias, entonces no olvides darme buena calificación positiva y comentar para que
pueda motivarme
9. ¿Cómo crear una aplicación para móviles como Instagram en Google Stitch?: Diablos Hola a todos. Así que bienvenidos a todos ustedes en mi serie Master completa
en Google Itch. Entonces en esta conferencia en particular, vamos a crear
app como Instagram. Entonces, sin perder el tiempo, comencemos nuestro ciclo de conferencias. Ya
escribí mi aviso. Puedes leer esto. Bien, entonces quiero crear app como Instagram donde
necesito una página,
iniciar sesión, registrarme, casa
y enviar un mensaje a Sexton Y el nombre de la app sería Quicksort. A partir de aquí,
seleccionaré el botón llamado app porque
quiero generar la app móvil. Aquí tenemos un sistema de diseño. Ya he cubierto que
lo que es sistema de diseño. Por lo que el sistema de diseño es una plantilla
predefinida, cual es variar según
la empresa a la empresa. Básicamente, es una
combinación de colores de una marca específica. Bien. Entonces, si va a seleccionar
algún sistema de diseño específico, entonces su aplicación se
generará sobre la base de esa
combinación de colores en particular. Bien. Y si no
seleccionas ningún sistema de diseño, entonces Google Stitch detectará
automáticamente el mejor sistema de diseño posible. Bien. Entonces seleccionaré este sistema de diseño en particular
y presionaré el botón entter Veamos qué va a pasar. Y este es nuestro sistema de diseño. Bien. Por lo que sobre la base de este sistema de diseño
particular, nuestra página todo va a generar. Bien, para que veas que
tenemos una página de inicio de
sesión, página de registro, feed de inicio
Sexion y mensaje Sexton Y sin duda de que en realidad se
ve increíble, ¿verdad? Ahora aquí tenemos un tema de
alineación. Debe estar en el
centro de la pantalla. Hay un problema de alineación. Entonces lo que haremos,
seleccionaremos esta página en particular. Así que vamos a seleccionar esta página
en particular. Ahora en el área de cuadro de aviso, verá que la página ha sido
seleccionada con éxito. Ahora puedes escribir cualquier cosa, lo que quieras corregir. Entonces aquí voy a escribir, hacer que se alinee correctamente. Hazlo alineado correctamente. Bien. Entonces, cualesquiera
que sean las cosas que tengas que corregir, tienes que mencionar esa página
en particular y tienes escribir tu consulta. Ahora se puede ver que ese problema se
ha resuelto con éxito, ahora está correctamente
alineado con el centro. Del mismo modo, puede crear cualquier
página que desee. Bien. Así que vamos a escribir crear. Crea una página de carga como subir carretes,
subir historia Quiero crear
una página específica. Sobre la base de mi prompt, se está creando dos páginas. Subir historia y subir Ls. Entonces así es como
realmente funciona. Bien. Ahora intentemos
animar todo nuestro diseño. Entonces aquí tenemos un Opson llamado connect all page Prototype Bien, entonces vamos a dar click en eso. Ahora vamos a obtener Nueva Página. Y aquí la mejor parte
es que podemos jugar nuestra app. Entonces esta línea punteada representa que este botón es interactivo. Siempre que haga clic
en el botón de inicio de sesión, terminará en cualquier página
diferente. Del mismo modo, tenemos
líneas punteadas en el botón de registro. Bien. Entonces este botón punteado
significa que es interactivo. Bien. Del mismo modo, hagamos
clic en el registro. Es interactivo. Vamos a hacer clic en Crear
cuenta. Bien. Entonces después de crear una cuenta, el usuario aterrizará en la página principal. Bien. Supongamos que tengo que hacer
este icono interactivo. Bien, entonces, ¿qué voy a hacer? En primer lugar, voy a ir a la pestaña Editar. En la parte superior de la pantalla, puedes ver que tenemos
una vista previa y edición. Así que vamos a hacer clic en
la pestaña Editar, y después de eso, voy a hacer clic en ese icono en
particular, y aquí vamos a obtener Opson
llamado Conectar a la pantalla Entonces, si ya ha
creado una pantalla de este tipo, que puede conectar
con cualquier ícono específico, entonces puede conectarla fácilmente. Pero ahora mismo, no tengo
ese Icreen en particular. Bien. Entonces lo que voy a hacer, voy a dar click en
Imagine new Icreen. Bien. Voy a hacer clic en
Imagen Nueva pantalla. Pero si ya tienes alguna página específica a la
que puedas conectar, entonces puedes conectarte fácilmente. Bien. Ahora, siempre que una persona
haga clic en este icono, deberá aterrizar en
esta página en particular. Veamos cómo se verá. Bien, boom. Esta es una página donde la persona
aterrizará después de hacer clic en
ese ícono en particular. Ahora el botón de mensaje es
interactivo, se puede ver eso. Del mismo modo, puedes hacer que
cualquier botón sea interactivo. Entonces este es un botón de inicio
que ya es interactivo. Ahora aquí tenemos un punto de tres. Bien, así que
hagámoslo interactivo. Bien. Así que de nuevo, haremos clic en Editar, dar clic en el punto T y simplemente
dar clic en Imagen Nueva pantalla. Et a ver cómo se verá. Bien, chicos, así que cada vez que algún usuario haga clic en
tres puntos del perfil, esto aterrizaría en
esta página en particular. Bien, está funcionando bien. Y este es un botón B. Obviamente, con la
ayuda del botón Atrás, pueden regresar Bien. Entonces así es como puedes hacer que
cualquier botón sea interactivo. Hagamos que el
icono de configuración sea Interactivo. Simplemente haga clic en el botón Configuración, haga clic en Imagen Nueva pantalla, y automáticamente generará
esa página en particular, derecha. Entonces así es como puedes
crear muchas páginas. Por lo que no hay limitaciones. Puede crear N número de página usando este mismo método. A partir de aquí, puedes cambiar la relación de aspecto de tu diseño. Es decir, puedes ver
tu app en modo tablet, modo
PC o modo pantalla móvil. Bien, para que puedas
cambiar la relación de aspecto. Y supongamos que si tienes que
abrir tu app en nueva pestaña, entonces darás clic en
ese botón en particular. Bien. Y ahora, puedes usar
tu app muy fácilmente. Se puede ver que es
interactivo. Está funcionando bien. Bien. Vamos a hacer clic en el mensaje. Vamos a hacer clic en ese perfil en
particular, pero no está funcionando. Aún no es interactivo. Entonces ahora lo que vamos a hacer, volveremos a ir a
nuestro Google Stitch, y seleccionaré
esa pestaña en particular, y simplemente voy a dar click
en Imagen Nueva iGreen Sencillo. Ahora, por fin, tenemos
una nueva pantalla de LX. Bien, charla con LX. Entonces ahora vamos a Prototipo y recarguemos nuestra página.
Debería funcionar ahora. Así que vamos a hacer clic en AX
y está funcionando bien. Bien, chicos. Entonces así es como puedes hacer que
cualquier página sea interactiva. Entonces si tienes alguna
ayuda por este video, entonces puedes darme una
buena calificación positiva y comentar para que me
pueda motivar Bien, chicos, adiós.
10. Cómo crear una aplicación de escritorio desde el diseño hasta el desarrollo (guía completa): Entonces hola a todos. Bienvenidos a todos ustedes en mi serie maestra completa
en Google Stitch. En esta conferencia en particular, te
enseñaré cómo puedes crear un diseño de UI para
tu trabajo de desarrollo. ¿Bien? Supongamos que estoy trabajando
en la aplicación de grabador de pantalla. Quiero crear una app
Screen Recorder para mi uso personal. Entonces, antes del desarrollo,
necesitamos crear un diseño de interfaz de usuario. ¿Bien? Entonces aquí vamos a usar Google Stitch para el diseño de UI. Y para el desarrollo,
usaremos la antigravedad de Google. Entonces esta es una mega conferencia en que entenderás
cómo puedes crear diseño de
UI con Google
Tech y después de eso, cómo puedes ejecutar este diseño en el mundo real con la
ayuda de Google antigravedad Entonces aprenderemos todo
en este único video desde el diseño de la interfaz de usuario hasta el desarrollo
del producto final. Cubriremos todo
en este video en particular. Y ahora mismo estoy grabando mi video con mi propia app de grabador de
pantalla. Se puede ver que cada
vez que haga clic en cualquier lugar, se acercará o alejará. Bien. Entonces ya he creado
mi app de grabador de pantalla, pero también te mostraré
cómo puedes hacerlo. ¿Bien? Entonces esta es una función, y he asignado todo cuando me traje de
pantalla zoom in, cuando webcame demandó zoom in, cuando Screenshot zoom out, cuando web vino traje zoom Tengo uh lo devuelvo todo. Entonces, si vas a leer esto, crea la aplicación iScrinrcorder para mí con configuración local con las siguientes propiedades Los grabadores
capturarían la cámara web iSCRIN, y el micrófono daría la opción seleccionar un
dispositivo específico respectivamente, agregar el efecto de Zoom Automático en Icreen
cuando hacemos clic en cualquier lugar, lo que significa que cada vez que haga clic en cualquier área,
se
acercará se Para fines de demostración, hagamos clic aquí.
Por lo que se acercará. Bien. Pero recuerda,
una cosa Zoom no
debería
parecerlo alrededor de la flecha. Bien, así que lo he
explicado todo. ¿Bien? Entonces tienes que
explicar todo de manera muy detallada para que obtengas salida de
deseo. Bien. Y a partir de aquí,
seleccionaré web. Estoy seleccionando web porque tengo que generar el diseño de UI
para aplicación de escritorio. No quiero crear
app para móviles. Bien. Entonces aquí seleccionaré web y vamos a presionar el botón Enter y veamos qué va a pasar. Bien. Entonces, finalmente, chicos, nuestro diseño está listo
para usar. ¿Bien? Entonces, antes que nada,
descarguemos su diseño. En primer lugar, seleccionemos cada diseño con la
ayuda de la tecla Mayús. No quiero
seleccionar este diseño. Bien. Ahora, haz clic derecho sobre esto y tienes una opción
llamada Descargar. Se descargará el archivo zip
para usted. Vamos a abrirlo. Y puedes extraer
tu archivo con WinRAR. Extraer archivo o. así que vamos a abrir esta carpeta. Dentro de esta carpeta, obtendrás cuatro carpetas diferentes. Bien. Cada carpeta consta de archivo de
diseño, archivo de
imagen, archivo PNG. Entonces básicamente, abriré antigravedad y subiré todo el tipo de pantalla que obtengamos Bien. Voy a subir todo ahí. Entonces abramos la antigravedad de
Google. Y si quieres aprender la antigravedad de
Google desde
el principio, entonces esta es una serie de conferencias
que debes seguir. ¿Bien? Se trata de un antigravedad de Google. Bien. Ahora vamos a presionar
el botón más. Y aquí tenemos una opción mediática. Entonces, abramos los medios. Y ahora hay que seleccionar
todos estos tipos de pantalla. ¿Bien? Entonces esta es
una pantalla de teclas de acceso caliente. Nuevamente, sube
archivo multimedia. Regresa. Esta es una pantalla de tablero. Después vaya en Medios. Esta es una vista previa de video. Tenemos que crear nuestra app sobre la base de este diseño
particular. Ahora simplemente voy a escribir
implementar este diseño en mi proyecto de grabador de pantalla y presionar el botón enter.
Está pensando ahora. Está implementando todo. Bien, así que aceptemos todo. Dece 60 bucles de
grabación cada uno de alto rendimiento y la
configuración de Zoom permanecen perfectamente intactos y
funcionarán sin problemas
con el nuevo bucle Bien, entonces creo que todo se ha
completado con éxito. Entonces ahora vamos a tratar de
ejecutar esto ejecutarlo. Yo corro. Bien, chicos. Así que finalmente, nuestra propia app de grabador de
pantalla, y podrás ver
que tiene replicar todo como hemos
creado en Google Stitch Está funcionando bien.
Vamos a la biblioteca. Aquí podrás ver tu video grabado
anterior. Si vamos a hacer clic en la
configuración desde aquí, puede asignar una E o iniciar
y detener la grabación de video. También puede editarlo. Bien. Bien, ahora mismo, no
está funcionando, así que puedes pedirle a Google antigravedad
que arregle esto ahora mismo Bien. Bien, bien, chicos. Entonces veamos que está
funcionando bien o no. Esta es un área
de pantalla desde donde puedes
seleccionar tu pantalla. A partir de aquí, puedo
habilitar mi web vino. Y ver que mi webcam ya
es visible. Bien, chicos, en
realidad está funcionando bien. Bien. Desde aquí, puede seleccionar
diferentes cámaras. Aquí, puedo usar mi micrófono. Ahora mismo, esta opción no
está funcionando. Bien. En este momento, no puedo
cambiarme al dispositivo
diferente, así que puedo reportar para eso. Simplemente, iré a Google
antigravedad y teclearé. No soy capaz de seleccionar diferentes cámaras web de pantalla y Mc. A, no puedo
venderle llaves de acceso rápido. Y también, tenemos
un tema más, que es que esta área se está
superponiendo en estos momentos. ¿Bien? El botón Grabar se superpone. Otro patrón. Arreglarlo. Bien. Es así como puedes generar cualquier tipo de diseño
con la ayuda de Google Stitch y
puedes implementar ese diseño con
Google antigravedad Puedes crear cualquier tipo de UI en Google Stitch y puedes implementar esa
cosa antigravedad Ahora intentemos ejecutar nuestra web. Veamos que está funcionando bien. El proceso se ha
completado con éxito. Ahora podemos
seleccionar una pantalla personalizada, una cámara web
personalizada y un micrófono
personalizado. Puedo seleccionar cualquier cosa, puedo
encender o apagar cualquier cosa. Cada característica está funcionando bien. Bien. Y veamos que
somos capaces de establecer una o no. Parche. Bien, chicos, así que soy capaz de seleccionar
unas teclas de acceso rápido personalizadas. Bien. Vamos a presionar
el botón del lápiz. No voy a hacer, pero en realidad está
funcionando bien. ¿Bien? Y también el problema
de superposición del botón de grabación
se han resuelto con éxito
y ver eso. Entonces, si disfrutaste de esta conferencia, entonces no olvides darme buena calificación positiva y
comando para que pueda motivarme a subir más contenido de este tipo en esta serie de conferencias en
particular Así que no olvides
darme tus comentarios. Bien, chicos, los veo en
la próxima conferencia. Adiós.
Ankit Shrivastava
