Responsive Layout: Overview - Google Web DesignerYouTube↗  IA↗(long shot)
Science & Technology  106.5K views 444 likes 8 dislikes   03 May 2016
Google Web Designer 76.8K subscribers United States YouTube↗


Please select the problem
You must specify your email and describe the problem in detail
Describe your problem in detail if it's not obvious

Click to Play Video Click to Play Video
Mein Name ist Lucas und ich bin Entwickler bei
Me llamo Lucas y trabajo como ingeniero de Google Web Designer.
Google Web Designer.
Me llamo Lucas y trabajo como ingeniero de Google Web Designer.
In diesem Video zeige ich Ihnen, wie man Dokumente im Responsive Design
En este vídeo, crearemos documentos adaptables con reglas de medios.
mit Medienregeln erstellt.
En este vídeo, crearemos documentos adaptables con reglas de medios.
Mit Medienregeln können Sie einem Dokument
Estas reglas permiten añadir estilos adicionales
zusätzliche Stilelemente hinzufügen, wenn seine Größe in einem definierten Bereich liegt.
a un documento sin que su tamaño supere el intervalo definido.
Dazu zeige ich Ihnen ein einfaches Beispiel.
Para entender todo el proceso, veremos un ejemplo sencillo.
Zuerst erstelle ich eine neue Datei und aktiviere über dieses Kästchen
Primero creamos un archivo y marcamos esta casilla
das Responsive-Layout.
para aplicar un diseño adaptable.
Dadurch werden Breite und
Esto significa que al principio la anchura y altura de la página
Höhe dieser Seite zu Beginn auf 100 % festgelegt,
serán del 100%, como se muestra en el Inspector de Propiedades.
wie man unter "Eigenschaften" sieht.
serán del 100%, como se muestra en el Inspector de Propiedades.
Alternativ können Sie auch diese Schaltfläche anklicken.
Podemos aplicar este efecto haciendo clic en este botón.
Sollten Sie also vergessen, das Kästchen im Dialogfeld "Neue Datei" anzuklicken,
Si no marcas la casilla al crear el archivo, no pasa nada.
macht das nichts.
Si no marcas la casilla al crear el archivo, no pasa nada.
Ich möchte jetzt ein Dokument erstellen,
Crearemos un archivo de diseño vertical con la ventana gráfica estrecha
das bei einem schmalen Darstellungsbereich ein vertikales Layout
Crearemos un archivo de diseño vertical con la ventana gráfica estrecha
und bei einem breiteren Darstellungsbereich ein horizontales Layout hat.
y otro de diseño horizontal con la ventana gráfica más ancha.
Zuerst erstelle ich einen beliebigen Inhalt.
Empecemos por crear un contenido inicial.
Ich füge ein Bild und ein Textfeld hinzu.
Añadimos una imagen y un cuadro de texto.
Ich zentriere den Text im Textfeld
Centramos el texto del cuadro y aumentamos un poco su tamaño.
und vergrößere ihn ein wenig.
Centramos el texto del cuadro y aumentamos un poco su tamaño.
Dann passe ich die Größe des Textfelds an den Text an.
Luego cambiamos el tamaño del cuadro para adaptarlo al del texto.
OK.
Listo.
Ich habe diese beiden Kästchen im Auswahltool angeklickt.
Hemos marcado estas 2 casillas en la Herramienta de selección
Deshalb verändert sich das Layout
para que el diseño se alinee con el contenedor superior y sea fluido
in Abhängigkeit zum übergeordneten Container und ist fließend.
para que el diseño se alinee con el contenedor superior y sea fluido
Wenn der übergeordnete Container größer oder kleiner wird,
es decir, se adapte al tamaño del contenedor.
passt sich das Layout also an.
es decir, se adapte al tamaño del contenedor.
Ich möchte, dass die Elemente den gleichen Abstand
Igualamos los márgenes superior e inferior del documento
vom oberen und unteren Rand haben und füge deshalb
Igualamos los márgenes superior e inferior del documento
zwei kleine Distanzelemente ein,
y añadimos un par de elementos de espaciado para facilitar la tarea.
um das zu vereinfachen.
y añadimos un par de elementos de espaciado para facilitar la tarea.
Hier ist eines und da ist noch eines.
Uno por aquí y otro por allá.
Jetzt ordne ich diese Elemente
A continuación, organizamos estos elementos en la página.
grob auf der Seite an.
A continuación, organizamos estos elementos en la página.
Zum Schluss wähle ich alles aus,
Por último, lo seleccionamos todo
zentriere es horizontal und passe die vertikalen Abstände an.
lo centramos horizontalmente e igualamos los márgenes verticalmente.
Testen kann man das mit dem neuen Tool zum Ändern der Darstellungsbereichsgröße,
Podemos probar este diseño con la nueva Herramienta
auf das ich später noch eingehen werde.
de modificación de tamaño, de la que hablaremos más tarde.
Wir sehen, dass das Layout erhalten bleibt,
Vemos que el diseño se mantiene intacto
wenn ich die Größe des Darstellungsbereichs ändere.
al cambiar el tamaño de la ventana gráfica.
Wenn jetzt der Darstellungsbereich breiter ist,
Ahora ensanchamos la ventana gráfica y cambiamos el diseño
möchte ich jedoch, dass das Layout
Ahora ensanchamos la ventana gráfica y cambiamos el diseño
horizontal statt vertikal ist.
de vertical a horizontal.
Dazu verwende ich Medienregeln.
Para ello, usamos reglas de medios.
Ich öffne zuerst dieses neue Responsive-Steuerfeld,
Primero accedemos al nuevo panel Capacidad de respuesta
in dem man Medienregeln verwalten kann.
que sirve para gestionar las reglas de medios.
Ich füge einen Haltepunkt für die Breite hinzu.
Añadimos un punto de interrupción de anchura.
Dabei habe ich zwei Medienregeln erstellt:
Una vez hecho, tendremos dos reglas de medios:
eine für Darstellungsbereiche, die schmäler
una para ventanas gráficas que sean más estrechas
als der Haltepunkt sind, und eine für Darstellungsbereiche,
que el punto de interrupción y otra para ventanas gráficas
die breiter als der Haltepunkt sind.
que sean más grandes o anchas que el punto de interrupción.
Die Breiten werden hier
En el panel Capacidad de respuesta, se muestran los intervalos de anchura.
im Responsive-Steuerfeld angezeigt.
En el panel Capacidad de respuesta, se muestran los intervalos de anchura.
Die Farbcodierung hier entspricht
Este código de colores coincide con el de la regla de arriba
der im oberen Lineal.
donde también se muestran
Dieses Lineal zeigt auch die Breiten jeder Medienregel an.
los intervalos de anchura que alcanza cada regla de medios.
Man sieht, dass die obere Medienregel aktiv ist.
La regla de medios superior está activa.
Ich mache jetzt einige Änderungen,
Vamos a hacer algunos cambios específicamente a esa regla.
die nur für diese Medienregel gelten.
Vamos a hacer algunos cambios específicamente a esa regla.
Ich zentriere nun die Objekte vertikal.
Primero movemos los elementos para centrarlos más verticalmente.
Dann wähle ich alles aus
Lo seleccionamos todo y aplicamos un diseño centrado verticalmente
und wende ein Layout an, das vertikal zentriert ist
y un diseño con los márgenes igualados horizontalmente.
und horizontal die gleichen Abstände hat.
y un diseño con los márgenes igualados horizontalmente.
So, fertig.
Ya está.
Wenn ich jetzt die Größe des Darstellungsbereichs ändere,
Si cambiamos el tamaño de la ventana gráfica,
hat er ein horizontales Layout, wenn er breit genug ist,
esta adopta un diseño horizontal cuando tiene suficiente anchura
und wechselt dann in ein vertikales Layout,
y un diseño vertical cuando es más estrecha.
wenn er schmäler wird.
y un diseño vertical cuando es más estrecha.
Ich kann sogar den Punkt für den Wechsel einstellen,
Incluso podemos decidir cuándo debe cambiar de tamaño
indem ich an diesen Markierungen im Lineal ziehe.
arrastrando estos marcadores de la regla.
Jetzt möchte ich näher auf die Medienregeln
Veamos la IU de las reglas de medios y analicemos lo que acabamos de hacer.
und was wir gerade gesehen haben eingehen.
Veamos la IU de las reglas de medios y analicemos lo que acabamos de hacer.
Zuerst wechseln wir zur Codeansicht.
Abrimos la vista de código.
Hier sehen wir die soeben hinzugefügten Medienregeln.
Aquí podemos ver las reglas que acabamos de añadir.
Ich habe zwei erstellt, die hier zu sehen sind.
Por ejemplo, ahora tenemos las dos que hemos creado.
Die untere ist leer
La de abajo está vacía y la de arriba contiene cambios en las líneas
und die obere beinhaltet Änderungen für oben
La de abajo está vacía y la de arriba contiene cambios en las líneas
und links sowie Anpassungen für
superior e izquierda y al estilo que se deben aplicar
ein horizontales Layout.
para conseguir un diseño horizontal.
In der Designansicht sind unter "Eigenschaften"
Si volvemos a la vista de diseño y nos fijamos en el Inspector de Propiedades
alle Eigenschaften hervorgehoben, die von der aktuellen Medienregel
vemos que las propiedades sustituidas por estas reglas de medios
überschrieben sind.
no están destacadas.
Durch Klicken auf das hervorgehobene Symbol
Si hacemos clic en el icono destacado
kann ich die Überschreibung entfernen.
tenemos la opción de anular la sustitución.
Im CSS-Steuerfeld sehe ich
En el panel CSS, se muestra el contenido de la regla de medios
die Inhalte der Medienregel
En el panel CSS, se muestra el contenido de la regla de medios
und die überschriebenen Regeln
en el modo solo lectura, así como las reglas que sustituidas.
in einem schreibgeschützten Modus.
en el modo solo lectura, así como las reglas que ha reemplazado.
Die Größe des Darstellungsbereichs lässt sich auf vielfältige Weise ändern.
Podemos cambiar el tamaño de la ventana gráfica en cualquier momento
Ich kann sie jederzeit
y de varias formas con tan solo hacer clic en la regla.
durch Anklicken des Lineals ändern.
y de varias formas con tan solo hacer clic en la regla.
Da der Darstellungsbereich jetzt schmäler ist
Como la ventana se ha estrechado y cabe en la regla de medios inferior
und in die untere Medienregel passt,
Como la ventana se ha estrechado y cabe en la regla de medios inferior
wird dieser erste Bereich hervorgehoben.
el primer intervalo está destacado.
Den Darstellungsbereich kann man am besten
Para controlar mejor el tamaño de la ventana gráfica, podemos usar
mit dem Tool zum Ändern der Darstellungsbereichsgröße anpassen.
Para controlar mejor el tamaño de la ventana gráfica, podemos usar
Mit Ziehpunkten können
la Herramienta de modificación del tamaño
Breite und Höhe beliebig geändert werden.
que permite cambiar la anchura y altura de la ventana gráfica con total libertad.
Wenn sich der Darstellungsbereich in neue Medienregeln bewegt,
Cada vez que se añaden reglas nuevas
wird der passende Bereich hervorgehoben.
a la ventana gráfica, se destaca el intervalo pertinente.
Ich kann die Größe des Darstellungsbereichs auch direkt mit Texteingaben definieren
También podemos definir el tamaño de la ventana introduciendo estos valores
und ich kann ein Menü mit Anzeigen- und Gerätegrößen
y usar un menú con tamaños de anuncios y dispositivos comunes.
verwenden.
y usar un menú con tamaños de anuncios y dispositivos comunes.
Man kann auch benutzerdefinierte Größen des Darstellungsbereichs festlegen,
Por último, podemos crear tamaños personalizados de ventanas gráficas
indem man einen Bereich wählt und dann auf dieses Plus klickt.
configurando una ventana gráfica y haciendo clic en el signo más.
Der neue Darstellungsbereich erscheint dann hier
El nuevo tamaño de ventana aparecerá en este menú de tamaños personalizados.
unter "Benutzerdefinierte Größen".
El nuevo tamaño de ventana aparecerá en este menú de tamaños personalizados.
Bei der Verwendung von Medienregeln
Podemos trabajar con reglas de medios de dos modos distintos.
gibt es zwei Bearbeitungsmodi.
Podemos trabajar con reglas de medios de dos modos distintos.
In einem Modus fügen Sie den Hauptinhalt
El primero consiste en añadir el contenido maestro de un documento
des Dokuments hinzu, also alles,
El primero consiste en añadir el contenido maestro de un documento
was nicht in einer Medienregel enthalten ist.
es decir, lo que hay fuera de una regla de medios.
Das ist das, was man unabhängig von der Größe des Dokuments sieht.
Es lo que se muestra sea cual sea el tamaño del documento.
Der andere Modus wird für die Bearbeitung von Medienregeln
El segundo consiste en editar reglas de medios
zum Überschreiben des Standardstils verwendet,
y sirve para sustituir el estilo predeterminado del contenido maestro.
der im Hauptinhalt definiert ist.
y sirve para sustituir el estilo predeterminado del contenido maestro.
Zum Wechseln zwischen diesen beiden Modi verwendet man
Podemos pasar de un modo a otro desde el panel Capacidad de respuesta.
das Responsive-Steuerfeld.
Podemos pasar de un modo a otro desde el panel Capacidad de respuesta.
Wenn ich auf die Hauptregeln klicke, verschwindet also
Al hacer clic en Reglas maestras, el estilo de sustitución
meine Überschreibung.
desaparece de la regla de medios.
Wenn ich die Medienregeln nochmal auswähle, wird sie wieder angezeigt.
Si volvemos a seleccionar Reglas de medios, reaparece.
Man sieht auch, dass manche Tools deaktiviert sind.
También hay un par de herramientas inhabilitadas
Zum Beispiel ist das Tag-Tool deaktiviert.
como la Herramienta de etiqueta.
Das Bearbeiten einer Medienregel
Esto pasa al editar una regla de medios
dient letztlich nur dazu,
ya que cada cambio se convierte en un nuevo estilo de la regla.
einen Stil in dieser Medienregel festzulegen.
ya que cada cambio se convierte en un nuevo estilo de la regla.
Würde ich beispielsweise das Tag-Tool verwenden,
Si usáramos la Herramienta de etiqueta, se editaría el DOM, pero como no es
würde ich das DOM bearbeiten. Und da das nicht
Si usáramos la Herramienta de etiqueta, se editaría el DOM, pero como no es
auf die Medienregel beschränkt ist, ist es deaktiviert.
solo de la regla, está inhabilitada.
Über Medienregeln
Al añadir reglas de medios, se pueden hacer muchas cosas
können Sie vieles definieren,
Al añadir reglas de medios, se pueden hacer muchas cosas
unter anderem Position, Größe, Farbe, Deckkraft, Sichtbarkeit
como definir la posición, el tamaño, el color, la opacidad
und Animation.
la visibilidad y animaciones.
Das war's.
Hasta aquí llega el vídeo.
In den nächsten Videos zeige ich,
En los próximos vídeos, veremos cómo crear
wie Sie aufwendigere Dokumente mit mehreren Haltepunkten erstellen,
documentos más ricos con varios puntos de interrupción
einschließlich Breite, Höhe und der Ausrichtung des Dokuments.
como la anchura, altura y orientación del documento.
Außerdem zeige ich, wie man Animation
También aprenderemos a combinar animaciones con reglas de medios.
mit Medienregeln kombinieren kann.
También aprenderemos a combinar animaciones con reglas de medios.
Vielen Dank für Ihre Aufmerksamkeit.
Gracias por tu atención.
Similar videos:

