Форум

laimas · #21 (**permalink**) 23.03.2019, 05:50

Сообщение от Блондинка

можно просто доработать этот скрипт?

Можно и доработать, но что?

Посмотрите на свой код в посте #9. Не странно ли то, что вы описываете стили для блоков дважды - первый раз глобально в CSS и второй раз встроенными стилями. В данном посте непосредственно в тексте описания нет такого, ну в предыдущих темах это есть. Здесь же вместо того, чтобы определить общие стили для блоков также через CSS (как и в описании), вы их почему-то встраиваете в каждый элемент. Зачем?

Элемент PRE отображает текст как есть, то есть все переводы строк будут действовать так же как и BR в html, дублировать это поведение еще и добавлением BR совсем ни к чему. Заменять кавычки в тексте описания кода на html сущности не обязательно, обязательно заменять < > и &. Первые используется в тегах, а последнее в html сущности.

Ну это прелюдия, а вот далее вообще не понятно. Какие цели вы ставите перед своим приложением?

Пусть это будет демонстрация CSS правил. Если вы хотите на всех страницах с правилами иметь однотипные операции, что вполне входит в понятие "автоматизация", то почему вы зациклились на radius? Я не в том смысле, что уже в нескольких темах вы пишите о border-radius, я о том, почему вы хотите иметь автоматизацию, но при этом определяете элементы демонстрации не глобальными для всех страниц, а привязываете их для каждой страницы индивидуально? А как же тогда скрипт, если, к примеру, он может быть, мягко говоря, "универсальным", то определение демонстраторов для каждой страницы не позволит быть ему универсальным.

Пусть, хотя бы как предположение, вы хотите на каждой страницу показывать CSS правила с различными значениями. Страницы вы будет писать сами. Но уже для них явно есть то, что будет общим для них всех. А значит это общее не выгодно писать на каждой странице, а выгодно описать раз и подключать на каждой.

Вот так можно представить все страницы.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css" />
<style>
#visualizer { 
    background: #f0f0f0; 
    border: 1px solid #999; 
    width: 420px; 
    padding: 15px 25px; 
    margin-bottom: 10px; 
}
</style>
</head>
<body>
<h1>Chapter border-radius</h1>
<p>Descriptor</p>
<h2>Code</h2>
<pre>
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset=&quot;utf-8&quot;&gt;
&lt;title&gt;border-radius&lt;/title&gt;
&lt;style&gt;

div { 
    background: #f0f0f0; 
    border: 1px solid #999; 
    width: 420px; 
    padding: 15px 25px; 
    margin-bottom: 10px; 
}

.a { 
    border-radius: 50px 0 0 50px; 
}

.b { 
    border-radius: 40px 10px; 
}

.c { 
    border-radius: 13em/3em; 
}

.d { 
    border-radius: 13em 0.5em/1em 0.5em; 
}

.e { 
    border-radius: 8px; 
}

&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="a"&gt;&lt;/div&gt;
&lt;div class="b"&gt;&lt;/div&gt;
&lt;div class="c"&gt;&lt;/div&gt;
&lt;div class="d"&gt;&lt;/div&gt;
&lt;div class="e"&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>

<h2>Visualization</h2>

<div id="visualizer"></div>

<p id="informer"></p>

<script>
//определили правила и значения демонстраций для текущей главы
var rules = [
    { name: 'border-radius', values: ['50px 0 0 50px', '40px 10px', '13em/3em', '13em 0.5em/1em 0.5em', '8px'] }/*,
    { name: 'box-shadow', values: ['0 0 10px rgba(0,0,0,0.5)', '2px 3px 10px rgba(0,0,0,0.5)', '1px 0 15px rgba(0,0,0,0.5)', '5px 5px 10px rgba(0,0,0,0.5)', '-5px 10px 20px rgba(0,0,0,0.5)'] }*/
];
</script>
<script type="text/javascript" src="js.js"></script>
</body>
</html>

Она содержит заголовок, блок описания, блок кода, и блок демонстрации (в HTML5 достаточно тегов для определения таких блоков, здесь же простые). Общее в стилях для всех страниц определено в подключаемом файле стилей style.css.

body {
    font-size: 14px;
}

pre {
    font-family: sans-serif;
    color: #012E71;
}

#visualizer {
    cursor: pointer;
}

#informer {
    color: #D36A01;
}

Общие стили для блоков описаны в шапке страницы, так же как и в тексте описания кода. Но только конкретно для блока демонстратора. Если эти общие правила будут верны для всех страниц, то их можно перенести в подключаемый css-файл. Но такого скорее не может быть, а значит на каждой странице они свои.

В самом тексте описания общие правила объявляются не через имя класса, а через тег, а различные правила через классы. Не обязательно для этого id, его назначение в общем-то иное, и к тому же, имя класса может быть и составным.

