Alright, I feel like the finish line is in sight. We've
got our render tree. Can we put pixels on the screen now?
>> We're definitely very close, but there's one more
step. We still need to figure out where and
how all the elements are positioned on the page.
And that's the layout step. Let's take a look. To
show a layout in action I've come up with
a simple render tree. Here's what the final result will
look like. Note that if we rotate the phone,
the dimensions of the boxes change. But their proportions stay
the same. Let's see if we can figure out what the
browser is doing here. Let's start at the top. We set
the background on the body element to gray. That makes sense.
That's exactly what we saw. And we set its width to 100%.
>> Wait, that's 100% of what exactly?
>> It's 100% of the layout viewport size. If you
paid attention, our hello world examples contained an extra meta tag.
>> Oh yeah, I was reading the web
fundamentals guide on responsive design. And it said that I should always
have this tag. But I never really understood what it was for.
>> It is a bit cryptic, but let's try to make sense of it. What
it's doing is telling the browser that
the width of the layout viewport should be
equal to the device width. So, let's say that the device width is 320 pixels.
Then, if this meta viewport tag is present,
the browser will set the layout viewport to
320 pixels and that will be our 100%.
>> Oh, I see. But what happens if I don't provide this tag?
>> Then the browser will use the default viewport width, which is
typically 980 pixels. And it's optimized for large screens. You know how
sometimes, sites render zoomed out and you have to zoom to navigate
and read the text. That's because they're not setting delay at viewport.
>> Oh that makes sense. I am
definitely not a big fan of those sites.
>> Neither am I. To build great mobile experience, you should always set them at
a viewport. But getting back to our example.
If the device with this 320 pixels, then
the body will be 320 pixels wide. Next, we have the divnote at 50%
of the width. And it is a child of body, so its width is relative to its parent.
And 50% of 320 pixels is 160 pixels. And, for
paragraph, the width is 50% of its parent. Giving us
the width of 80 pixels. And, with that, we're done.
That's layout. Now, how about you give it a try?
حسنًا، أشعر أن الأمر قد شارف على الانتهاء. لقد أصبح لدينا
شجرة العرض. هل يمكننا وضع وحدات بكسل على الشاشة الآن؟
>> نحن قريبون جدًّا بالفعل، ولكن تبقى هناك
خطوة أخرى. ما زلنا نحتاج إلى معرفة أماكن
.وضع جميع العناصر على الصفحة وكيفية القيام بذلك
وهذه هي خطوة التخطيط. Let's take a look. لاستعراض
،تخطيط في وضعه الفعلي
فقد أتيت لكم بشجرة عرض بسيطة. هذا ما ستبدو عليه
،النتيجة النهائية. لاحظوا أنه عندما نقوم بتدوير الهاتف
تتغير أبعاد المربعات. ولكن تبقى النسب
كما هي. دعونا نرى ما إذا كان يمكننا التعرُّف على
ما يفعله المستعرض هنا. لنبدأ من أعلى. نقوم بتعيين
.خلفية العنصر body على اللون الرمادي. يبدو ذلك منطقيًّا
.هذا ما رأيناه بالضبط. ونقوم بتعيين عرضها على 100%
>> مهلاً، 100% من ماذا بالضبط؟
>> إنها 100% من حجم منفذ العرض الخاص بالتخطيط. إذا
.لاحظت، فستجد أن أمثلة hello world الخاصة بنا تحتوى على علامة meta إضافية
>> آه نعم، كنت أقرأ
دليل أساسيات الويب حول التصميم التفاعلي. وكان يقول إنه يجب أن
.يكون لديَّ هذه العلامة دائمًا. ولكني لم أفهم السبب وراء ذلك بالفعل
>> يبدو ذلك غامضًا إلى حد ما، ولكن دعنا نحاول فهمها. تتمثل
وظيفتها في إخبار المستعرض
بأن عرض منفذ عرض التخطيط
.يجب أن يكون مساويًا لعرض الجهاز. إذًا، دعنا نفترض أن عرض الجهاز يبلغ 320 بكسل
،إذًا، في حالة وجود علامة meta الخاصة بمنفذ العرض
فإن المستعرض سوف يعين منفذ العرض الخاص بالتخطيط على
.320 بكسل وهذا سيمثل 100% بالنسبة لنا
>> حسنًا، أفهم ذلك. ولكن ما الذي يحدث إذا لم أقم بإضافة هذه العلامة؟
>> إذًا، يستخدم المستعرض عرض منفذ العرض الافتراضي، والذي عادة
ما يبلغ 980 بكسل. وهي مُحسنة لتناسب الشاشات الكبيرة. أتعرفون، أحيانًا يبدو
عرض المواقع مُصغرًا ويكون عليكم التكبير
.للتنقل وقراءة النص. يرجع السبب في ذلك إلى أنهم لا يقومون بتعيين تأخير بمنفذ العرض
>> آه، يبدو هذا منطقيًّا. لا
.تعجبني تلك المواقع على الإطلاق
>> ولا أنا. لبناء تجربة رائعة بالنسبة للأجهزة الجوّالة، يجب عليك دائمًا
.تعيينها بمنفذ العرض. ولكن بالعودة إلى مثالنا
إذا كان عرض شاشة الهاتف الجوّال 320 بكسل، إذًا
فسيبلغ عرض العنصر body 320 بكسل. وبعد ذلك، يكون عرض العنصر divnote
.هو 50%. ويُعد هذا عنصرًا تابعًا للعنصر body، وبالتالي يتناسب عرضه مع أصله
ونسبة 50% من 320 بكسل تساوي 160 بكسل. وبالنسبة
،لعنصر الفقرة، يبلغ العرض 50% من الأصل الذي يتبعه. وبالتالي
.يبلغ عرضه 80 بكسل. وبذلك، نكون قد انتهينا
فهذا تخطيط. والآن، ما رأيكم أن تجربوا ذلك؟
Parece que ya se ve la línea de meta.
Tenemos nuestro árbol de renderización. ¿Podemos colocar píxeles en la pantalla?
Ya estamos muy cerca, pero todavía nos falta un paso.
Todavía tenemos que averiguar
dónde y cómo se posicionan todos los elementos en la página.
Y ese es el paso del diseño. Veámoslo.
Para mostrar un diseño en acción
he elaborado un árbol de renderización muy simple.
Así es como queda el resultado final.
Fíjate que si rotamos el teléfono
las dimensiones de las cajas cambian
pero sus proporciones siguen siendo las mismas.
Veamos si podemos averiguar qué está haciendo el navegador aquí.
Empecemos por arriba.
Asignamos el color gris al fondo del elemento BODY.
Tiene sentido. Es exactamente lo que hemos visto.
Y establecemos su ancho en el 100%.
Espera, ¿el 100% de qué exactamente?
El 100% del diseño de la ventana gráfica.
Si prestaste atención, nuestros ejemplos de hola mundo
contenían una meta etiqueta extra.
Sí, estaba leyendo la guía de fundamentos web
sobre el diseño receptivo
y decía que siempre se debía incluir esta etiqueta
pero nunca he entendido para qué sirve.
Es un poco críptico, pero vamos a intentar entenderlo.
Lo que hace es decirle al navegador
que el ancho del diseño en la ventana gráfica
debería ser el mismo que el ancho del dispositivo.
Digamos que el ancho del dispositivo es 320 píxeles.
Entonces, si esta meta etiqueta de la ventana gráfica está presente
el navegador asignará al diseño de la ventana gráfica 320 píxeles
y ese será nuestro 100%.
Ya veo. ¿Pero qué ocurre si no incluyo esta etiqueta?
Entonces el navegador usará
el ancho predeterminado de la ventana gráfica
que suele ser 980 píxeles
y está optimizado para pantallas más grandes.
¿Sabes que a veces las páginas se presentan reducidas
y tienes que ajustar el zoom para poder navegar y leer el texto?
Eso ocurre porque no han definiendo el diseño de la ventana gráfica.
Tiene sentido. No me gustan mucho esas páginas.
A mí tampoco. Para crear una buena experiencia móvil,
siempre deberías definir la etiqueta meta de la ventana gráfica.
Pero volviendo a nuestro ejemplo.
Si el dispositivo tiene 320 píxeles,
entonces el BODY tendrá 320 píxeles de ancho.
Después tenemos la etiqueta DIV
al 50% de la anchura
y es hijo de BODY,
así que su ancho es relativo al de su padre.
El 50% de 320 píxeles son 160 píxeles
y la anchura del párrafo es el 50% de la de su padre
que da como resultado 80 píxeles.
Y con esto hemos terminado. Esto es el diseño.
¿Qué te parece si lo pruebas?
ゴールが見えてきたようですね
レンダーツリーはできました 画面にすぐピクセルを配置できますか？
近づいていますが もう1ステップあります
ページで全要素がどこへどのように配置されるか
理解する必要がまだ残っています
それがレイアウトのステップです 見てみましょう
実際の処理でのレイアウトを見せるために
簡単なレンダーツリーを用意しました これが最終的な結果の様子です
スマートフォンを回転させると
長方形の寸法が変わりますが 要素の比率は変わらない点に注意してください
ブラウザの動作を解明できるか見てみましょう
上から始めましょう
body要素の背景色を灰色に設定します これは明らかです
まさに見たとおりです またその幅を100％に設定します
正確には何に対して100％なんでしょう？
レイアウトビューポートの大きさの100％です
注意して見ると “Hello World”デモは 追加のmetaタグを含んでいます
レスポンシブデザインについての
基礎ガイドを読んでいたのですが それにはこのタグを
常に加えるとありましたが 何のためか実際には分かりませんでした
これはやや謎めいていますが 解明してみましょう
これがしていることは レイアウトビューポートの幅が
端末の幅と等しくあるべきという点を ブラウザに命じることです
端末の幅が320ピクセルとすると
このmeta viewportタグがあれば
ブラウザはレイアウトビューポートを 320ピクセルに設定し
それがここでの100％になります
分かりました しかしこのタグを与えなければどうなりますか？
ブラウザはデフォルトのビューポート幅を使います
大概は980ピクセルです また大きな画面用に最適化されています
時々サイトが小さくレンダリングされて 操作したりテキストを読むために
拡大する必要があります それはビューポートに 幅が設定されていないからです
なるほど分かりました
確かにそういったサイトは好きではありません
私もです 携帯端末でサイトを見やすくするには ビューポートを常に設定すべきです
さて例に戻りましょう
端末幅をこの320ピクセルとすれば
bodyは320ピクセルの幅です 次にdivノードの幅は50％です
またbodyの子であり その幅は親と関連しているので
320ピクセルの50％は160ピクセルです
また段落については幅が親の50％です
つまり幅は80ピクセルです そこで終わりです
これがレイアウトです 皆さんも試してみては？
좋아요, 결승선이 보이네요
우리는 렌더 트리를 배웠습니다 이제 화면에 픽셀을 넣을 수 있는 건가요?
확실히 매우 가까워졌어요 하지만 한가지 단계가 더 남아있습니다
우리는 여전히 모든 요소가 페이지 어디에
그리고 어떻게 위치해야 하는지 알아내야 해요
그리고 그게 바로 레이아웃 단계예요, 보시죠
레이아웃이 어떻게 작동되는지 보여드리기 위해 간단한 렌더 트리를 가져왔어요
여기 최종 결과물이 보입니다
만약 우리가 폰을 돌리면 박스 크기가 변화하는 게 보이시죠?
하지만 이 박스들의 속성은 여전히 같습니다
브라우저가 여기서 무엇을 하는지 알아보죠
위에서부터 시작해 볼까요?
우리는 body 요소의 배경색을 회색으로 설정했고 이건 이해가 되네요
정확히 우리가 보았던 것입니다 그리고 폭을 100%로 설정했어요
>> 잠시만요, 정확히 무엇의 100%라는 거죠?
>> 레이아웃 뷰포트 크기의 100%에요 만일 여러분들이 주의 깊게 보았다면
우리의 Hello world 예제가 추가적인 meta 태그를 포함하는 것을 보았을 거에요
>> 오 맞아요, 반응형 디자인에 관한 웹 기초 가이드를 읽어본 적 있어요
그 가이드에서는 제가 항상 추가적인 meta 태그를 써야한다고 했던 것 같아요
하지만 무슨 의미인지 이해하진 못했어요
>> 약간 수수께끼 같죠, 하지만 이해하려고 노력해 봅시다
이것이 하는 일은 브라우저에
레이아웃 뷰포트의 폭이 기기의 폭과 일치해야 한다고 알려주는 것이죠
예를들어, 기기의 폭이 320px이라고 합시다
만약 이 meta 뷰포트 태그가 존재하면
브라우저는 레이아웃 뷰포트를
우리가 말하는 100%인 320px로 설정할 거에요
>> 오, 알겠네요 그렇다면 제가 이 태그를 쓰지 않으면 어떻게 되나요?
>> 그러면 브라우저는 기본 뷰포트 폭을 쓰게 됩니다
일반적으로 980px이죠 큰 스크린에서 최적화된 크기에요
그리고 때때로 겪어보았겠지만 사이트가 줌 아웃된 채로 렌더링이 돼서
텍스트를 읽고 탐색을 하려면 확대를 해야 하죠, 뷰포트의 레이아웃이 설정되지 않았기 때문이에요
>> 오 이해가 되네요
전 확실히 그런 사이트를 좋아하지 않아요
>> 저도 좋아하지 않죠, 멋진 모바일 경험을 주기 위해서
여러분들은 항상 뷰포트에 신경을 써야 합니다 다시 우리의 예제로 돌아가 보죠
만약 기기의 폭이 320px이면
body는 320px의 폭을 가질 것입니다 다음으로, div 노드는 50%의 폭을 가지고 있어요
그리고 이 노드는 body의 자식이고 그 폭은 부모에 상대적이에요
그리고 320px의 50%는 160픽셀입니다
또한 paragraph는 부모의 50% 폭을 가지므로
80px의 폭을 가지게 됩니다 그리고 이게, 끝입니다
이것이 레이아웃이에요 자, 한번 실습을 해볼까요?
Acho que já estou vendo a linha de chegada.
Temos nossa árvore de renderização. Podemos colocar pixels na tela agora?
Estamos muito perto, mas há mais uma etapa.
Ainda precisamos descobrir onde e como todos
os elementos são posicionados na página.
E essa etapa é o layout. Vamos ver.
Para mostrar um layout em ação, criei uma árvore de renderização simples.
Aqui está o resultado final.
Se a gente girar o telefone, as dimensões das caixas mudam,
mas as proporções permanecem iguais.
Vamos tentar descobrir o que o navegador está fazendo.
Vamos começar na parte de cima.
Definimos o plano de fundo no elemento body como cinza.
Isso faz sentido. Isso é exatamente o que vimos.
E definimos a largura como 100%.
Mas 100% de que exatamente?
100% do tamanho da janela de exibição do layout.
Se você prestou atenção,
nossos exemplos hello world continham uma tag meta extra.
Ah, sim, eu estava lendo o manual de fundamentos da Web sobre design responsivo.
E ele dizia que eu sempre devo ter essa tag.
Mas nunca entendi realmente por quê.
É um pouco complexo, mas vamos tentar entender.
O que ela faz é dizer ao navegador que a largura
da janela de exibição do layout deve ser igual à largura do dispositivo.
Digamos que o dispositivo tem 320 pixels.
Se esta tag meta viewport estiver presente,
o navegador definirá a janela de exibição do layout como 320 pixels
e isso será nosso 100%.
Entendo. Mas o que acontece se eu não incluir essa tag?
O navegador usa a largura padrão da janela de exibição,
geralmente 980 pixels. E ele está otimizado para telas grandes.
Sabe como, às vezes, os sites ficam pequenos e é preciso
ampliar para navegar e ler o texto?
Isso acontece porque eles não definem a janela de exibição do layout.
Isso faz sentido.
Definitivamente, não sou fã desses sites.
Nem eu. Para uma ótima experiência móvel,
sempre defina a tag meta viewport.
Mas voltando ao nosso exemplo.
Se o dispositivo tem 320 pixels de largura,
o corpo terá 320 pixels de largura.
Depois temos o nó div com 50% da largura.
E ele é filho de body, então sua largura será relativa ao pai.
E 50% de 320 pixels é 160 pixels.
E, para paragraph, a largura é 50% do pai.
Isso nos dá a largura de 80 pixels. E, com isso, terminamos.
Esse é o layout. Agora, que tal você tentar?