Groups Overview - Google Web Designer Google Web Designer Spanish Thai

Groups Overview - Google Web DesignerYouTube↗ IA↗(long shot)
Science & Technology 2.6K views 11 likes 2 dislikes 03 Jan 2018

Google Web Designer 76.8K subscribers United States YouTube↗

Me llamo Lucas y soy ingeniero de Google Web Designer.

ผมชื่อลูคัส เป็นวิศวกรในทีม

En este vídeo, explicaré cómo se usan los grupos.

Google Web Designer ครับ ในวิดีโอนี้ ผมจะแสดงวิธีใช้กลุ่ม

Los grupos permiten encapsular contenido para poder volver a usarlo.

กลุ่มเป็นวิธีรวมเนื้อหาเอาไว้ในองค์ประกอบ ที่นำไปใช้ใหม่ได้

Para mostrar qué significa esto, voy a empezar con un ejemplo sencillo.

ผมจะแสดงตัวอย่างง่ายๆ ให้ดูนะครับ จะได้รู้ว่าเป็นยังไง

Añado una imagen a una escena y también un cuadro de texto.

ผมจะใส่รูปภาพบนพื้นที่งาน และใส่ข้อความด้วย

Escribo algo de texto y le doy un poco de formato.

โดยจะพิมพ์ข้อความและจัดรูปแบบนิดหน่อย

Lo centro, lo pongo en negrita.

ทำให้อยู่กึ่งกลาง ให้เป็นตัวหนา

Cambio un poco el tamaño del cuadro de texto.

ปรับขนาดช่องข้อความนิดหน่อย

Ahora selecciono ambos elementos

ตอนนี้ผมจะเลือกทั้ง 2 เอลิเมนต์

hago clic con el botón derecho y selecciono Crear grupo.

คลิกขวาแล้วเลือก "สร้างกลุ่ม"

Le doy un nombre, como Mi grupo.

ป้อนชื่อว่า My Group

Ahora, en la biblioteca de recursos hay una entrada de este nuevo grupo.

กลุ่มนี้จะไปแสดงใน "ไลบรารีไฟล์เนื้อหา" ตอนนี้ผมมีรายการใหม่สำหรับกลุ่ม และอินสแตนซ์ของกลุ่มนี้

Además, los elementos de la escena ahora son una instancia del grupo.

ได้เข้ามาแทนที่เอลิเมนต์ต่างๆ บนพื้นที่งาน

Puedo añadir más instancias arrastrándolas desde la biblioteca.

ผมจะเพิ่มอินสแตนซ์ใหม่ด้วยการลากและวาง จากไลบรารีไฟล์เนื้อหา

Cada una de estas instancias es una referencia al contenido del grupo

อินสแตนซ์แต่ละรายการ

lo que significa que, si edito una instancia

จะอ้างอิงไปยังเนื้อหาของกลุ่ม ซึ่งหมายความว่าถ้าผมแก้ไขอินสแตนซ์ใดก็ตาม

los cambios se reflejarán en ambas.

การเปลี่ยนแปลงจะมีผลในทั้ง 2 ที่

Por ejemplo, voy a cambiar el texto

ตัวอย่างเช่น ผมจะเปลี่ยนแปลงข้อความ

y a crear una animación sencilla en la que el texto se atenúe gradualmente hasta tener opacidad 0

และจะสร้างภาพเคลื่อนไหวแบบง่ายๆ ก่อนอื่นผมจะทำให้ข้อความจางลง จนความโปร่งแสงเป็น 0

y luego vaya recuperando la opacidad 1.

แล้วจะทำให้ความโปร่งแสงกลับเป็น 1

Si reproduzco la animación, vemos que ambas instancias son idénticas.

ตอนนี้ถ้าผมเล่นภาพเคลื่อนไหว จะเห็นว่าทั้ง 2 อินสแตนซ์ จะเหมือนกันทุกประการ

Podemos ver cómo funciona entre bastidores en la vista de código.

ผมจะให้ดูว่าโค้ดเบื้องหลัง เป็นยังไงนะครับ เลยจะเปลี่ยนมุมมองเป็น "มุมมองโค้ด"

En ella, puedo ver un bloque con todos mis grupos.

ในมุมมองโค้ด จะเห็นแถวโค้ด ที่มีกลุ่มที่สร้างไว้ทั้งหมด

Solo hay uno, que tiene una imagen y texto.

จะเห็นว่ามีอยู่กลุ่มเดียว มีรูปภาพและข้อความ

Aquí, en el documento principal, están mis dos instancias.

ส่วนในเอกสารหลัก จะมีอินสแตนซ์ 2 รายการ

Cada una es un elemento div vacío que hace referencia al nombre del grupo.

แต่ละอินสแตนซ์เป็น div ที่ว่างเปล่า

Cuando se publica el documento

ที่อ้างถึงกลุ่มด้วยชื่อ

se introduce el contenido del grupo en cada instancia.

เมื่อคุณเผยแพร่เอกสาร เราจะแทรกเนื้อหาของกลุ่ม ลงในแต่ละอินสแตนซ์

De este modo, se garantiza que las instancias sean siempre idénticas.

จะได้แน่ใจว่าอินสแตนซ์ต่างๆ จะเหมือนกันทุกประการตลอดเวลา