Боксы демонстратор и информатор на всех страницах имеют одно и тоже id, в данном примере это visualizer и informer. Указывать их в тексте описания кода совсем не требуется, это рабочие имена, скрытие от пользователя. Если их менять, то менять нужно и в JS коде, иначе ничего работать не будет.

laimas · #22 (**permalink**) 23.03.2019, 06:05

На каждой странице вам нужно определить значения для css, которые надо продемонстрировать. Этого достаточно, все остальное возьмет на себя подключаемый js-файл, который единый для всех страниц. Но тут встает вопрос - достаточно ли определить наборы изменяемых значений как массив? Если стили, которые будут описаны на ваших страницах для этого требуют только одно css правило, то да. А если для этого потребуется более одного правила?

Лучше определять правила как массив объектов, в котором указаны правила и их изменяемые значения, в примере это rules. Здесь нужно только соблюдать соглашение - количество изменяемых значений у каждого правила должно быть одинаково (хотя и этот вопрос решаем, но пока это не рассматривается). В примере после запуска, просмотра, удалите комментарий объекта описывающего правило box-shadow, будут работать два правила.

Подключаемый js-файл js.js работает с определенными в объекте rules css правилами и их значениями, которые применяет к объекту демонстратору #visualizer и отображает их в объекте #informer

var i = 0, //кольцевой счетчик демонстраций
    k = rules[0].values.length, //определили количество демонстраций
    visual = document.getElementById('visualizer'), //объект демонстратор
    info = document.getElementById('informer'); //объект информатор
    
//показываем первую демонстрацию
getRules();

//устанавливаем обработчик смены демонстраций
visual.addEventListener('click', function() {
   //увеличили счетчик демонстраций, если он выйдет за пределы, то установим его в начало 
   i = ++i % k;
   //показать следующую демонстрацию
   getRules();
});

//функция применения и отображения текущих стилей  
function getRules() {
    //получим все правила и значения текущей демонстрации 
    var a = rules.map(function(e) {
        //формируем и возвращаем в массив правило и его значения
        return e.name + ': ' + e.values[i]; 
    });
    //применим правила к объекту демонстратору
    visual.style.cssText = a.join(';');
    //покажем правила в объекте информаторе
    info.innerHTML = a.join(';<br>');     
}

laimas · #23 (**permalink**) 23.03.2019, 06:29

А полная автоматизация, это уже динамические страницы. Нет смысла все расписывать подробно. Автоматизировать процесс создания страниц, это определять:

1) Заголовок страницы для правила. Эти определения могут быть записаны в базу (желательно) либо в файл как json. На базе этих записей при формировании страниц будет автоматически строится меню.

2) Описание страницы можно выполнять в визуальном редакторе, а правила стилей описать в подключаемом css.

3) Описывать html код, как есть, который также будет сохраняться на сервере как данные для соответствующей страницы. Выводе его как текст-описание возьмет на себя сервер.

4) Определять для правила его набор значений для демонстраций. Сервер сохранит их как данные, которые автоматически при выводе страницы подставит для объекта rules.

Шапка и подвал страниц, это одинаковые разовые определенные шаблоны, в которых динамически будут подставляться значения из определенных для каждой страницы правил.

Из этих шаблонов, а также данных и будут динамически формироваться страницы как результат запроса меню, в котором определен параметр, например, page, значением которого может быть имя css правила.

Malleys · #24 (**permalink**) 23.03.2019, 08:46

Сообщение от laimas

возьмет на себя сервер

Зачем привлекать лишнее сюда, я не вижу в данном случае никаких преимуществ.

Сообщение от laimas

это общее не выгодно писать на каждой странице, а выгодно описать раз и подключать на каждой.

Обычно программа одна, она открывается, и дальше работа идёт внутри неё, представьте, например, Photoshop, который перезагружается при каждом действии. Это было бы отвратительно мерзко!

Блондинка, нужно начать с того, что определимся, как может выглядеть структура данных учебника по CSS.

Маленькое отступление. Когда в 1996 году вышла спецификация CSS 1, то она была размером, так сказать с большую статью, и вы могли выучить CSS за день.

Но когда в 1998 году вышла CSS 2, она была настолько большая, что в печатном виде занимала примерно 500 страниц (пачка листов, или томик), и уже тогда стало ясно, что дальнейшее развитие CSS становится слишком громоздким для одной спецификации. Так что движение вперёд означало разбиение на множество отдельных модулей, каждый с собственным номером версии. Модули, которые расширяли возможности CSS 2.1, нумеровались как версия 3.

Вот примеры таких модулей:

