jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

renovations

Browse source
This commit is contained in:
Ilya Kantor 2015-04-03 00:23:05 +03:00
parent 150d92f10f
commit 8f221d05c4
18 changed files with 227 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

2
2-ui/1-document/1-browser-environment/article.md
View file

@ -9,7 +9,7 @@
На рисунке ниже схематически отображена структура, которая получается если посмотреть на совокупность браузерных объектов с "высоты птичьего полёта".
<img src="windowObjects.png">
<img src="windowObjects.svg">
Как видно из рисунка, на вершине стоит `window`.

BIN
2-ui/1-document/1-browser-environment/windowObjects.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 6.1 KiB

76
2-ui/1-document/1-browser-environment/windowObjects.svg Normal file
View file

@ -0,0 +1,76 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="354px" height="308px" viewBox="0 0 354 308" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
<title>windowObjects.svg</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="windowObjects.svg" sketch:type="MSArtboardGroup">
<rect id="Rectangle-1" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="135" y="9" width="80" height="30"></rect>
<text id="window" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#707175">
<tspan x="152" y="28">window</tspan>
</text>
<rect id="Rectangle-2" stroke="#CFCE95" stroke-width="2" fill="#F5F5D9" sketch:type="MSShapeGroup" x="17" y="79" width="80" height="28"></rect>
<rect id="Rectangle-2" stroke="#C74A6C" stroke-width="2" fill="#FCDFE1" sketch:type="MSShapeGroup" x="254" y="117" width="80" height="28"></rect>
<rect id="Rectangle-2" stroke="#99C0C3" stroke-width="2" fill="#EEFDFE" sketch:type="MSShapeGroup" x="109" y="269" width="134" height="28"></rect>
<text id="document" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#727155">
<tspan x="26" y="97">document</tspan>
</text>
<rect id="Rectangle-2" stroke="#C74A6C" stroke-width="2" fill="#FCDFE1" sketch:type="MSShapeGroup" x="254" y="79" width="80" height="28"></rect>
<text id="Object" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" sketch:alignment="middle" fill="#924565">
<tspan x="271.408203" y="97">Object</tspan>
</text>
<rect id="Rectangle-2" stroke="#99C0C3" stroke-width="2" fill="#EEFDFE" sketch:type="MSShapeGroup" x="134" y="79" width="80" height="28"></rect>
<text id="navigator" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" sketch:alignment="middle" fill="#366378">
<tspan x="139.862305" y="97">navigator</tspan>
</text>
<rect id="Rectangle-2" stroke="#99C0C3" stroke-width="2" fill="#EEFDFE" sketch:type="MSShapeGroup" x="134" y="117" width="80" height="28"></rect>
<text id="screen" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" sketch:alignment="middle" fill="#366378">
<tspan x="151.408203" y="135">screen</tspan>
</text>
<rect id="Rectangle-2" stroke="#99C0C3" stroke-width="2" fill="#EEFDFE" sketch:type="MSShapeGroup" x="134" y="155" width="80" height="28"></rect>
<text id="location" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" sketch:alignment="middle" fill="#366378">
<tspan x="143.710938" y="173">location</tspan>
</text>
<rect id="Rectangle-2" stroke="#99C0C3" stroke-width="2" fill="#EEFDFE" sketch:type="MSShapeGroup" x="134" y="193" width="80" height="28"></rect>
<text id="frames" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" sketch:alignment="middle" fill="#366378">
<tspan x="151.408203" y="211">frames</tspan>
</text>
<rect id="Rectangle-2" stroke="#99C0C3" stroke-width="2" fill="#EEFDFE" sketch:type="MSShapeGroup" x="134" y="231" width="80" height="28"></rect>
<text id="history" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" sketch:alignment="middle" fill="#366378">
<tspan x="147.55957" y="249">history</tspan>
</text>
<text id="Array" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" sketch:alignment="middle" fill="#924565">
<tspan x="275.256836" y="135">Array</tspan>
</text>
<rect id="Rectangle-3" stroke="#C74A6C" stroke-width="2" fill="#FCDFE1" sketch:type="MSShapeGroup" x="254" y="155" width="80" height="28"></rect>
<text id="Function" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" sketch:alignment="middle" fill="#924565">
<tspan x="263.710938" y="173">Function</tspan>
</text>
<text id="XMLHttpRequest" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" sketch:alignment="middle" fill="#366378">
<tspan x="122.119141" y="287">XMLHttpRequest</tspan>
</text>
<text id="BOM" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#99C0C3">
<tspan x="135" y="73">BOM</tspan>
</text>
<text id="JavaScript" sketch:type="MSTextLayer" font-family="Consolas" font-size="10" font-weight="normal" fill="#C74A6C">
<tspan x="280" y="71">JavaScript</tspan>
</text>
<text id="DOM" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#CFCE95">
<tspan x="17" y="73">DOM</tspan>
</text>
<path d="M174.5,41.5 L174.5,72.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M174.5,72.5 C175.55,68.72 176.45,65.48 177.5,61.7 C175.4,61.7 173.6,61.7 171.5,61.7 C172.55,65.48 173.45,68.72 174.5,72.5 C174.5,72.5 174.5,72.5 174.5,72.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M132.5,41.5 L86.5,73.5" id="Line-2" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-2-decoration-1" d="M86.5293087,73.4796113 C90.2319481,72.182938 93.405639,71.0715038 97.1082783,69.7748305 C95.9090429,68.0509295 94.8811268,66.5733002 93.6818914,64.8493993 C91.1784875,67.8699735 89.0327127,70.4590371 86.5293087,73.4796113 C86.5293087,73.4796113 86.5293087,73.4796113 86.5293087,73.4796113 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M263.5,41.5 L217.5,73.5" id="Line-3" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup" transform="translate(240.500000, 57.500000) scale(-1, 1) translate(-240.500000, -57.500000) "></path>
<path id="Line-3-decoration-1" d="M217.529309,73.4796113 C221.231948,72.182938 224.405639,71.0715038 228.108278,69.7748305 C226.909043,68.0509295 225.881127,66.5733002 224.681891,64.8493993 C222.178487,67.8699735 220.032713,70.4590371 217.529309,73.4796113 C217.529309,73.4796113 217.529309,73.4796113 217.529309,73.4796113 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<text id="…" sketch:type="MSTextLayer" font-family="Consolas" font-size="24" font-weight="normal" fill="#727155">
<tspan x="50" y="122">…</tspan>
</text>
<text id="…-2" sketch:type="MSTextLayer" font-family="Consolas" font-size="24" font-weight="normal" fill="#924565">
<tspan x="287" y="201">…</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 7.5 KiB