Responsive Layout: Advanced Techniques - Google Web Designer
Google Web Designer
54.7K views 200 likes 4 dislikes 03 May 2016100% match


Responsive Overview - Google Web Designer
Google Web Designer
7.2K views 126 likes 2 dislikes 31 Aug 202083% match

Google Web Designer - Animation Updates
Google Web Designer
53.6K views 136 likes 9 dislikes 17 Nov 201575% match


Google Web Designer - Spritesheet Component Overview
Google Web Designer
18.6K views 52 likes 4 dislikes 17 Nov 201575% match


Google Web Designer - Text Overview
Google Web Designer
13.1K views 25 likes 9 dislikes 17 Nov 201575% match

An Overview of the updated Google Web Designer
Google Web Designer
89.8K views 346 likes 14 dislikes 04 Aug 201475% match


Google Web Designer - Streetview Component Overview
Google Web Designer
7.3K views 24 likes 0 dislikes 17 Nov 201575% match


A Google Web Designer Thought Experiment
Google Web Designer
330.9K views 345 likes 20 dislikes 04 Aug 201475% match


Responsive Layout: Animation - Google Web Designer
Google Web Designer
27.6K views 82 likes 10 dislikes 03 May 201674% match


Responsive Ad Workflow - Google Web Designer
Google Web Designer
21.8K views 208 likes 5 dislikes 24 Aug 201867% match


