<?xml version="1.0" encoding="utf-8"?> 
<rss version="2.0"
  xmlns:itunes="http://www.itunes.com/dtds/podcast-1.0.dtd"
  xmlns:atom="http://www.w3.org/2005/Atom">

<channel>

<title>Блог Константина Фарактинова: заметки с тегом вёрстка</title>
<link>http://faraktinov.ru/notes/tags/frontend/</link>
<description>Пишу про всякое. Немного дизайна, немного программирования, а так в основном мысли.</description>
<author>Константин Фарактинов</author>
<language>ru</language>
<generator>E2 (v3877; Aegea)</generator>

<itunes:owner>
<itunes:name>Константин Фарактинов</itunes:name>
<itunes:email></itunes:email>
</itunes:owner>
<itunes:subtitle>Пишу про всякое. Немного дизайна, немного программирования, а так в основном мысли.</itunes:subtitle>
<itunes:image href="" />
<itunes:explicit></itunes:explicit>

<item>
<title>Школа стажёров: задания второй ступени</title>
<guid isPermaLink="false">31</guid>
<link>http://faraktinov.ru/notes/all/school-2nd-stage-tasks/</link>
<pubDate>Mon, 09 Oct 2023 17:04:01 +0000</pubDate>
<author>Константин Фарактинов</author>
<comments>http://faraktinov.ru/notes/all/school-2nd-stage-tasks/</comments>
<description>
&lt;p&gt;&lt;i&gt;Продолжаю публиковать посты пяти-семилетней выдержки.&lt;/i&gt;&lt;/p&gt;
&lt;p&gt;&lt;i&gt;&lt;a href="http://faraktinov.ru/notes/all/school-notes-2/"&gt;В прошлой заметке о Школе стажёров&lt;/a&gt; (ныне Школа дизайнеров), я писал об эволюции студенческих работ и желании в ней поучаствовать, показав свои решения. Скорее всего, за 7 лет задания поменялись, и этот контент теперь имеет лишь историческую ценность. Ну да ладно.&lt;/i&gt;&lt;/p&gt;
&lt;p&gt;Публикую некоторые работы с оценками и комментариями. Оставил только то, что показалось полезным или интересным.&lt;/p&gt;
&lt;p&gt;&lt;a href="http://faraktinov.ru/notes/pictures/valenki.png"&gt;&lt;br /&gt;
&lt;img src="http://faraktinov.ru/notes/pictures/valenki-preview.jpg" style="width: 100%;"&gt;&lt;/a&gt;&lt;br /&gt;
&lt;a href="http://faraktinov.ru/notes/pictures/valenki.png"&gt;&lt;h2 style="margin-top: 0;"&gt;Проектирование сайта&lt;/h2&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Илья Бирман: «Слишком большие поля, недостаточно крепкости конструкции в этажах &lt;...&gt; Нижний отзыв отвалился»&lt;/p&gt;
&lt;div class="e2-text-table"&gt;
&lt;table cellpadding="0" cellspacing="0" border="0"&gt;
&lt;tr&gt;
&lt;td&gt;Знание теории&lt;/td&gt;
&lt;td&gt;4&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Полезное действие&lt;/td&gt;
&lt;td&gt;4&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Выразительность&lt;/td&gt;
&lt;td&gt;4&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/div&gt;
&lt;p&gt;&lt;a href="http://faraktinov.ru/beeline/"&gt;&lt;br /&gt;
&lt;img src="http://faraktinov.ru/notes/pictures/beeline-preview.jpg" style="width: 100%;"&gt;&lt;/a&gt;&lt;br /&gt;
&lt;a href="http://faraktinov.ru/beeline/"&gt;&lt;h2 style="margin-top: 0;"&gt;Вёрстка сложного документа&lt;/h2&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Нужно было красиво и логично оформить страницу с договором. Текст длинный и однородный, поэтому главный лайфхак здесь — верстать сразу в ХТМЛ. Фотошоп понадобится только чтобы нарисовать шапку и подвал.&lt;/p&gt;
&lt;div class="e2-text-table"&gt;
&lt;table cellpadding="0" cellspacing="0" border="0"&gt;
&lt;tr&gt;
&lt;td&gt;Вёрстка&lt;/td&gt;
&lt;td&gt;4,8&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Логика&lt;/td&gt;
&lt;td&gt;4,2&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/div&gt;
&lt;p&gt;&lt;a href="http://faraktinov.ru/notes/pictures/tesla.png"&gt;&lt;br /&gt;
&lt;img src="http://faraktinov.ru/notes/pictures/tesla-preview.jpg" style="width: 100%;"&gt;&lt;/a&gt;&lt;br /&gt;
&lt;a href="http://faraktinov.ru/notes/pictures/tesla.png"&gt;&lt;h2 style="margin-top: 0;"&gt;Информационный текст и верстка многоэтажной веб-страницы&lt;/h2&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Два задания связаны друг с другом. Сначала делаем страницу для Ильяхова, на первом месте текст и смысл. Потом допиливаем то, что получилось, для Нозика, но теперь оценивается вёрстка.&lt;/p&gt;
&lt;p&gt;Максим Ильяхов:&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="http://faraktinov.ru/notes/pictures/tesla-ilyahov.png" width="638" height="237" alt="" /&gt;
&lt;/div&gt;
&lt;p&gt;Михаил Нозик: «Увы, некоторым этажам недостаёт большей плотности. Сравните последний этаж с остальными. В последнем — железная структура и уверенность, в остальных — гуляющие якорные объекты и равновеликие иллюстрации.»&lt;/p&gt;
&lt;div class="e2-text-table"&gt;
&lt;table cellpadding="0" cellspacing="0" border="0"&gt;
&lt;tr&gt;
&lt;td&gt;&lt;b&gt;Ильяхов&lt;/b&gt;&lt;/td&gt;
&lt;td style="text-align: center"&gt;&lt;/td&gt;
&lt;td style="text-align: center"&gt;&lt;/td&gt;
&lt;td&gt;&lt;b&gt;Нозик&lt;/b&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Ум&lt;/td&gt;
&lt;td&gt;4&lt;/td&gt;
&lt;td style="text-align: center"&gt;&lt;/td&gt;
&lt;td&gt;Техника&lt;/td&gt;
&lt;td&gt;3&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Сердце&lt;/td&gt;
&lt;td&gt;4,5&lt;/td&gt;
&lt;td style="text-align: center"&gt;&lt;/td&gt;
&lt;td&gt;Выразительность&lt;/td&gt;
&lt;td&gt;3,5&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/div&gt;
&lt;p&gt;&lt;a href="http://faraktinov.ru/notes/pictures/knigoed.jpg"&gt;&lt;br /&gt;
&lt;img src="http://faraktinov.ru/notes/pictures/knigoed-preview.jpg" style="width: 100%;"&gt;&lt;/a&gt;&lt;br /&gt;
&lt;a href="http://faraktinov.ru/notes/pictures/knigoed.jpg"&gt;&lt;h2 style="margin-top: 0;"&gt;Продающая страница&lt;/h2&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Было два варианта на выбор: книга и барабанная установка в вымышленных онлайн-магазинах. Я выбрал первое.&lt;/p&gt;
&lt;p&gt;Ильяхов:&lt;/p&gt;
&lt;p&gt;&lt;img src="http://faraktinov.ru/notes/pictures/book-ilyahov.jpg" style="max-width: 700px; width: 100%;"&gt;&lt;/p&gt;
&lt;div class="e2-text-table"&gt;
&lt;table cellpadding="0" cellspacing="0" border="0"&gt;
&lt;tr&gt;
&lt;td&gt;Ум&lt;/td&gt;
&lt;td&gt;4,5&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Сердце&lt;/td&gt;
&lt;td&gt;4,5&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/div&gt;
&lt;h2&gt;Решение задач&lt;/h2&gt;
&lt;p&gt;Нужно было придумать, как улучшить чайник, используя три принципа некой трансдисциплины по «дизайну всего», которую Артём Горбунов разрабатывает много лет.&lt;/p&gt;
&lt;p&gt;Моё решение:&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="http://faraktinov.ru/notes/pictures/gorbunov-teapot.jpg" width="1000" height="2298" alt="" /&gt;
&lt;/div&gt;
&lt;p&gt;Тут пригодились навыки в 3д-графике. Хорошо иметь возможность красиво проиллюстрировать любую свою идею и не зависеть от картинок из интернета. Многим другим студентам пришлось собирать макеты из того, что удалось найти, поэтому на общем фоне моя работа выглядела неплохо. Хотя на оценку это не повлияло.&lt;/p&gt;
&lt;p&gt;Забавно, что за «Минимизацию конструкции» треть группы получила двойки и двойки с плюсом, я в том числе. Комментарий Горбунова:&lt;/p&gt;
&lt;p&gt;&lt;img src="http://faraktinov.ru/notes/pictures/teapot-gorbunov.jpg" style="max-width: 700px; width: 100%;"&gt;&lt;/p&gt;
&lt;p&gt;Пожалуй, соглашусь с Артёмом. Невнимательным людям (например, тем, кто пишет чужие фамилии с ошибками :) я бы такой чайник не рекомендовал.&lt;/p&gt;
&lt;div class="e2-text-table"&gt;
&lt;table cellpadding="0" cellspacing="0" border="0"&gt;
&lt;tr&gt;
&lt;td&gt;Максимизация&lt;/td&gt;
&lt;td&gt;4&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Минимизация&lt;/td&gt;
&lt;td&gt;2&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Противоречие&lt;/td&gt;
&lt;td&gt;4,5&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/div&gt;
&lt;p&gt;&lt;hr&gt;&lt;/p&gt;
&lt;p&gt;&lt;small&gt;Все работы сделаны &lt;a href="http://artgorbunov.ru/school/31aug2015/"&gt;в Школе стажёров бюро&lt;/a&gt;&lt;/small&gt;&lt;/p&gt;
</description>
</item>

