Поделюсь ещё несколькими фантазиями Midjorney на тему того, как ИИ будет рулить человечеством.
😁4🔥3👍1
Прошлыми постами мы немного отвлеклись от создания простейшего сайта. Теперь возвращаемся к этой теме.
Если у тебя получилось сделать свой первый сайт, то ты можешь заметить, что выглядит он обычно, это белый фон и на нём написан текст чёрными буквами. И это совершенно не похоже на те сайты, которые мы посещаем каждый день и видим на просторах сети Интернет. Итак, каким же образом сайт становится красивым, аккуратным, адаптивным и выглядит впечатляюще на всех устройствах?
Для этого существует несколько приемов. Во-первых, нужно правильно выстроить структуру сайта. Если ещё раз посмотреть на предыдущий пост, в котором я объяснял, что означает каждый блок, то можно заметить, что у него есть определённые части, заголовок, параграф, само тело контента. Так вот, таких структурных элементов в HTML существует достаточно много и комбинируя их различным способом можно создать нужный тебе макет или каркас, который уже будет наполняться контентом.
А этот каркас и контент в свою очередь нужно стилизовать, применив к нему определённые свойства, влияющие на отображение в браузере. Для это были придуманы, так называемые таблицы стилей или CSS (СиЭсЭс), который как раз используется для того, чтобы дать браузеру понять, каким образом нужно отображать элемент. В том числе можно задать такие простейшие свойства, как цвет шрифта, его размер, выравнивание и другие вещи, которые мы привыкли видеть, например в текстовых редакторах.
Также с помощью таблиц стилей можно задавать весьма сложные визуальные изменения для всех объектов, которые могут подразумевать различия в зависимости от размера экрана, то есть условные изменения; также там могут быть задействованы анимации, переходы, сложные градиенты, способы реагирования на действия пользователя. Например, когда ты наводишь мышкой на ссылку, она начинает выглядеть иначе, это тоже можно настраивать с помощью таблицы стилей.
Далее расскажу о том, как обычно эти стили настраиваются и причём тут вообще Bootstrap.
Если у тебя получилось сделать свой первый сайт, то ты можешь заметить, что выглядит он обычно, это белый фон и на нём написан текст чёрными буквами. И это совершенно не похоже на те сайты, которые мы посещаем каждый день и видим на просторах сети Интернет. Итак, каким же образом сайт становится красивым, аккуратным, адаптивным и выглядит впечатляюще на всех устройствах?
Для этого существует несколько приемов. Во-первых, нужно правильно выстроить структуру сайта. Если ещё раз посмотреть на предыдущий пост, в котором я объяснял, что означает каждый блок, то можно заметить, что у него есть определённые части, заголовок, параграф, само тело контента. Так вот, таких структурных элементов в HTML существует достаточно много и комбинируя их различным способом можно создать нужный тебе макет или каркас, который уже будет наполняться контентом.
А этот каркас и контент в свою очередь нужно стилизовать, применив к нему определённые свойства, влияющие на отображение в браузере. Для это были придуманы, так называемые таблицы стилей или CSS (СиЭсЭс), который как раз используется для того, чтобы дать браузеру понять, каким образом нужно отображать элемент. В том числе можно задать такие простейшие свойства, как цвет шрифта, его размер, выравнивание и другие вещи, которые мы привыкли видеть, например в текстовых редакторах.
Также с помощью таблиц стилей можно задавать весьма сложные визуальные изменения для всех объектов, которые могут подразумевать различия в зависимости от размера экрана, то есть условные изменения; также там могут быть задействованы анимации, переходы, сложные градиенты, способы реагирования на действия пользователя. Например, когда ты наводишь мышкой на ссылку, она начинает выглядеть иначе, это тоже можно настраивать с помощью таблицы стилей.
Далее расскажу о том, как обычно эти стили настраиваются и причём тут вообще Bootstrap.
👍5
Для того, чтобы аккуратно и настраивать стили было придумано несколько приемов, которые упрощают это. Стили можно указывать непосредственно в дескрипторах в качестве свойств. Выглядит это так:
<body style="background-color:back;">. То есть прямо в тег добавляется свойство style (стиль внезапно) и в нём перечисляются стили, которые нужно применить к контенту внутри этого тега.Более грамотным решением считается указание стилей в отдельном блоке или даже в отдельном файле. Для уникальных тегов, типа
<body>, стили можно настроить, просто указав само название тега, потому что он встречается в любом HTML только один раз, так заложено в структуре.А вот если нужно настроить стили для текстовых параграфов, которых может быть не один десяток на странице, одним указанием тега не обойтись. Здесь приходят на помощь идентификаторы и классы. Мы можем присвоить любому тегу класс, например,
<p class=”red-text”> и в отдельном блоке настроить стили для этого класса, задав шрифту, например, красный цвет. Таким образом все параграфы на странице с таким классом будут покрашены в красный. Это очень удобно, потому что, если мы захотим поменять цвет у этих абзацев, это нужно будет сделать только в одном месте и один раз.Ну и, наконец, можно выносить стили вообще в отдельный файл, который подгружается независимо. Это, кстати, намного удобнее в плане поддержки кода. Когда у тебя все стили собраны в одном месте и тебе не нужно менять сам основной документ разметки, можно просто отредактировать сам табличку стилей и добиться нужного результата.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2
Глядя на количество реакций к прошлым постам, я понимаю, насколько тебе скучно неинтересно читать про всю эту техническую лабуду. И знаешь что? Мне на самом деле тоже: это одна из причин, по которой я в своё время ушёл из программирования и начал вплотную заниматься системным анализом.
Кодинг мне показался через некоторое время достаточно скучным, топорным и простым. Там особо думать не надо, потому что у тебя есть определённая задача, и всё, что нужно сделать – написать алгоритм по заранее определённым правилам. Да, действительно алгоритм может выглядеть по-разному, здесь добавляется некая нотка творчества, но суть сводится, как правило, к одному и тому же.
А в системном анализе при схожих задачах нужно заниматься графиками, диаграммами, рассматривать различные варианты, проводить исследования, что намного веселее интереснее и увлекательнее.
Но ровно по совокупности этих двух причин, скуки от классического программирования и интереса к созданию систем с помощью различных диаграмм и графиков, я пришёл в no-code разработку. Он как раз и позволяет с помощью различных интерактивных элементов программировать и это ровно то, что делают, no-code инструменты, оставляя за кулисами вот эти скучные написания кодов, свойств, создания структур, которые на каждом сайте будут выглядеть действительно одинаково в базовом смысле. Я не говорю про наполнение контентом, я говорю про каркас, то есть каждом документе будет вот это
Да, сейчас программисты меня закидают яйцами за это и будут спорить с пеной у рта о том, что программирование – это намного глубже, там всё очень сложно, там много творчества и так далее. И знаешь что, я действительно всё это знаю, проходил на своей шкуре, писал на PHP, JavaScript, создавал сложные программные системы абсолютно с нуля.
Но теперь я смотрю на это в другой ипостаси, с точки зрения no-code разработки и, по крайней мере, для меня это намного увлекательнее и разнообразнее.
Кодинг мне показался через некоторое время достаточно скучным, топорным и простым. Там особо думать не надо, потому что у тебя есть определённая задача, и всё, что нужно сделать – написать алгоритм по заранее определённым правилам. Да, действительно алгоритм может выглядеть по-разному, здесь добавляется некая нотка творчества, но суть сводится, как правило, к одному и тому же.
А в системном анализе при схожих задачах нужно заниматься графиками, диаграммами, рассматривать различные варианты, проводить исследования, что намного веселее интереснее и увлекательнее.
Но ровно по совокупности этих двух причин, скуки от классического программирования и интереса к созданию систем с помощью различных диаграмм и графиков, я пришёл в no-code разработку. Он как раз и позволяет с помощью различных интерактивных элементов программировать и это ровно то, что делают, no-code инструменты, оставляя за кулисами вот эти скучные написания кодов, свойств, создания структур, которые на каждом сайте будут выглядеть действительно одинаково в базовом смысле. Я не говорю про наполнение контентом, я говорю про каркас, то есть каждом документе будет вот это
<html>, <head>, <body> и так далее. То есть каждый раз делаешь, по сути, одно и то же и у тебя отличается только контент.Да, сейчас программисты меня закидают яйцами за это и будут спорить с пеной у рта о том, что программирование – это намного глубже, там всё очень сложно, там много творчества и так далее. И знаешь что, я действительно всё это знаю, проходил на своей шкуре, писал на PHP, JavaScript, создавал сложные программные системы абсолютно с нуля.
Но теперь я смотрю на это в другой ипостаси, с точки зрения no-code разработки и, по крайней мере, для меня это намного увлекательнее и разнообразнее.
👍13❤🔥2
Теперь давай вернёмся к созданию сайтов
Я думаю, что на основе предыдущих постов тебе уже стало понятно, что для разработки сайта нужно создать определённую структуру, которая будет определять его внешний вид, функциональность и поведение.
Можно это сделать вручную, написав код, а можно воспользоваться фреймворком, который предоставляет готовые шаблоны уже написанных частей кода, которые в свою очередь можно комбинировать друг с другом и составлять нужную тебе структуру, что сильно упрощает и ускоряет создание сайтов. Именно для этого и нужен, например Bootstrap, как один из таких фреймворков.
Что он из себя представляет, по сути? Это набор таких готовый шаблонов кода, которые можно использовать для того, чтобы сделать полностью сайт или отдельные его части. Тут есть всё необходимое: и каркасная структура, включающая в себя всю HTML-разметку от начала и до конца страницы сайта, и отдельные элементы, тексты, заголовки, изображения, и блоки, которые позволяют оборачивать все эти элементы и выстраивать красивую и удобную композицию с точки зрения пользования.
Все эти элементы объединены в одну библиотеку, которая тоже сделана для того, чтобы упростить разработку. Мы её можем установить на сайт или загрузить один раз, а дальше использовать её везде на каждой странице нашего сайта.
Примерно так и работает фреймворк Bootstrap (или любой другой фреймворк для построения frontend-части). Это, пожалуй, первый уровень упрощения: такие готовы библиотеки, которые можно использовать при разработке сайтов. А дальше я расскажу, как можно выйти на следующий уровень этого упрощения и сделать удобнее даже работу с самим фреймворком Bootstrap.
Я думаю, что на основе предыдущих постов тебе уже стало понятно, что для разработки сайта нужно создать определённую структуру, которая будет определять его внешний вид, функциональность и поведение.
Можно это сделать вручную, написав код, а можно воспользоваться фреймворком, который предоставляет готовые шаблоны уже написанных частей кода, которые в свою очередь можно комбинировать друг с другом и составлять нужную тебе структуру, что сильно упрощает и ускоряет создание сайтов. Именно для этого и нужен, например Bootstrap, как один из таких фреймворков.
Что он из себя представляет, по сути? Это набор таких готовый шаблонов кода, которые можно использовать для того, чтобы сделать полностью сайт или отдельные его части. Тут есть всё необходимое: и каркасная структура, включающая в себя всю HTML-разметку от начала и до конца страницы сайта, и отдельные элементы, тексты, заголовки, изображения, и блоки, которые позволяют оборачивать все эти элементы и выстраивать красивую и удобную композицию с точки зрения пользования.
Все эти элементы объединены в одну библиотеку, которая тоже сделана для того, чтобы упростить разработку. Мы её можем установить на сайт или загрузить один раз, а дальше использовать её везде на каждой странице нашего сайта.
Примерно так и работает фреймворк Bootstrap (или любой другой фреймворк для построения frontend-части). Это, пожалуй, первый уровень упрощения: такие готовы библиотеки, которые можно использовать при разработке сайтов. А дальше я расскажу, как можно выйти на следующий уровень этого упрощения и сделать удобнее даже работу с самим фреймворком Bootstrap.
👍7❤🔥2
Следующий уровень упрощения работы с HTML-кодом при создании сайтов
Итак, мы с тобой уже не пишем сайт вручную, мы собираем его из готовых блоков и элементов кода, которые нам предоставляет фреймворк, вроде Bootstrap. Но можно пойти ещё дальше и использовать систему, которая может автоматизировать сборку сайта из блоков и это как раз тот самый инструмент, который я упоминал несколькими постами ранее.
Bootstrap Studio позволяет очень похожим на конструкторы сайтов образом из готовых блоков собирать странички. Каждый из этих блоков будет представлять собой ничто иное, как заранее написанный кусочек HTML-разметки, в котором уже проставлены все необходимые стили, чтобы он выглядел как нужно и был адаптивным на всех устройствах.
А если что-то во внешнем виде не устраивает, то это всегда можно поправить с помощью настроек по аналогии с любой программной системой, которая включает в себя комплекс различных параметров. Здесь можно отрегулировать всё, начиная от самого простого, что касается, например, шрифта, его размер, цвет или более сложные вещи такие, как отступы между блоками, их условную видимость, отображение в зависимости от разрешения экрана и так далее.
Отличие от конструкторов сайтов, которые публикуют конечный продукт, здесь заключается в том, что ты получаешь в итоге всё-таки набор файлов, который нужно самостоятельно установить на хостинг и привязать к доменному имени. То есть здесь нужно ещё немножко приложить ручной работы, которая на самом деле очень простая, но тем не менее требует технического понимания, что ты делаешь. Чтобы это сделать абсолютного с нуля, если человек не подкован, то он скорее всего, не сориентируется с первого раза.
Итак, мы с тобой уже не пишем сайт вручную, мы собираем его из готовых блоков и элементов кода, которые нам предоставляет фреймворк, вроде Bootstrap. Но можно пойти ещё дальше и использовать систему, которая может автоматизировать сборку сайта из блоков и это как раз тот самый инструмент, который я упоминал несколькими постами ранее.
Bootstrap Studio позволяет очень похожим на конструкторы сайтов образом из готовых блоков собирать странички. Каждый из этих блоков будет представлять собой ничто иное, как заранее написанный кусочек HTML-разметки, в котором уже проставлены все необходимые стили, чтобы он выглядел как нужно и был адаптивным на всех устройствах.
А если что-то во внешнем виде не устраивает, то это всегда можно поправить с помощью настроек по аналогии с любой программной системой, которая включает в себя комплекс различных параметров. Здесь можно отрегулировать всё, начиная от самого простого, что касается, например, шрифта, его размер, цвет или более сложные вещи такие, как отступы между блоками, их условную видимость, отображение в зависимости от разрешения экрана и так далее.
Отличие от конструкторов сайтов, которые публикуют конечный продукт, здесь заключается в том, что ты получаешь в итоге всё-таки набор файлов, который нужно самостоятельно установить на хостинг и привязать к доменному имени. То есть здесь нужно ещё немножко приложить ручной работы, которая на самом деле очень простая, но тем не менее требует технического понимания, что ты делаешь. Чтобы это сделать абсолютного с нуля, если человек не подкован, то он скорее всего, не сориентируется с первого раза.
👍10❤🔥4
🧹Чистота кода в Bootstrap Studio
Да, конечно, работа с Bootstrap Studio намного сложнее, чем с привычным онлайн-конструктором сайтов и требует некоторых знаний сайтостроения.
Но его неоспоримое преимущество заключается в том, что на выходе у тебя получается абсолютно чистый, без всяких ненужных элементов и конструкций код, в котором нет ничего лишнего, ни единой строчки, ни единого блока, который у тебя не используется, там не будет. Не будет подключена какая-то непонятная библиотека, не будут загружены ненужные файлы, скрипты, там не будет блоков, которые просто заполняют пространство по каким-то непонятным причинам (или потому, что, например, конструктор не умеет правильно выстраивать адаптивную вёрстку) и так далее.
То есть код настолько чистый, насколько ты сможешь всё сделать с помощью стилей из библиотеки Bootstrap.
А если не сможешь, то и здесь тебе программка поможет и укажет на наличие ошибок в коде, порекомендует, как правильно их исправить. В общем инструмент более чем достоин использования, особенно если речь заходит про создание простого сайта, который должен работать быстро, в котором нет ничего лишнего, который будет загружаться моментально и работать безотказно.
В качестве примера покажу набор файлов, которые в итоге получились при производстве одностраничного сайта, про который я рассказывал, начиная эту серию постов. Это один HTML-файл весом меньше 5 килобайт и CSS-файл с таблицами стилей ещё на 271 байт. Весь остальной объём занимают изображения в формате webp и весят суммарно около 94 килобайт. То есть нужно браузеру нужно загрузить всего порядка 100 (❗️ ) килобайт суммарно, чтобы отобразить сайт. Настолько он получается легковесным.
Да, конечно, работа с Bootstrap Studio намного сложнее, чем с привычным онлайн-конструктором сайтов и требует некоторых знаний сайтостроения.
Но его неоспоримое преимущество заключается в том, что на выходе у тебя получается абсолютно чистый, без всяких ненужных элементов и конструкций код, в котором нет ничего лишнего, ни единой строчки, ни единого блока, который у тебя не используется, там не будет. Не будет подключена какая-то непонятная библиотека, не будут загружены ненужные файлы, скрипты, там не будет блоков, которые просто заполняют пространство по каким-то непонятным причинам (или потому, что, например, конструктор не умеет правильно выстраивать адаптивную вёрстку) и так далее.
То есть код настолько чистый, насколько ты сможешь всё сделать с помощью стилей из библиотеки Bootstrap.
А если не сможешь, то и здесь тебе программка поможет и укажет на наличие ошибок в коде, порекомендует, как правильно их исправить. В общем инструмент более чем достоин использования, особенно если речь заходит про создание простого сайта, который должен работать быстро, в котором нет ничего лишнего, который будет загружаться моментально и работать безотказно.
В качестве примера покажу набор файлов, которые в итоге получились при производстве одностраничного сайта, про который я рассказывал, начиная эту серию постов. Это один HTML-файл весом меньше 5 килобайт и CSS-файл с таблицами стилей ещё на 271 байт. Весь остальной объём занимают изображения в формате webp и весят суммарно около 94 килобайт. То есть нужно браузеру нужно загрузить всего порядка 100 (
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7
Бесплатная альтернатива Midjorney на русском языке!
Вот отличная новость для тех, кто хочет генерировать изображения, но уже исчерпал весь свой лимит в Midjorney. Сбер выпустил свою версию генеративной модели Kandinsky 2.1 (Кандинский) – это новая версия, которая позволяет тоже похожим образом генерировать изображение по текстовому описанию.
Пока она в свободном доступе, абсолютно бесплатная и можно ей пользоваться даже без регистрации. То есть здесь всё намного проще, чем в Midjourney, нет никакого геморроя с Дискордом и в принципе, всё, что нужно сделать – просто перейти по ссылке этой сетки и можно начинать работать.
Из хороших особенностей я отмечу, что здесь можно выбирать стилистику, в которой будет сгенерировано картинка, из предлагаемого списка и это, по-моему, очень удобно: не обязательно прописывать все требования к стилистике изображения в запросе к нейронке.
Тут же есть и полезная функция, которая позволяет удалить ненужные с ваших фотографий.
Ну и несомненное преимущество – это то, что она понимает запросы на русском языке.
Поэтому если тебе по тем или иным причинам не удалось ознакомиться с Midjorney, то смело заходи в Кандинский (точнее Fusion Brain, как она называется) и генерируй свои изображения.
Вот отличная новость для тех, кто хочет генерировать изображения, но уже исчерпал весь свой лимит в Midjorney. Сбер выпустил свою версию генеративной модели Kandinsky 2.1 (Кандинский) – это новая версия, которая позволяет тоже похожим образом генерировать изображение по текстовому описанию.
Пока она в свободном доступе, абсолютно бесплатная и можно ей пользоваться даже без регистрации. То есть здесь всё намного проще, чем в Midjourney, нет никакого геморроя с Дискордом и в принципе, всё, что нужно сделать – просто перейти по ссылке этой сетки и можно начинать работать.
Из хороших особенностей я отмечу, что здесь можно выбирать стилистику, в которой будет сгенерировано картинка, из предлагаемого списка и это, по-моему, очень удобно: не обязательно прописывать все требования к стилистике изображения в запросе к нейронке.
Тут же есть и полезная функция, которая позволяет удалить ненужные с ваших фотографий.
Ну и несомненное преимущество – это то, что она понимает запросы на русском языке.
Поэтому если тебе по тем или иным причинам не удалось ознакомиться с Midjorney, то смело заходи в Кандинский (точнее Fusion Brain, как она называется) и генерируй свои изображения.
👍8🔥2
Буквально на днях заказчик, которому нужно сделать два лендинга (сайта), попросил прояснить момент с несколькими доменными именами. Потому что на самом деле не всегда понятно, когда имеет смысл делать два доменных имени запускать два разных сайта или достаточно одного. Я подумал, что это хорошая тема для того, чтобы светить её в своём блоге и, собственно, поехали.
Для начала нужно разобраться в определениях. Лендинг (landing) – это одна (посадочная) страница сайта. На одном сайте (то есть на одном доменном имени) страниц может быть сколько угодно, хоть 1 000, в том числе и разных лендингов. Сайт – это совокупность страниц, но он может состоять и из одной единственной страницы. И сайт всегда привязан к какому-то доменному имени, адресу в сети.
Когда речь идёт про бизнес с несколькими отдельными брендами, для каждого этого бренда нужны отдельные посадочные страницы, куда будет попадать пользователь и знакомиться с предложением.
То есть в рамках одного сайта (то есть доменного имени) можно сделать, например, два лендинга и дополнительно две страницы с разными каталогами под каждый бренд, которые могут быть соединены между собой ссылками в меню этого сайта. При этом дизайн разных страниц в рамках одного сайта тоже может отличаться.
С другой стороны, отдельный сайт и отдельное доменное имя стоит делать, чтобы не путать пользователя и не мешать маркетинговые активности в одну кучу. Если клиент ожидает на сайте Х увидеть туалетную бумагу со смывающейся втулкой, но при переходе на другую страницу увидит запчасти для спортивных велосипедов, это может его смутить и запутать.
Равно как и продвижение сайта. Когда ты даёшь рекламу, она ведёт на какой-то домен и поисковики не любят, когда на одном и том же домене две разных тематики (например блог про котов и товары для обуви).
Поэтому в этом случае имеет смысл разнести контент на два разных сайта, то есть два разных доменных имени и сделать их независимыми друг от друга.
Для начала нужно разобраться в определениях. Лендинг (landing) – это одна (посадочная) страница сайта. На одном сайте (то есть на одном доменном имени) страниц может быть сколько угодно, хоть 1 000, в том числе и разных лендингов. Сайт – это совокупность страниц, но он может состоять и из одной единственной страницы. И сайт всегда привязан к какому-то доменному имени, адресу в сети.
Когда речь идёт про бизнес с несколькими отдельными брендами, для каждого этого бренда нужны отдельные посадочные страницы, куда будет попадать пользователь и знакомиться с предложением.
То есть в рамках одного сайта (то есть доменного имени) можно сделать, например, два лендинга и дополнительно две страницы с разными каталогами под каждый бренд, которые могут быть соединены между собой ссылками в меню этого сайта. При этом дизайн разных страниц в рамках одного сайта тоже может отличаться.
С другой стороны, отдельный сайт и отдельное доменное имя стоит делать, чтобы не путать пользователя и не мешать маркетинговые активности в одну кучу. Если клиент ожидает на сайте Х увидеть туалетную бумагу со смывающейся втулкой, но при переходе на другую страницу увидит запчасти для спортивных велосипедов, это может его смутить и запутать.
Равно как и продвижение сайта. Когда ты даёшь рекламу, она ведёт на какой-то домен и поисковики не любят, когда на одном и том же домене две разных тематики (например блог про котов и товары для обуви).
Поэтому в этом случае имеет смысл разнести контент на два разных сайта, то есть два разных доменных имени и сделать их независимыми друг от друга.
👍5