Text Overview - Google Web Designer
Google Web Designer
7.1K views 18 likes 3 dislikes 03 Jan 201857% match


Groups Overview - Google Web Designer
Google Web Designer
2.6K views 11 likes 2 dislikes 03 Jan 201857% match


Parallax Overview - Google Web Designer
Google Web Designer
31.9K views 285 likes 6 dislikes 28 Nov 201857% match


Outliner Overview - Google Web Designer
Google Web Designer
6K views 47 likes 1 dislikes 31 Mar 202057% match

2D & 3D Drawing Overview - Google Web Designer
Google Web Designer
6.3K views 34 likes 5 dislikes 03 Jan 201857% match


Timeline Advanced Mode Overview - Google Web Designer
Google Web Designer
12.2K views 93 likes 3 dislikes 18 Jun 201841% match


Responsive Campaign Tutorial - Google Web Designer
Google Web Designer
3.1K views 84 likes 0 dislikes 15 Oct 202041% match

Motion Paths Overview - Google Web Designer
Google Web Designer
37.8K views 228 likes 5 dislikes 21 Jun 201740% match


Groups with Events Overview - Google Web Designer
Google Web Designer
3.4K views 15 likes 2 dislikes 03 Jan 201840% match


Google Web Designer - AdWords Dynamic Overview
Google Web Designer
55K views 64 likes 21 dislikes 31 Aug 201540% match