CSS Backgrounds & Borders Level 3
CSS Text Decoration Level 3
CSS Basic User Interface Level 3, и т. д.

Однако модули, выражающие, совершенно новые идеи, нумеруются с первой версии:

Я считаю, что учебник должен быть разбит на разделы, соответствующие модулям CSS. Например, в разделе посвященному модулю Flexible Box Layout, собрано всё про «флэксбокс».

В каждом модуле могут описываться — свойства, дескрипторы, селекторы, @-правила, значения. Это список ссылок. При нажатии на одну из них открывается пример и т.д.

Вот как выглядит заготовка для такого объекта:

var data = {
	"css-background-3": {
		"title": "Backgrounds and Borders Level 3",
		"properties": {
			"background-repeat": ["repeat", "space", "round", "no-repeat"],
			"border-radius": [
				"10px",
				"50%",
				"10px / 20px",
				"2px 4px 8px 16px"
			],
			"box-shadow": [
				"1px 1px", "0 0 black", "1px 2px 3px black",
				"1px 2px 3px 4px black", "inset 1px 1px",
				"1px 2px 3px 4px black inset"
			]
		}
	},
	
	"css-images-3": {
		"title": "Image Values Level 3",
		"values": {
			"properties": [
				"background-image",
				"list-style-image",
				"border-image",
				"cursor",
				"content"
			],
			"linear-gradient": [
				"linear-gradient(to right, white, black)",
				"linear-gradient(white 5px, black)",
				"linear-gradient(white, #f06, black)"
			],
			"radial-gradient": [
				"radial-gradient(white, black)",
				"radial-gradient(circle, white, black)",
				"radial-gradient(ellipse, white, black)"
			]
		},
		"properties": {
			"object-fit": ["fill", "contain", "cover", "none", "scale-down"]
		}
	}	
};

Вам, нужно, это проделать для всех модулей со всеми свойствами, дескрипторами, селекторами, @-правилами, значениями.

Когда, у вас будет такой объект, то вы сможете легко работать с этими данными. Строить примеры, создавать меню, совершать поиск и пр.

Блондинка · #25 (**permalink**) 23.03.2019, 09:04

попытаюсь еще раз объяснить

неизвестно сколько на каждой странице контейнеров с кодом и див'ов-демонстраторов, допустим их больше одного, тогда для меня достаточно присвоить и контейнеру и див'у индетификаторы(ид), и дважды поставить (контейнер с кодом, див-демонстратор скрипт)

на одной странице или на разных но стиль дива-демонстратора может быть разным, неудобно демонстрировать (и наблюдать) разные свойства на див'е с общей шириной в 90%, поэтому я и пытаюсь уйти от внутренних стилей и прийти к встроенным,

нельзя предугадать какое свойство я буду описывать завтра, следовательно неизвестно какой именно элемент будет демонстратом, значит надо попытаться присвоить начальные стили обоим элементам, и див'у и спану, для этого я вчера и пыталась найти и присвоить значения четырём переменным.
а потом уже надо определять значения какого свойства будут меняться при клике и сколько раз, и у какого именно элемента – див'а или спан'а

Блондинка · #26 (**permalink**) 23.03.2019, 09:22

laimas,
а сейчас можно вернуться к прелюдии, если этот же скрипт сможет еще и преобразовать нормальный код в текст, тоесть < & > в сущчности, что позволит мне в контейнер пре засовывать нормальный код, то большего мне и не нужно.

Malleys · #27 (**permalink**) 23.03.2019, 09:23

Сообщение от Блондинка

неизвестно сколько... контейнеров с кодом и див'ов-демонстраторов

у вас могут быть отдельно подготовлены примеры, и указано, к каким свойствам, дескрипторам, селекторам, @-правилам, значениям соответствуют какие примеры. Некоторые примеры могут быть переиспользованы!

Сообщение от Блондинка

а потом уже надо определять значения какого свойства будут меняться при клике и сколько раз

Так это же берётся из data

Блондинка · #28 (**permalink**) 23.03.2019, 09:59

Сообщение от Malleys

Так это же берётся из data

из data? тогда маленькая просьба, сделай так, как это сделано в 22 посте, тоесть с двумя слешами и зеленым текстом после них, а проще говоря с подробными комментариями-пояснениями

laimas · #29 (**permalink**) 23.03.2019, 13:53

Сообщение от Malleys

Зачем привлекать лишнее сюда, я не вижу в данном случае никаких преимуществ.

Да неужто?

laimas · #30 (**permalink**) 23.03.2019, 13:55

Сообщение от Блондинка

позволит мне в контейнер пре засовывать нормальный код, то большего мне и не нужно.

Я вообще тогда не понимаю чего вам нужно.

Форум

Справочник

Discord чат

Курсы javascript