BIN
2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/carousel1.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 2.9 KiB

32
2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/carousel1.svg Normal file
View file

@ -0,0 +1,32 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="488px" height="246px" viewBox="0 0 488 246" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
<title>carousel1.svg</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="carousel1.svg" sketch:type="MSArtboardGroup">
<rect id="Rectangle-18" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" sketch:type="MSShapeGroup" x="40" y="97" width="66" height="66" rx="10"></rect>
<rect id="Rectangle-19" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" sketch:type="MSShapeGroup" x="108" y="97" width="66" height="66" rx="10"></rect>
<rect id="Rectangle-20" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" sketch:type="MSShapeGroup" x="176" y="97" width="66" height="66" rx="10"></rect>
<rect id="Rectangle-21" stroke="#8A704D" stroke-width="3" opacity="0.5" fill="#FFF9EB" sketch:type="MSShapeGroup" x="244" y="97" width="66" height="66" rx="10"></rect>
<rect id="Rectangle-22" stroke="#8A704D" stroke-width="3" opacity="0.5" fill="#FFF9EB" sketch:type="MSShapeGroup" x="312" y="97" width="66" height="66" rx="10"></rect>
<rect id="Rectangle-23" stroke="#8A704D" stroke-width="3" opacity="0.5" fill="#FFF9EB" sketch:type="MSShapeGroup" x="380" y="97" width="66" height="66" rx="10"></rect>
<text id="…-2" sketch:type="MSTextLayer" font-family="Consolas" font-size="24" font-weight="normal" fill="#8A704D">
<tspan x="406" y="131">…</tspan>
</text>
<rect id="Rectangle-24" stroke="#EE6B47" stroke-width="2" sketch:type="MSShapeGroup" x="39" y="96" width="410" height="68"></rect>
<path d="M244,59 L244,196 L36,196 L36,59 L244,59 Z M19,42 L261,42 L261,213 L19,213 L19,42 Z" id="Rectangle-1" fill-opacity="0.88" fill="#E8C48F" sketch:type="MSShapeGroup"></path>
<text id="div-(контейнер)" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="82.5" y="32">div (контейнер)</tspan>
</text>
<text id="130x130" sketch:type="MSTextLayer" font-family="Consolas" font-size="13" font-weight="normal" fill="#8A704D">
<tspan x="48" y="133">130x130</tspan>
</text>
<text id="ul-(width:-9999px)" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="71.5" y="82">ul (width: 9999px)</tspan>
</text>
<rect id="Rectangle-36" fill="#FFFFFF" sketch:type="MSShapeGroup" x="447" y="90" width="16" height="84"></rect>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/carousel2.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 3.3 KiB