<item>
<title>Редимаг — всё так же плохо</title>
<guid isPermaLink="false">42</guid>
<link>http://faraktinov.ru/notes/all/readymag2/</link>
<pubDate>Sat, 22 Oct 2022 11:34:09 +0000</pubDate>
<author>Константин Фарактинов</author>
<comments>http://faraktinov.ru/notes/all/readymag2/</comments>
<description>
&lt;p&gt;&lt;i&gt;Я написал эту заметку в 2018 году, а потом зачем-то удалил. Недавно перечитал и понял, что за четыре года мало что изменилось: только первый пример потерял актуальность, и набрал популярность Ноушен, который ещё хуже. Так что публикую заново.&lt;/i&gt;&lt;/p&gt;
&lt;p&gt;Не понимаю, откуда в дизайнерско-редакторском сообществе такая любовь к Редимагу. Может в нем и удобно верстать (я не пробовал), но на выходе получается громоздкий и неповоротливий монстр.&lt;/p&gt;
&lt;p&gt;Все редимаговские сайты открываютя одинаково: сначала браузер думает пару секунд, потом появляются цветные плашки, затем в случайном порядке подгружаются изображения и куски текста. Бывает, последние элементы дорендериваются уже когда успел досмотреть до середины. Вот как обычная страница с буквами и картинками может грузиться несколько секунд и тормозить на топовом железе?! Ладно бы графика, но даже простой текст отображается не сразу!&lt;/p&gt;
&lt;p&gt;Для примера — &lt;s&gt;страница с сайта про школу Горбунова&lt;/s&gt; &lt;a href="https://readymag.com/u307072972/2872850/"&gt;рандомная страница&lt;/a&gt;, собранная в конструкторе. Засеките, сколько будут подгружаться несколько абзацев текста с картинками.&lt;/p&gt;
&lt;p&gt;И сравните &lt;a href="https://500tech.com/"&gt;с последним сайтом Бирмана&lt;/a&gt; [на тот момент], на котором контента столько же, но при этом всё загружается и реагирует моментально.&lt;/p&gt;
&lt;p&gt;Типичный редимаговский сайт на русском — это пара страниц с рассказом о чем-то и иллюстрациями. Научиться делать такое можно за пару вечеров, посмотрев вебинары Ильяхова, и навсегда перестать зависеть от конструкторов с их мутными лицензиями и тарифами.&lt;/p&gt;
</description>
</item>


</channel>
</rss>