Адаптивный движок Bubble
Следующим неоспоримым преимуществом Bubble является фишка, которая не так давно появилась в одном из глобальных обновлений платформы – это движок адаптивного дизайна или Responsive Engine. Он позволяет очень гибко и аккуратно настраивать всё, что касается адаптива страницы под различные устройства, начиная от узких экранов смартфонов до широкоформатных огромных современных мониторов или больших плазменных панелей, на которых нужно отображать контент создаваемого приложения.
Редактор очень мощный и позволяет реализовать любые задумки с различным поведением, которые мы можем ожидать от адаптива: здесь и аккуратные переносы блоков на другую строку, и выравнивание их относительно друг друга по вертикали, по горизонтали, либо с наложением друг на друга, здесь и сжатие и растяжение в зависимости от ширины экрана, здесь и условия, при которых контент может отображаться или скрываться в зависимости от заданного размера и разрешения экрана.
И самое главное, что всем этим очень удобно и тонко можно управлять с помощью довольно-таки небольшого количества настроек. Благодаря чему можно быть уверенным что каждая новая страница, которую ты делаешь на Бабле, будет выглядеть одинаково хорошо и будет одинаково удобно пользоваться как на мобильных устройствах, так и на десктопах.
Конечно же, всё зависит от того, каким образом ты проектируешь сам интерфейс и насколько он дружелюбный по отношению к пользователю. Потому что даже профессиональная фотокамера в руках любителя не будет выдавать шедевры сама по себе. Здесь нужно ещё всё-таки приложение своих творческих способностей.
Но Bubble в данном случае – это многофункциональный комбайн, который как раз предоставляет полную свободу действий и свободу реализации своих задумок (как про-камера). Всё, что было задумано в плане дизайна, включая адаптив, на нём можно реализовать, поэтому, когда речь заходит про более сложный дизайн, чем обычно требуется для рядовых сайтов, я практически сразу выбираю Bubble.
Следующим неоспоримым преимуществом Bubble является фишка, которая не так давно появилась в одном из глобальных обновлений платформы – это движок адаптивного дизайна или Responsive Engine. Он позволяет очень гибко и аккуратно настраивать всё, что касается адаптива страницы под различные устройства, начиная от узких экранов смартфонов до широкоформатных огромных современных мониторов или больших плазменных панелей, на которых нужно отображать контент создаваемого приложения.
Редактор очень мощный и позволяет реализовать любые задумки с различным поведением, которые мы можем ожидать от адаптива: здесь и аккуратные переносы блоков на другую строку, и выравнивание их относительно друг друга по вертикали, по горизонтали, либо с наложением друг на друга, здесь и сжатие и растяжение в зависимости от ширины экрана, здесь и условия, при которых контент может отображаться или скрываться в зависимости от заданного размера и разрешения экрана.
И самое главное, что всем этим очень удобно и тонко можно управлять с помощью довольно-таки небольшого количества настроек. Благодаря чему можно быть уверенным что каждая новая страница, которую ты делаешь на Бабле, будет выглядеть одинаково хорошо и будет одинаково удобно пользоваться как на мобильных устройствах, так и на десктопах.
Конечно же, всё зависит от того, каким образом ты проектируешь сам интерфейс и насколько он дружелюбный по отношению к пользователю. Потому что даже профессиональная фотокамера в руках любителя не будет выдавать шедевры сама по себе. Здесь нужно ещё всё-таки приложение своих творческих способностей.
Но Bubble в данном случае – это многофункциональный комбайн, который как раз предоставляет полную свободу действий и свободу реализации своих задумок (как про-камера). Всё, что было задумано в плане дизайна, включая адаптив, на нём можно реализовать, поэтому, когда речь заходит про более сложный дизайн, чем обычно требуется для рядовых сайтов, я практически сразу выбираю Bubble.
👍5
Ещё одним важным преимуществом Бабла перед другими конструкторами является гибкость возможностей настройки интеграции. Для этого существует отдельный плагин (надстройка) от самих разработчиков Bubble, который позволяет настраивать связи с другими системами посредством API, про который я рассказывал в одном из предыдущих постов.
Напомню, что согласно нашей функциональной архитектуре весь контент хранится во внешней базе данных и не зависит от Бабла. Соответственно Bubble-приложение нужно научить тому, чтобы ходить в эту базу данных и забирать оттуда контент при запросе пользователя, например, когда он заходит в блог. И для этого я как раз применяю схему интеграции через API: подключаюсь к созданным через Directual методам и запрашиваю у них данные.
Как это происходит. Когда ты заходишь в блог, Bubble отправляет запрос в заранее настроенный по заданному адресу метод и спрашивает у бэкэнда, который в данном случае работает на Directual, прислать ему набор постов для блога. Если, например, ты хочешь отфильтровать набор постов по тега, в этом случае тоже происходит запрос к серверу и API отдаёт тот набор постов, который соответствует выбранным тобой тегам.
Затем, когда ты переходишь уже на конкретную страничку блога, выполняется ещё один Запрос к бэкенду, который вытягивает контент этого поста, то есть картинку (которая, кстати, лежит на ещё одном сервисе), текст, информацию о следующем и предыдущем постах и те же теги.
Таким образом можно интегрировать любую другую систему, причём не только на предмет получения данных из внешней системы, но также и на отправку данных. Например, если мы делаем админку, где будем редактировать посты блога, то можно будет их отправлять прямо отсюда в базу данных, если на бэкэнде будет разработан соответствующий метод для получения и обработки этих данных и сохранение их в базу в нужном формате.
Напомню, что согласно нашей функциональной архитектуре весь контент хранится во внешней базе данных и не зависит от Бабла. Соответственно Bubble-приложение нужно научить тому, чтобы ходить в эту базу данных и забирать оттуда контент при запросе пользователя, например, когда он заходит в блог. И для этого я как раз применяю схему интеграции через API: подключаюсь к созданным через Directual методам и запрашиваю у них данные.
Как это происходит. Когда ты заходишь в блог, Bubble отправляет запрос в заранее настроенный по заданному адресу метод и спрашивает у бэкэнда, который в данном случае работает на Directual, прислать ему набор постов для блога. Если, например, ты хочешь отфильтровать набор постов по тега, в этом случае тоже происходит запрос к серверу и API отдаёт тот набор постов, который соответствует выбранным тобой тегам.
Затем, когда ты переходишь уже на конкретную страничку блога, выполняется ещё один Запрос к бэкенду, который вытягивает контент этого поста, то есть картинку (которая, кстати, лежит на ещё одном сервисе), текст, информацию о следующем и предыдущем постах и те же теги.
Таким образом можно интегрировать любую другую систему, причём не только на предмет получения данных из внешней системы, но также и на отправку данных. Например, если мы делаем админку, где будем редактировать посты блога, то можно будет их отправлять прямо отсюда в базу данных, если на бэкэнде будет разработан соответствующий метод для получения и обработки этих данных и сохранение их в базу в нужном формате.
👍3
Давно хотел рассказать про этот инструмент, но пока не подворачивался удобный случай до того, как я начал описывать проект Нутриклиники, потому что здесь Airtable служит отличным примером того, как можно использовать этот инструмент не совсем по прямому значению, но который очень сильно упрощает работу с данными.
Airtable называют «Excel на стероидах» или такие прокаченные таблицы, которые можно конфигурировать абсолютно по-разному и делать это так, как тебе удобно, в том числе и с визуальной точки зрения.
Одна из самых крутых фишек Airtable – то, что здесь таблица представляет собой не просто сетку, где у тебя есть ячейки, колонки и строки, как это сделано в привычных редакторах, например Google Spreadsheet и Microsoft Excel. Здесь одни и те же данные могут быть представлены в абсолютно разном виде:
– в привычных нам строках и столбцах;
– в формате календаря, что может быть удобно для планирования постов, публикаций, событий;
– в виде галереи карточек примерно, как это выглядит в интернет-магазине;
– в виде канбан-доски; это очень хорошо знакомо тем, кто работает с CRM-системами и или системами управления задач;
– также можно всё это представить в виде таймлайна или временной линии, что удобно при планировании или визуализации каких-то протяжённых событий.
И самое главное, что меня привлекает в этой платформе – это то, что все данные могут быть удобно и очень быстро отредактированы с помощью функций сортировки, группировки, фильтрации, подсветок и визуальных акцентов на различных типах данных, которые действуют «на лету», что позволяет работать с данными крайнюю быстро и удобно.
Дальше подробненько расскажу про всё это и для чего же я использую Artable в Нутриклинике.
Airtable называют «Excel на стероидах» или такие прокаченные таблицы, которые можно конфигурировать абсолютно по-разному и делать это так, как тебе удобно, в том числе и с визуальной точки зрения.
Одна из самых крутых фишек Airtable – то, что здесь таблица представляет собой не просто сетку, где у тебя есть ячейки, колонки и строки, как это сделано в привычных редакторах, например Google Spreadsheet и Microsoft Excel. Здесь одни и те же данные могут быть представлены в абсолютно разном виде:
– в привычных нам строках и столбцах;
– в формате календаря, что может быть удобно для планирования постов, публикаций, событий;
– в виде галереи карточек примерно, как это выглядит в интернет-магазине;
– в виде канбан-доски; это очень хорошо знакомо тем, кто работает с CRM-системами и или системами управления задач;
– также можно всё это представить в виде таймлайна или временной линии, что удобно при планировании или визуализации каких-то протяжённых событий.
И самое главное, что меня привлекает в этой платформе – это то, что все данные могут быть удобно и очень быстро отредактированы с помощью функций сортировки, группировки, фильтрации, подсветок и визуальных акцентов на различных типах данных, которые действуют «на лету», что позволяет работать с данными крайнюю быстро и удобно.
Дальше подробненько расскажу про всё это и для чего же я использую Artable в Нутриклинике.
👍3
Media is too big
VIEW IN TELEGRAM
Покажу на наглядном примере, как можно работать с данными в Airtable. Например, есть таблица, где нужно отсортировать перечень схем питания по их типу, который в данном случае содержит рецепты, либо только схему питания. Это делается буквально тремя кликами. Я нажимаю на сортировку, выбираю столбец, по которому нужно сортировать и включаю автоматическую сортировку. После чего колонка подсвечивается, и все строки выстраиваются в алфавитном порядке по этому типу.
Дальше, есть функция группировки, которую я могу также вызвать буквально в два клика, нажав на функцию группировки и выбрав соответствующее поле. Все мои данные сразу разделились на две части: схема питания и схема питания с рецептами, что наглядно даёт мне представление о том, какого типа контент у меня содержится и в каком количестве, потому что сразу же автоматически счётчик показывает, сколько записи в той или иной категории у меня здесь есть. И суммарное количество записей внизу тоже отображается для удобства.
Также я могу включить группировку второго уровня (и так далее по тому количеству типов группировок, которые тебе нужно в конкретном кейсе). В данном случае я разделил записи внутри каждого типа по категориям для взрослых или для матерей с детьми. И я также вижу сразу, сколько у меня схем питания для той или иной категории в каждом типе: с автоматическим счётчиком это сделать очень просто.
Ну и наконец, я могу включить ещё одну сортировку, которая позволит мне выстроить записи в алфавитном порядке уже внутри каждой из этих подгрупп, на которые я только что разделил весь свой контент в этой таблице.
Вот так, буквально за несколько секунд и пару кликов, можно очень удобно группировать сортировать свои данные. И что мне больше всего нравится – это то, что всё происходит наглядно и не нужны никакие-то дополнительные манипуляции с настройкой подсветок, отдельных правил для того, чтобы каким-то образом визуализировать разделение на подгруппы. Здесь уже всё это работает из коробки.
Дальше, есть функция группировки, которую я могу также вызвать буквально в два клика, нажав на функцию группировки и выбрав соответствующее поле. Все мои данные сразу разделились на две части: схема питания и схема питания с рецептами, что наглядно даёт мне представление о том, какого типа контент у меня содержится и в каком количестве, потому что сразу же автоматически счётчик показывает, сколько записи в той или иной категории у меня здесь есть. И суммарное количество записей внизу тоже отображается для удобства.
Также я могу включить группировку второго уровня (и так далее по тому количеству типов группировок, которые тебе нужно в конкретном кейсе). В данном случае я разделил записи внутри каждого типа по категориям для взрослых или для матерей с детьми. И я также вижу сразу, сколько у меня схем питания для той или иной категории в каждом типе: с автоматическим счётчиком это сделать очень просто.
Ну и наконец, я могу включить ещё одну сортировку, которая позволит мне выстроить записи в алфавитном порядке уже внутри каждой из этих подгрупп, на которые я только что разделил весь свой контент в этой таблице.
Вот так, буквально за несколько секунд и пару кликов, можно очень удобно группировать сортировать свои данные. И что мне больше всего нравится – это то, что всё происходит наглядно и не нужны никакие-то дополнительные манипуляции с настройкой подсветок, отдельных правил для того, чтобы каким-то образом визуализировать разделение на подгруппы. Здесь уже всё это работает из коробки.
👍8🔥2
Media is too big
VIEW IN TELEGRAM
API из коробки
Ещё одной важной функцией Airtable является то, что сразу из коробки после создания таблицы становятся доступными API-методы, с помощью которых можно взаимодействовать с этой таблицей из внешних систем, то есть запрашивать данные изменять их, добавлять новые, в общем всё, что нужно.
Кроме того, сразу автоматически создаётся вот такая карта документации, где расписан каждый метод и детально показаны параметры, которыми можно повлиять на запрос. Тут же есть данные о том, как проходит аутентификация в методах. То есть всё, что нужно для того, чтобы сразу начать с ними работать.
При этом, повторюсь, для этого не нужно делать абсолютно ничего дополнительно, а просто создать таблицу и наполнить её данными. Либо даже не наполнять, так как сразу будет доступен API, с помощью которого можно будет заливать эти данные из внешней системы. Это настолько удобный инструмент, который очень сильно помогает экономить время в разработке.
В проекте, про который я рассказываю в этой серии постов, я использую Airtable как промежуточную систему хранения и редактирования данных, потому что здесь с ними крайне удобно работать. А дальше API-методы, которые уже настроены, позволяют мне переносить эти данные в продуктивную базу, где они уже хранятся перманентно и представляют собой тот контент, который подгружается уже на сайт и в мобильные приложения.
В бесплатной версии есть ограничения по нагрузке на API, поэтому именно как продуктивную систему для того, чтобы отдавать данные для сайта и мобильного приложения, я в данном случае его не использую. Но такая опция тоже есть, если выбрать один из платных тарифов, то можно пользоваться API полноценно.
Ещё одной важной функцией Airtable является то, что сразу из коробки после создания таблицы становятся доступными API-методы, с помощью которых можно взаимодействовать с этой таблицей из внешних систем, то есть запрашивать данные изменять их, добавлять новые, в общем всё, что нужно.
Кроме того, сразу автоматически создаётся вот такая карта документации, где расписан каждый метод и детально показаны параметры, которыми можно повлиять на запрос. Тут же есть данные о том, как проходит аутентификация в методах. То есть всё, что нужно для того, чтобы сразу начать с ними работать.
При этом, повторюсь, для этого не нужно делать абсолютно ничего дополнительно, а просто создать таблицу и наполнить её данными. Либо даже не наполнять, так как сразу будет доступен API, с помощью которого можно будет заливать эти данные из внешней системы. Это настолько удобный инструмент, который очень сильно помогает экономить время в разработке.
В проекте, про который я рассказываю в этой серии постов, я использую Airtable как промежуточную систему хранения и редактирования данных, потому что здесь с ними крайне удобно работать. А дальше API-методы, которые уже настроены, позволяют мне переносить эти данные в продуктивную базу, где они уже хранятся перманентно и представляют собой тот контент, который подгружается уже на сайт и в мобильные приложения.
В бесплатной версии есть ограничения по нагрузке на API, поэтому именно как продуктивную систему для того, чтобы отдавать данные для сайта и мобильного приложения, я в данном случае его не использую. Но такая опция тоже есть, если выбрать один из платных тарифов, то можно пользоваться API полноценно.
👍3
Всегда приятно наблюдать результаты собственного труда, особенно когда всё работает чётко, как часы.
Помнишь, я описывал архитектуру решения для системы регистрации на сеансы кинофестиваля? Так вот, запись на фестиваль уже началась, и я наблюдаю, как вся связка работает на практике.
В Telegram-канал приходят уведомления о регистрациях. На скриншотах можешь увидеть, как выглядит само уведомление.
Также в распоряжении администрации фестиваля есть админка, где они могут работать с базой регистраций.
По-моему, отличный пример того, как no-code позволяет реализовать то, что нужно, даже если у какого-то инструмента (в данном случае конструктор Tilda) не хватает функций для этого.
Помнишь, я описывал архитектуру решения для системы регистрации на сеансы кинофестиваля? Так вот, запись на фестиваль уже началась, и я наблюдаю, как вся связка работает на практике.
В Telegram-канал приходят уведомления о регистрациях. На скриншотах можешь увидеть, как выглядит само уведомление.
Также в распоряжении администрации фестиваля есть админка, где они могут работать с базой регистраций.
По-моему, отличный пример того, как no-code позволяет реализовать то, что нужно, даже если у какого-то инструмента (в данном случае конструктор Tilda) не хватает функций для этого.
👍7
Тут такая новость, которую я просто не мог обойти стороной: у Midjorney вышла новая пятая версия, которая при первом взгляде меня очень сильно поразила, потому что я увидел действительно настоящую фотографию, которую я бы не отличил от генерации. И я, конечно же, решил попробовать своими руками. Давай посмотрим, как отличаются изображения в новой версии от тех, которые я делал раньше с теми же самыми запросами. И я подготовил ещё несколько новых интересных работ, которые показывают, на что способна нейросетка.
По ссылке увидишь одну из картинок, которую я здесь опубликовал из Midjourney. Сейчас она генерируется вот таким образом и это действительно похоже на настоящую фотографию. Даже если приглядываться к каким-то мелким деталям, то можно подумать, что это абсолютно настоящее фото. Здесь нет каких-то элементов, которые явно выдают нейросетку или какую-то искусственность. И самое главное исправление, как мне кажется, относится к людям. У них достаточно реалистично теперь выглядят руки, нет девяти-десяти пальцев, как это было раньше, они не такие кривые и похожи на настоящие в большинстве случаев.
Вот такую фоточку с пандами он мне выдал по запросу, в котором был задействован лев, играющий с пандой. Здесь нет льва, но, по-моему, панды в пустыне Сахара выглядит очень даже мило и абсолютно реалистично. Фотография сделана в стиле National Geographic, поэтому здесь узнаваемые ракурсы, которые обычно публикуют в этом журнале и очень хорошо и детально проработанные все фактуры.
Следующая фотография из раздела абсурда – НЛО, зависшие в воздухе над Елисейскими полями на фоне заката и Эйфелевой башни. Очень правдоподобно получилась игра света. Мы видим здесь контровой свет, который действительно так ложится на людей и на улицу, когда мы снимаем перспективу, можно увидеть на отражения на машинах. Это действительно реалистичная фотография за исключением НЛО, которое здесь зависло. А всё остальное можно вполне себе принять за фотку.
По ссылке увидишь одну из картинок, которую я здесь опубликовал из Midjourney. Сейчас она генерируется вот таким образом и это действительно похоже на настоящую фотографию. Даже если приглядываться к каким-то мелким деталям, то можно подумать, что это абсолютно настоящее фото. Здесь нет каких-то элементов, которые явно выдают нейросетку или какую-то искусственность. И самое главное исправление, как мне кажется, относится к людям. У них достаточно реалистично теперь выглядят руки, нет девяти-десяти пальцев, как это было раньше, они не такие кривые и похожи на настоящие в большинстве случаев.
Вот такую фоточку с пандами он мне выдал по запросу, в котором был задействован лев, играющий с пандой. Здесь нет льва, но, по-моему, панды в пустыне Сахара выглядит очень даже мило и абсолютно реалистично. Фотография сделана в стиле National Geographic, поэтому здесь узнаваемые ракурсы, которые обычно публикуют в этом журнале и очень хорошо и детально проработанные все фактуры.
Следующая фотография из раздела абсурда – НЛО, зависшие в воздухе над Елисейскими полями на фоне заката и Эйфелевой башни. Очень правдоподобно получилась игра света. Мы видим здесь контровой свет, который действительно так ложится на людей и на улицу, когда мы снимаем перспективу, можно увидеть на отражения на машинах. Это действительно реалистичная фотография за исключением НЛО, которое здесь зависло. А всё остальное можно вполне себе принять за фотку.
👍9🔥3❤2
Я выберу те, которые покажутся наиболее абсурдными и необычными: хочется увидеть взгляд ИИ не на привычные вещи, а на что-то экстраординарное. Отправлю запросы к Midjorney и опубликую сюда результаты генерации.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥7
Ещё немного генераций от свежего Midjorney
Первая работа – это «фото» в кинематографичном стиле Кристофера Нолана, но почему-то здесь сетка решила изобразить одного из участников этой сцены похожим на известного режиссёра. Тем не менее, выглядит очень фотореалистично и красиво, на мой взгляд, даже композиция поставлена грамотно.
Следующая «фотка» тоже в его стиле, но здесь хорошо видно детально проработанные руки, которые теперь действительно выглядят, как настоящие. Это правда очень похоже настоящую на фотографию, то есть каких-то визуальных дефектов, которые могли бы чётко сказать, что нет, это не может быть настоящий фоткой, на первый взгляд, по крайней мере, я не вижу.
И пара генераций по запросу от подписчика, который был размещён в комментарии к прошлому посту. Одну запросил как сцену фильма, а вторую – мультфильма. Рисованные мне показались даже более интересными и подходящими под идею запроса. Как минимум на их основе можно точно придумать какую-нибудь короткометражку или комикс.
Ключевое отличие на мой взгляд новой версии от предыдущей заключается в том, что, даже вводя в запрос слово «фотография», в четвёртой версии я получал скорее хороший, детальный, качественный арт. А в пятой версии – это действительно имитация фотографии.
Кстати, чтобы воспользоваться пятой версией, можно набрать через слэш
Первая работа – это «фото» в кинематографичном стиле Кристофера Нолана, но почему-то здесь сетка решила изобразить одного из участников этой сцены похожим на известного режиссёра. Тем не менее, выглядит очень фотореалистично и красиво, на мой взгляд, даже композиция поставлена грамотно.
Следующая «фотка» тоже в его стиле, но здесь хорошо видно детально проработанные руки, которые теперь действительно выглядят, как настоящие. Это правда очень похоже настоящую на фотографию, то есть каких-то визуальных дефектов, которые могли бы чётко сказать, что нет, это не может быть настоящий фоткой, на первый взгляд, по крайней мере, я не вижу.
И пара генераций по запросу от подписчика, который был размещён в комментарии к прошлому посту. Одну запросил как сцену фильма, а вторую – мультфильма. Рисованные мне показались даже более интересными и подходящими под идею запроса. Как минимум на их основе можно точно придумать какую-нибудь короткометражку или комикс.
Ключевое отличие на мой взгляд новой версии от предыдущей заключается в том, что, даже вводя в запрос слово «фотография», в четвёртой версии я получал скорее хороший, детальный, качественный арт. А в пятой версии – это действительно имитация фотографии.
Кстати, чтобы воспользоваться пятой версией, можно набрать через слэш
/settings и там указать нужную версию. Либо просто в конце каждого запроса дописывать ‘--v5’ (две чёрточки и пять без пробелов).👍6
Совсем недавно я получил заказ на одностраничник-визитку, наподобие тех, которые обычно делают с помощью специализированных конструкторов, где на страницу добавляются несколько кнопок со ссылками. Обычно такие сайты размещают в профилях соцсетей, так как это удобно позволяет обойти ограничение в одну ссылку в профиле и к тому же позволяет аккуратно оформить кнопки-ссылки. Для этих задач есть несколько сервисов, они все прекрасно работают и замечательно подходят для этих целей: они действительно очень простые и там быстро можно создать такой мини-сайт. В принципе можно сделать такую же штуку и на Тильде, но есть пара нюансов.
Первый нюанс – это простота и чистота кода. Когда я хочу видеть простейший одностраничник, в нём не должно быть ничего лишнего: никаких лишних подключенных библиотек, никаких лишних строк кода, таблиц стилей, баз данных, скриптов и файлов, которые на самом деле никак вообще не используются на сайте. Когда речь идёт про простейшую страничку с несколькими ссылками, всё это абсолютно лишнее, утяжеляет размер сайта на хостинге, скорость его загрузки, добавляет точки отказа и усложняет всю конструкцию абсолютно ненужным хламом.
И второй нюанс – за конструктор все-таки придется платить. Да, хоть небольшие деньги, но все же это регулярная оплата, в то время как простейший одностраничник можно разместить на хостинге, обслуживание которого в год будет обходиться намного дешевле, чем подписка на конструктор.
Конструктор обычно уже включает в себя услугу хостинг. А если мы говорим про самописное решение, тогда, его нужно самостоятельно разместить на хостинг и оплачивать его, как отдельную услугу. Но в случае как раз простейшего сайта нам нужен хостинг и только хостинг – больше ничего оплачивать не нужно. Именно поэтому пути я решил пойти в этом заказе.
Завтра расскажу, какие же инструменты существуют для такого подхода.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9
На чём написать простейший сайт
Если не конструктор, то что? Нужно определиться с инструментарием.
Я было решил сначала вспомнить молодость и накидать сайт на чистом HTML и CSS. Напомню, что HTML (Эйч Ти Эм Эл) – это базовый язык разметки, который браузеры интерпретируют в виде сайта. И если открыть панель разработчика (клавиша F12 в Chrome) на любом сайте, то мы увидим именно его HTML-структуру в первую очередь – базовый каркас, который и позволяет нам видеть сайты.
Но при разработке современного сайта в первую очередь необходимо было учесть то, что сайт должен быть адаптивным и mobile-first, так как в первую очередь он будет просматриваться с мобильных устройств, и вёрстка должна быть аккуратной на всех девайсах. Сделать это вручную, корректно подобрать все стили, правильно их между собой сочетать, грамотно настроить структуру страницы – это довольно-таки кропотливый труд и трудоёмкая задача.
Я, как человек ленивый в этом плане, решил пойти по пути упрощения и вспомнил про то, что в современной разработке есть прекрасные фреймворки и готовые библиотеки стилей, предназначенные именно для того, чтобы быстро и качественно создавать визуальную часть сайта, не переизобретая при этом велосипед, а воспользовавшись уже имеющимся паттернами.
Один из таких фреймворков – Bootstrap (Бутстрап), который позволяет построить структуру сайта, используя уже готовый набор стилей и готовые паттерны, включая адаптивную сетку вёрстки, в которой мы будем размещать элементы сайта. Что такое фреймворк, я рассказывал в одном из своих прошлых постов.
Итак, Bootstrap позволяет упростить работу с вёрсткой, чтобы не изобретать её с нуля. Но мы пойдём ещё дальше и я расскажу про ещё один инструмент, который позволяет упростить работу с самим Бутстрапом. Как тебе такое?
Кстати, мне очень важны твои реакции к постам – пожалуйста, давай мне обратную связь эмошкой.
Если не конструктор, то что? Нужно определиться с инструментарием.
Я было решил сначала вспомнить молодость и накидать сайт на чистом HTML и CSS. Напомню, что HTML (Эйч Ти Эм Эл) – это базовый язык разметки, который браузеры интерпретируют в виде сайта. И если открыть панель разработчика (клавиша F12 в Chrome) на любом сайте, то мы увидим именно его HTML-структуру в первую очередь – базовый каркас, который и позволяет нам видеть сайты.
Но при разработке современного сайта в первую очередь необходимо было учесть то, что сайт должен быть адаптивным и mobile-first, так как в первую очередь он будет просматриваться с мобильных устройств, и вёрстка должна быть аккуратной на всех девайсах. Сделать это вручную, корректно подобрать все стили, правильно их между собой сочетать, грамотно настроить структуру страницы – это довольно-таки кропотливый труд и трудоёмкая задача.
Я, как человек ленивый в этом плане, решил пойти по пути упрощения и вспомнил про то, что в современной разработке есть прекрасные фреймворки и готовые библиотеки стилей, предназначенные именно для того, чтобы быстро и качественно создавать визуальную часть сайта, не переизобретая при этом велосипед, а воспользовавшись уже имеющимся паттернами.
Один из таких фреймворков – Bootstrap (Бутстрап), который позволяет построить структуру сайта, используя уже готовый набор стилей и готовые паттерны, включая адаптивную сетку вёрстки, в которой мы будем размещать элементы сайта. Что такое фреймворк, я рассказывал в одном из своих прошлых постов.
Итак, Bootstrap позволяет упростить работу с вёрсткой, чтобы не изобретать её с нуля. Но мы пойдём ещё дальше и я расскажу про ещё один инструмент, который позволяет упростить работу с самим Бутстрапом. Как тебе такое?
Кстати, мне очень важны твои реакции к постам – пожалуйста, давай мне обратную связь эмошкой.
👍12