34
2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/carousel2.svg Normal file
View file

@ -0,0 +1,34 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="639px" height="246px" viewBox="0 0 639 246" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
<title>carousel2.svg</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="carousel2.svg" sketch:type="MSArtboardGroup">
<rect id="Rectangle-18" stroke="#8A704D" stroke-width="3" opacity="0.5" fill="#FFF9EB" sketch:type="MSShapeGroup" x="40" y="97" width="66" height="66" rx="10"></rect>
<rect id="Rectangle-19" stroke="#8A704D" stroke-width="3" opacity="0.5" fill="#FFF9EB" sketch:type="MSShapeGroup" x="108" y="97" width="66" height="66" rx="10"></rect>
<rect id="Rectangle-20" stroke="#8A704D" stroke-width="3" opacity="0.5" fill="#FFF9EB" sketch:type="MSShapeGroup" x="176" y="97" width="66" height="66" rx="10"></rect>
<rect id="Rectangle-21" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" sketch:type="MSShapeGroup" x="244" y="97" width="66" height="66" rx="10"></rect>
<rect id="Rectangle-22" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" sketch:type="MSShapeGroup" x="312" y="97" width="66" height="66" rx="10"></rect>
<rect id="Rectangle-23" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" sketch:type="MSShapeGroup" x="380" y="97" width="66" height="66" rx="10"></rect>
<rect id="Rectangle-26" stroke="#8A704D" stroke-width="3" opacity="0.5" fill="#FFF9EB" sketch:type="MSShapeGroup" x="448" y="97" width="66" height="66" rx="10"></rect>
<rect id="Rectangle-25" stroke="#8A704D" stroke-width="3" opacity="0.5" fill="#FFF9EB" sketch:type="MSShapeGroup" x="516" y="97" width="66" height="66" rx="10"></rect>
<text id="…-3" sketch:type="MSTextLayer" font-family="Consolas" font-size="24" font-weight="normal" fill="#8A704D">
<tspan x="542" y="131">…</tspan>
</text>
<rect id="Rectangle-24" stroke="#EE6B47" stroke-width="2" sketch:type="MSShapeGroup" x="39" y="96" width="544" height="68"></rect>
<path d="M450,59 L450,196 L242,196 L242,59 L450,59 Z M225,42 L467,42 L467,213 L225,213 L225,42 Z" id="Rectangle-1" fill-opacity="0.88" fill="#E8C48F" sketch:type="MSShapeGroup"></path>
<text id="div-(контейнер)" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="288.5" y="32">div (контейнер)</tspan>
</text>
<text id="130x130" sketch:type="MSTextLayer" font-family="Consolas" font-size="13" font-weight="normal" fill="#8A704D">
<tspan x="252" y="133">130x130</tspan>
</text>
<text id="ul-(margin-left:--35" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="254.5" y="82">ul (margin-left: -350px)</tspan>
</text>
<rect id="Rectangle-36" fill="#FFFFFF" sketch:type="MSShapeGroup" x="582" y="83" width="16" height="84"></rect>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3.3 KiB

6
2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/solution.md
View file

@ -2,7 +2,7 @@
Нужно расположить его внутри `<div>` фиксированного размера, так чтобы в один момент была видна только нужная часть списка:
<img src="carousel1.png">
<img src="carousel1.svg">
Чтобы список был длинный и элементы не переходили вниз, ему ставится `width: 9999px`, а элементам `<li>`, соответственно, `float:left`, либо для элементов используется `display: inline-block`, как в этом решении.
@ -10,9 +10,9 @@
В частности, для `<img>` нужно поставить в стилях явно `display:block`, чтобы пространства под ними не оставалось.
Для "прокрутки" будем сдвигать `<ul>`. Это можно делать по-разному, например, назначением `margin-left`:
Для "прокрутки" будем сдвигать `<ul>`. Это можно делать по-разному, например, назначением CSS-свойства `transform: translateX()` или `margin-left`:
<img src="carousel2.png">
<img src="carousel2.svg">
У внешнего `<div>` фиксированная ширина, поэтому "лишние" изображения обрезаются.