Los grupos pueden incluir cualquier contenido

กลุ่มจะมีเนื้อหาแบบใดก็ได้

que puedas crear en Google Web Designer

ที่คุณสร้างได้ใน Google Web Designer

incluidas instancias de otros grupos.

ซึ่งรวมถึงอินสแตนซ์ของกลุ่มอื่นๆ

Por ejemplo, añado otra instancia aquí

อย่างเช่น ผมจะเพิ่มอีกอินสแตนซ์หนึ่ง

le añado un borde para cambiar un poco su estilo.

ผมจะจัดรูปแบบให้ต่างออกไปสักเล็กน้อย

y luego otro elemento; por ejemplo, un elemento div.

โดยใส่เส้นขอบ แล้วเพิ่มเอลิเมนต์อีกรายการหนึ่ง ซึ่งก็คือ div

Ahora los selecciono y creo otro grupo.

ผมจะเลือกทั้ง 2 อย่างนี้ และสร้างกลุ่มอีกกลุ่มหนึ่ง

Como antes, si edito una instancia, los cambios se reflejan en todas ellas

ซึ่งจะเหมือนกับเมื่อสักครู่ ถ้าผมแก้ไขอินสแตนซ์รายการหนึ่ง อินสแตนซ์ทั้งหมด จะมีการเปลี่ยนแปลงตามนั้นด้วย

estén donde estén.

ไม่ว่าจะแสดงอยู่ที่ไหน

Si elimino todas las instancias de la escena

ถ้าผมลบอินสแตนซ์ทั้งหมดจากพื้นที่งาน

los grupos en sí no desaparecen, sino que permanecen en la bliblioteca de recursos

กลุ่มต่างๆ จะไม่หายไป แต่จะยังอยู่ในไลบรารีไฟล์เนื้อหา

desde donde todavía puedo añadir más instancias a la escena.

และผมจะยังเพิ่มอินสแตนซ์บนพื้นที่งานได้

Para eliminar un grupo de la biblioteca de recursos

ถ้าคุณอยากลบกลุ่มให้หายไปเลย

haz clic con el botón derecho en él y selecciona Eliminar.

ก็คลิกขวาบนไลบรารีไฟล์เนื้อหา แล้วเลือก "ลบ" ได้

En este menú contextual también hay otras opciones.

เมนูตามบริบทนี้มีตัวเลือกอื่นๆ ด้วย

Por ejemplo, puedo cambiar el nombre del grupo y llamarlo Tetera.

เช่น ผมจะเปลี่ยนชื่อกลุ่ม เป็น Teapot ได้

Puedo duplicar el grupo para crear otro con exactamente el mismo contenido.

คุณทำซ้ำกลุ่มได้ ซึ่งจะสร้างอีกกลุ่มหนึ่งขึ้นใหม่ ที่เนื้อหาเหมือนกับกลุ่มต้นฉบับทุกประการ

Por último, también puedo editar el grupo en una vista aparte.

และสุดท้าย คุณจะแก้ไขกลุ่มในมุมมองที่แยกออกมาได้

Esta última opción es útil

ตัวเลือกสุดท้ายนี้มีประโยชน์

si no tienes ninguna instancia en la escena

ถ้าคุณไม่มีอินสแตนซ์บนพื้นที่งานเลย

o si hay demasiados elementos y quieres ver únicamente el grupo.

หรือถ้าพื้นที่งานดูระเกะระกะ แล้วคุณอยากแยกกลุ่มออกมา จะได้เห็นชัดๆ

Seleccionaré esta opción y haré algunos cambios.

ดังนั้นผมจะเลือกตรงนี้ แล้วแก้ไขเพิ่มสักหน่อย

Por ejemplo, añadiré un fondo de color al grupo.

โดยจะเพิ่มพื้นหลังแบบมีสีให้กลุ่ม

Para hacerlo, dibujo un elemento div

ซึ่งทำได้โดยวาด div

cambio su color

เปลี่ยนสี div สักเล็กน้อย

y lo envío al fondo.

แล้วย้ายไปอยู่ด้านหลัง

Una vez hechos los cambios, hago clic en la raíz de la ruta de exploración.

พอแก้ไขเสร็จแล้ว ก็คลิกรูทของเบรดครัมบ์ ตอนนี้ผมกลับมาอยู่บนพื้นที่งานแล้ว

Así, vuelvo a la escena y puedo ver que los cambios se han aplicado en todas las instancias

จะเห็นว่าการเปลี่ยนแปลงเมื่อสักครู่

y que las instancias que añada también tendrán esos cambios.

แสดงในทุกอินสแตนซ์ ถ้าผมเพิ่มอินสแตนซ์ใหม่ ก็จะมีการเปลี่ยนแปลงเดียวกันนี้ด้วย

Con esto termina la introducción a los grupos.

การแนะนำเกี่ยวกับกลุ่มก็จบลงเพียงเท่านี้

En el próximo vídeo, explicaré cómo añadir elementos interactivos

ในวิดีโอถัดไป ผมจะสาธิตวิธีทำให้กลุ่มโต้ตอบได้

a los grupos mediante eventos.

ด้วยการใส่เหตุการณ์ลงไป

Gracias por tu atención.

ขอบคุณที่รับชมครับ