Image Processing Overview - Google Web Designer
Google Web Designer
4.3K views 65 likes 0 dislikes 31 Aug 202040% match

Advanced Preview Configuration - Google Web Designer
Google Web Designer
14.3K views 68 likes 3 dislikes 28 Nov 201838% match

Google Web Designer - DoubleClick Studio Dynamic Overview
Google Web Designer
11.5K views 20 likes 8 dislikes 17 Nov 201536% match


Focal point for responsive images - Google Web Designer
Google Web Designer
5.7K views 68 likes 2 dislikes 29 Jul 201936% match


Getting started with Google Web Designer: how to create a simple banner ad
Google Web Designer
46.6K views 339 likes 14 dislikes 29 Jul 201932% match


Easing functions (Step start/end) - Google Web Designer
Google Web Designer
25.5K views 43 likes 5 dislikes 16 Nov 201632% match


Timeline Enhancements - Google Web Designer
Google Web Designer
13.2K views 68 likes 3 dislikes 21 Jun 201730% match


Google Web Designer Certification - 1. Basics
Google Web Designer
7.2K views 10 likes 0 dislikes 29 Jun 201530% match


Template improvements - Google Web Designer
Google Web Designer
8.9K views 41 likes 2 dislikes 21 Jun 201730% match


Get Shareable Link and Send Preview to Device Overview - Google Web Designer
Google Web Designer
1.2K views 19 likes 3 dislikes 31 Mar 202029% match


Settings Privacy About Contact Donate