1. PerfectPixel

Пример использования PerfetPixel при разработке новых блоков на www.wrike.com

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

Ссылка на установку расширения

2. Wappalyzer

Пример использования Wappalyzer на сайте collaborate.wrike.com/2019/london

Всегда интересно какие инструменты и технологии используются на сайтах. Wappalyzer предоставляет информацию о CMS, JS фреймворках, CSS библиотеках, инструментах аналитики и многом другом. Представьте, что анимация на сайте – это бесплатная CSS библиотека, которую вы можете использовать у себя в проекте. Это позволит сократить время поиска необходимого инструмента и быть в курсе технологий, которые использует сайт.

Ссылка на установку расширения

3. HTML5 Outliner

Иерархия заголовков на странице habr.com/ru/company/wrike

HTML 5 Outliner отображает список заголовков на странице сайта. Расширение помогает структурировать заголовки и определять нарушения в иерархии. Например, в теге section HTML 5 Outliner выводит предупреждение об отсутствии тега h2. Это один из быстрых и удобных способов, чтобы определить правильность использования заголовков в верстке.

Ссылка на установку расширения

4. Wireframify

Пример использования Wireframify на сайте www.wrike.com

Дизайнеры проектируют сайты с помощью wireframe — это набор линий, блоков и подписей. Такой подход позволяет создавать архитектуру проекта с учетом отступов, размеров и расположения блоков на странице. Wireframify включает альтернативный вид сайта в виде wireframe, что позволит избежать ошибочного использования:

• отрицательных margin;
• выравнивания элементов с помощью padding;
• добавления отступов с помощью CSS свойств left, right;

Ссылка на установку расширения

5. PageLiner

Пример использования PageLiner на сайте www.wrike.com/apps

В графическом редакторе выровнять элементы или отобразить сетку сайта можно с помощью направляющих линий. Верстальщик может включить этот функционал в браузере используя PageLiner. Расширение отображает похожие направляющие, как в том же Adobe Photoshop. С PageLiner выравнивать элементы становится намного проще.

Ссылка на установку расширения

6. Web Developer

Список возможностей web developer

Web Developer добавляет в браузер дополнительную панель с инструментами. Внутри нее находится 10 вкладок: Disable, Cookies, CSS, Forms, Images, Information, Miscellaneous, Outline, Resize и Tools. Функционал расширения позволяет:

• отключать CSS, JS и изображения;
• проверять валидность HTML, CSS;
• манипулировать CSS стилями;
• тестировать HTML формы;
• отображать необходимую информацию мета тегов;
• изменять размер окна браузера;
• очищать кэш;

Web Developer остается популярным расширением среди разработчиков. Его можно сравнить с мультитулом в реальной жизни: всегда под рукой необходимый набор инструментов.

Ссылка на установку расширения

7. User CSS

Пример использования User CSS на сайте www.wrike.com/customers

Представим, что вы захотели поправить CSS прямо в браузере, но после этого пришлось перезапустить страницу. Все ваши наработки пропали, и приходится вносить изменения заново. Используйте User CSS, который будет сохранять ваши стили. Больше не нужно переживать по поводу того, что CSS исчезнет. Функциональность расширения позволит тестировать написанный CSS при переходе на другие страницы.

Ссылка на установку расширения

8. StyleURL

Пример использования StyleURL на сайте Wrike www.wrike.com/customers

User CSS не заменит панель разработчика браузера. Если вы привыкли работать в devtools и при этом не хотите потерять изменения после обновления браузера – установите StyleURL. Расширение запомнит ваши изменения и предоставит возможность сохранить наработки в отдельном файле или загрузить в github gist.

Ссылка на установку расширения

9. Siteimprove Accessibility Checker

Пример использования Siteimprove Accessibility Checker на сайте www.wrike.com/newsroom

Siteimprove Accessibility Checker — это инструмент, который проверяет HTML на соответствие стандартам доступности, чтобы обеспечить доступ к контенту для всех. Расширение отображает ошибки с подробной информацией. В описании к ним вы можете найти сноски с WCAG 2 и прямые ссылки на подробные статьи о доступности.

Ссылка на установку расширения

10. Tabsbook

Пример использования Tabsbook

Каждый работает с закладками по-своему. Есть те, кто сохраняет ссылки для быстрого доступа к сайтам, и те, кто используют закладки, чтобы хранить полезную информацию. С помощью Tabsbook можно превратить ваши закладки в базу знаний. Интерфейс расширения отображает древовидную структуру папок для удобной навигации по вашим закладкам. Все данные хранятся в облаке, что позволяет иметь доступ к ним с любого устройства.

Ссылка на установку расширения

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

Больше полезных расширений для браузера можно найти по ссылкам Toп-10 плагинов Chrome для дизайнеров и Полезные расширения Google Chrome для программиста.

https://habr.com/ru/company/wrike/blog/471938/

Почему нужно обратить внимание на эти альтернативы? Ответ на этот вопрос поищите здесь.

Foundation by Zurb

“Фреймворк для любого устройства, среды и степени доступности.” Так он характризуется и это, безусловно, верно. Со всеми своими достоинствами, Foundation, безусловно, сильнейшая альтернатива Bootstrap. Крупнейшие общемировые бренды, например, Adobe, Amazon, HP, eBay и т. д. используют его на своих сайтах. В нём есть все необходимые компоненты приложений, такие как адаптивная сетка, кнопки, базовая типографика и многие другие элементы пользовательского интерфейса.

Кроме того, изначально заложена «база для верстки электронных писем», которая является основой для кодирования привлекательных HTML в e-Mail. И это значит, что всякий раз, когда вы ищете альтернативу Bootstrap, попробуйте Foundation.

Bulma

Bulma появилась всего-то около 3 лет назад и сразу стала популярной. Это был один из первых CSS фреймворков, реализовавших полноценную сетку flexbox^એ. Кроме того, в ней есть огромный набор компонентов для кодирования любого веб-сайта. Bulma^એ приходит с великолепной встроенной палитрой цветов и будет неправильно, если мы не назовём её самым красивым фреймворком на рынке. Рекомендуем её использовать, если действительно необходимо сделать действительно хороший сайт с наименьшими усилиями.

Единственным недостатком по сравнению с Bootstrap и Foundation является то, что это только CSS-фреймворк, здесь нет JavaScript. Поэтому придется написать свой собственный код JavaScript или обратиться к Jquery для реализации выпадающих списков или других привычных элементов взаимодействия с клиентом.. В целом это отличная альтернатива Bootstrap, к тому же, довольно часто обновляемая.

Skeleton

Skeleton — это легкий CSS-фреймворк, очень популярный благодаря своей 12-столбчатой адаптивной сетке, состоящей из строк и столбцов, похожей на другие CSS-сетки. Крайние версии Skeleton-а адаптированы под концепцию «для мобильного вперёд», центром притяжения является первый план на экране, независимо от его размера. Будучи легким, Skeleton может значительно ускорить процесс разработки переднего плана.

Skeleton — идеальная альтернатива Bootstrap при реализации чего-то маленького и простого, где нет необходимости продираться через кучи утилит больших фреймворков. Skeleton предоставляет разработчику фундаментальные компоненты, такие как кнопки, списки, формы, таблицы и многое другое, которых вполне достаточно для начала работы.

Pure

Pure.css — CSS фреймворк, где собрана куча CSS-модулей. Главное достоинство Pure — её вес. Он невероятно мал, так как изначально создавался для поддержки мобильные устройства, где небольшой размер файла является обязательным. Фреймворк имеет чисто CSS характер, что отражается в его названии.

Он позволяет разработчикам создавать адаптивные макеты, построенные на сетках, меню, формы, кнопки и многое другое. Небольшая, но очень полезная платформа превосходит Bootstrap, когда дело касается мобильных устройств.

Groundwork

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

Фреймворк прост для пользовательских настроек и открыт для дополнительной функциональности. Структура основана на Sass и Compass, включает в себя инструменты, необходимые для создания адаптивных заголовков, текстовых блоков и таблиц.

Cardinal

Cardinal — CSS-фреймворк для высокой производительности, масштабируемости и удобства эксплуатации. Этот ‘первый мобильный’ фреймворк облегчает разработчикам создание, масштабирование и обслуживание UI^એ, приложений и адаптивных веб-сайтов.

Фреймворк поставляется с рядом вспомогательных классов для быстрого применения стилей к элементу, что сокращает время разработки. Cardinal также поддерживает большинство современных браузеров, таких как Google Chrome, Mozilla Firefox, Safari, iOS Safari и Android. Подход «для мобильного вперёд» и модель CSS Box делают его совершенной альтернативой Bootstrap.

powertocss

powertocss — легкий фреймворк, разработанный на принципах масштабируемой и модульной архитектуры для CSS (Scalable and Modular Architecture for CSS^એ) и не повторяющий ваш (DRY) CSS. Фреймворк легко узнать по простоте и простым именам классов, таких как .button, .column и прочее, прочее, прочее…

Этот небольшой молниеносный, в сравнении с ведущими именами на рынке, фреймворк построен на принципах: быстро учиться, быстро загружать и быстро развиваться. Проект с открытым исходным кодом легко настраивается и вы можете добавлять его к своим собственным темам.

Mueller

Модульная адаптивная система сеток Mueller построена на Syntactically Awesome Style Sheets (Sass) и Compass (авторский CSS-фреймворк с открытым исходным кодом). В Mueller разработчик создаёт сетку, используя функции сетки (grid()), добавляя классы непосредственно к элементам, сохраняя HTML-верстку аккуратной и чистой.

Сеточная система особенно полезна для создания адаптивных макетов, например, таких как на популярном веб-сайте Pinterest^એ. Система обеспечивает полный доступ к настройкам ширины столбцов, медиа-запросам, базовому каркасу сетки и высоте строк.

Bootflat

Построенный на Bootstrap 3, Bootflat является CSS-платформой с открытым исходным кодом, которая предназначена для создания потрясающих веб-дизайнов. Разработчики, использующие Bootflat, могут создавать элегантные веб-приложения быстрее и проще с меньшим затратами. Компоненты фреймворка построены на HTML5 и CSS3 и поставляются с множеством встроенных цветовых схем для работы на заказ. Сохраняя мобильность во-первых, Bootflat фокусируется на обеспечении внеэкранной навигации и использование легких плагинов с технологичными функциями, обеспечивающими оптимальную производительность и небольшой размер.

Materialize

Materialize — современный адаптивный front-end фреймворк, основанный на принципах Material Design компании Google. Material design — это язык дизайна, созданный Google, который сочетает в себе традиционные методы дизайна с инновациями и технологиями. Эта структура идеально подходит для разработчиков, которые хотят добиться прикосновения Material Design к своему веб-сайту без какого-либо сложного кода. Он предлагает card design, Sass mixins, drag-out mobile menu, ripple effect анимации и много чего ещё. Разработчики платформы предоставляют примеры кода и подробную документацию, чтобы помочь новым пользователям начать работу с платформой.

В заключение

Найти правильный фреймворк — немного-нимало задача для Геркулеса, потому как есть масса вариантов и, как в головоломке важно понять, какой фреймворк идеально подходит к вашим задачам.

Альтернативы Bootstrap в 2019 году, упомянутые в этой статье, имеют свои плюсы и минусы, но любая из них может стать правильным выбором для вашего проекта. Хотя Bootstrap по-прежнему ведущий и передовой фреймворк, сейчас есть много альтернатив, которые набирают обороты и популярность.

Источник вдохновения: Top Bootstrap Alternatives 2019 by Sagar Bhatia

Полезно для понимания: Способы организации CSS кода

Лендинг — это любая страница с призывом к конкретному действию. Подписаться на рассылку, купить сумку, оставить контактные данные или зарегистрироваться на конференцию.

Посадочная страница может быть частью существующего веб-сайта или иметь другой URL-адрес. Пользователи попадают на лендинг через контекстную, баннерную или таргетированную рекламу в Google или Яндексе, email-рассылку или в результате поиска. Главная задача landing page — конвертация посетителя в лида или покупателя, побуждение к совершению целевого действия.

Зачем нужен лендинг?

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

Давайте разберемся на примере:

Предположим, вы любите активный отдых и туризм. Как-то раз листаете фейсбук и вдруг видите рекламу «Поход на Алтай в группе до 10 человек».
Теперь у авторов сайта есть всего несколько секунд, чтобы захватить ваше внимание и доказать, что выбрать следует именно этого гида и потратить энное количество денег. В противном случае, вы сразу вернетесь к ленте новостей, ведь там интереснее.

Структура хорошего лендинга:

• Первая картинка и короткий текст привлекают внимание — полезная информация про походы;
• Ведущим группы будет известный гид, путешественник, который провел ни один успешный поход;
• В программе мероприятия заявлено, что группа небольшая, снаряжение предоставляется. Маршрут несложный, но красивый и интересный — подходит для не очень опытных путешественников.
• Есть отзывы участников прошлых походов со ссылкой на соцсети. Говорят, что понравилось, можно спросить у участников напрямую, написав в мессенджер.

Звучит хорошо. Подписываетесь на рассылку, чтобы узнать точные даты тура и получить скидку 10%. Возвращаетесь на фейсбук.

Вы только что побывали на лендинге и сделали то, что от него хотели создатели.

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

Запомните — лендинг полезен тогда, когда предложение можно поместить на кнопку.

О том, как создать лендинг, мы рассказываем здесь, а пока что приведем основные структурные элементы, делающие его успешным:

• Яркий запоминающийся заголовок, который точно описывает цель страницы.
• Краткое описание продукта или услуги, без лишних слов. Вы не хотите, чтобы пользователь утонул в потоке информации. Отлично работающий принцип «Чем проще, тем лучше».
• Чистый и минималистичный дизайн, минимум цветов и элементов, чтобы сосредоточить внимание пользователя на главном — целевом действии.
• Структура. Расставьте акценты — просмотр страницы должен быть плавным, а элементы располагаться в логическом порядке.
• CTA aka «призыв к действию» должны быть заметными с первого взгляда, ведь они главные элементы лендинга. Используйте простые и понятные призывы, например «подписаться», «скачать», «купить» и т. д.
• Используйте качественные изображения, фотографии или иллюстрации, чтобы наилучшим способом передать настроение сайта. Помните — встречают по одежке.
• SEO оптимизация. Посмотрите, какие запросы люди чаще всего используют при поиске похожих товаров и обязательно используйте их в заголовке и описании на сайте, SEO заголовках и описании и подберите правильный URL.

Как работают одностраничники?

Чтобы лендинг заработал, вы должны привлечь на него трафик. Это делается несколькими способами:

• Email-рассылка. Отправьте подписчикам свою посадочную страницу по электронной почте.
• Разместите ссылку на лендинг в социальных сетях, инстаграме, фейсбуке или твиттере.
• Добавьте ссылку на страницу в блоге. Если блога нет, может быть это это тот самый момент, когда стоит его завести?
• Создайте таргетированную рекламу в поисковиках и соцсетях.

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

Куда ведет лендинг?

Посадочная страница последовательно приводит вас к действию и ее конечная цель — заставить посетителей нажать на кнопку. А куда ведет эта кнопка?
Подумайте, куда лучше перенаправить пользователя — в корзину, онлайн-форму или на одну из страниц вашего основного сайта.
Возьмем все те же кухни. Он оставляет свой номер в форме обратной связи, а позже консультант перезвонит, расскажет о вариантах и ценах и пришлет несколько примеров.

Когда используют лендинги?

Лендинг будет полезен тогда, когда вы точно знаете что и кому продаете. Знать свою аудитория — значит понимать ее желания и потребности, задачи, с которыми сталкиваются эти люди. Например, женщины, 25-35 лет, замужем — это очень размытая характеристика. Те, кто самостоятельно подбирают билеты и бронируют отели — уже точнее.

1. Продажа товаров и услуг. Лендинг подходит для продажи чего угодно. главное условие — товаров должно быть мало. Если у вас больше 10 позиций, лучше завести интернет магазин.
2. Собирать лиды. Лид это посетитель, который может превратиться в покупателя. Например, на сайт пришли 15 человек, 10 прочитали его до конца, 3 оставили контакты. Эти трое и есть лиды, с которыми вы будете работать — отправлять письма, звонить и продавать свои услуги.
3. В дополнение к основному сайту. Если у вас уже есть основной сайт, то лендинг можно использовать для рекламных кампаний и продвижения конкретных товаров и услуг.
4. Когда нет основного сайта. Может быть вам он и не нужен, такое тоже вполне может быть. Вы запустили сервис цветочной подписки и для нее достаточно лендинга. Когда станете большим цветочным магазином, тогда и создадите полноценный сайт.
5. Когда только начинаешь бизнес. Лендинг поможет понять, нужен ли ваш продукт рынку еще до создания самого продукта. Запустить посадочную страницу можно за пару часов, а реклама приведет на нее первых покупателей. По активности вы сможете проанализировать спрос и аудиторию, и скорректировать курс своего бизнеса с наименьшими потерями.

Вместо заключения

1. Лендинг — это страница с одним действием. У него должна быть одна цель. Например, оставить телефон, подписаться на обновления или купить билет.
2. Одностраничный сайт имеет понятную и логичную структуру. Ваш лендинг пейдж — это повествование, которое должно быть плавным, иметь начало, конец и кульминацию. Кульминация в данном случае — нажать на кнопку.
3. Лендинг пейдж создается для конкретной аудитории. У вас могут быть разные клиенты, но посадочная страница создается для узкой аудитории. Лучше создать несколько страниц для разных типов клиентов, чем мешать их на одной. Больше конкретики — лучше результат.

Оригинал: Что такое лендинг и для чего он нужен?

Рейтинг конструкторов сайтов (TOP10)

Мы подготовили для вас рейтинг лучших бесплатных конструкторов сайтов 2019 года, при это постарались быть максимально объективными и учесть как преимущества, так и недостатки, отсортировав их по важности. Более подробную информацию о каждом из конструкторов, вы сможете найти в обзорах доступных для каждого и в них же ознакомиться с подробной инструкцией по созданию сайта на нем.

Перечислим основные преимущества конструктор сайтов:

• Они просты в использовании. Всё делается пошагово и легко. Вам не придётся возиться с кодами серверными языками программирования и FTP.
• Разделение дизайнерской и текстовой частей: макет хранится отдельно от текста. Захотите сменить дизайн — без проблем, несколько кликов и всё готово!
• Наличие готовых шаблонов макетов, для создания которых вне конструктора требуется знание языков разметки HTML/CSS/JS.
• Лёгкость загрузки изображений. Картинки можно добавлять, не выходя из браузера и сразу размещать на страницах, создавать галереи либо делать их частью дизайна макета.
• Надёжность — все файлы хранятся на сервере конструктора. Поэтому Вам не стоит беспокоиться о создании резервных копий данных или о возможности взлома — обо всём этом заботится персонал по обслуживанию серверов выбранного конструктора сайтов.
• Кроме того, некоторые конструкторы позволяют переносить готовый сайт на другой хостинг.

№1: Конструкторов сайтов Wix ^точнее

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

К преимуществам относятся:

• Огромное количество качественных и разнообразных шаблонов (более 1000);
• Возможность создания собственного уникального шаблона;
• Мощный редактор сайта;
• Поддержка функции Drag & Drop (перетянул и отпустил) для всех элементов;
• Очень гибкие и разнообразные настройки;
• Сайты на Wix хорошо индексируются поисковыми системами;
• Русифицированный, понятный и приятный на вид интерфейс;
• Возможность создания мобильной версии ресурса и страниц для социальной сети Facebook (имеется богатый выбор шаблонов);
• Отзывчивая техподдержка;
• В разделе «Вакансии» можно найти работу опытному дизайнеру или программисту;
• Достаточно выгодное соотношение цена/качество при переходе на платный пакет.
• Низкая стоимость премиум-аккаунта — сравнимо с 1 чашкой кофе (от 123 рублей в месяц).
• Подарок новым пользователям в виде рекламы в Яндекс.Директ при покупке Премиум-аккаунта;
• И в конце концов, это ТОПовый конструктор сайтов, которому доверяют уже более 100 000 000 человек по всему миру! Вы только представьте?!

Недостатки:

• Недостаточно запоминающийся адрес страницы в бесплатной версии, имеет вид Вашwixлогин.wix.com/название сайта;
• На бесплатной версии есть ограничение по скорости загрузки сайта. Множество сложных элементов могут дольше грузиться, чем обычно.

Итак, Wix — шикарный конструктор с большими возможностями по оформлению сайта и очень лояльными условиями. Мы подробно описали как на Wix создать сайт, запустить свой интернет-магазин и сделать целевую страницу (landing page).

№2: Конструкторов сайтов Nethouse ^точнее

Отличный конструктор, который приемлем для создания сайтов для малого бизнеса (портфолио, визитка, магазин). Достаточно прост в освоении. По заверениям разработчиков, Перейти к портале не сложнее, чем заполнить страничку в Одноклассниках.

Преимущества:

• Готовый сайт можно привязать к своему домену;
• Неограниченное дисковое пространство;
• Нет навязчивой рекламы;
• Бесплатный доступ к основной части возможностей портала;
• Удобный интерфейс, красивые шаблоны;
• Возможность реализации системы приёма электронных платежей;
• Интеграция с социальными сетями;
• Подарок новым пользователям в виде рекламы в GoogleAdWords;
• Возможность SEO-настройки страниц.
• 100р на счету для пробы платных услуг.
• Приличная техподдержка.

Недостатки:

• Нет возможности вставить HTML-код, баннеры;
• Нет форума.

Итог: молодой, но весьма перспективный проект. Плюсов больше, чем недостатков, прекрасный вариант для начинающих Интернет-предпринимателей. Чтобы плотнее ознакомиться с конструктором мы написали для вас подробную инструкцию по созданию сайта в Nethouse.

№3: Конструкторов сайтов uKit ^точнее

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

Для того, чтобы попробовать его — есть бесплатный 14 дневный пробный период.

Преимущества:

• Обширный функционал;
• Интуитивно понятный пользовательский интерфейс;
• Возможность создавать привлекательные полнофункциональные сайты без технических знаний;
• Достаточно широкие возможности для последующего SEO-продвижения созданного сайта;
• Моментальный доступ к обширной статистике и аналитике работы созданного сайта.

Недостатки:

• Некоторые недоработки функционала и пользовательского интерфейса.

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

№4: Конструкторов сайтов Umi^точнее

Также простой в освоении конструктор. Сайт или магазин можно создать примерно за 5-10 минут. К тому же, есть возможность переноса на другой хостинг, хотя услуга и платная. В основе сервиса лежит собственный фирменный движок Umi.CMS.

Преимущества:

• Богатый функционал, много возможностей;
• Настройки SEO-оптимизации страниц;
• Использование формата XML для отображения любых данных системы;
• Использование REST-протоколов для доступа к XML-представлению данных;
• Интеграция с социальными сетями и возможность подключения комментариев;
• Инструменты для интернет-магазинов (синхронизация каталога и заказов с 1С, создание категорий и характеристик товара, синхронизация каталога и заказов с 1С ,синхронизация склада и цен, подключение платежных систем и пр.);
• Поддержка Drag&Drop;
• Есть выгодная партнёрка.

Недостатки:

• Всего 100 Мб дискового пространства в бесплатном пакете.
• Высокие цены выкупа.

Вердикт: нормальный конструктор, ориентированный, прежде всего, на создание магазинов, о чём говорит функционал и основные преимущества. Для тех, кто решит попробовать конструктор в действии, мы написали статью как Перейти к UMI.

№5: Конструкторов сайтов Jimdo^точнее

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

Преимущества:

• Достаточно большой выбор готовых шаблонов;
• Интуитивно понятный пользовательский интерфейс;
• Тонкая настройка параметров создаваемого сайта;
• Возможность SEO-настройки страниц;
• Нет навязчивой рекламы;
• Возможность загрузки собственного шаблона.

Недостатки:

• Относительная сложность интеграции собственного шаблона;
• Некоторые ограничения при работе с графическими элементами сайта.
• Привязка блоков создаваемого сайта к конкретным координатам (на базовых шаблонах).

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

№6: Конструкторов сайтов Redham^точнее

Качественный сервис, но полностью ориентирован на коммерческую выгоду — тестовый период бесплатного использования составляет 30 дней, дальше нужно платить. В принципе, это и является его наибольшим недостатком (стоимость начального тарифа в год составляет 2000 рублей, премиума — 5000 рублей). Для желающих действительно бесплатно содержать сайт больше месяца данная платформа сразу отпадает.

В качестве преимуществ стоит отметить:

• Простоту;
• Достаточный набор возможностей для создания функционального сайта;
• Приветливую техподдержку.

Недостатки:

• Все вышеуказанные преимущества бесплатны лишь 1 месяц, а дальше придётся платить.

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

№7: Конструкторов сайтов Setup^точнее

Один из наиболее простых для новичков конструктор: удобный и понятный интерфейс, 5000 настраиваемых вариантов дизайна. К тому же,в качестве бонуса портал предлагает бесплатный домен в зоне .ru и возможность продвижения по низкочастотным запросам, что позволит без дополнительных затрат привлечь посетителей на Ваш сайт.

Перечислим преимущества:

• Красивые и многочисленные шаблоны;
• Изначально оптимальные параметры для SEO-продвижения;
• Полная интеграция с SeoPult — системой, позволяющей автоматически покупать ссылки на популярных ссылочных биржах;
• Неплохая техподдержка.

Недостатки:

• Ваш сайт полностью привязан к платформе Setup без возможности переноса на другой хостинг (в бесплатной версии);
• Бесплатный домен трудно получить — необходимо заполнить 20 страниц сайта, после чего он будет на модерации с возможностью отклонения заявки;
• Мало дискового пространства в бесплатной версии (100 Мб);
• Невозможность индексации внешних ссылок поисковиками (в бесплатной версии).

Итак, проект подойдёт для начинающих ввиду удобства и простоты. Для опытных он покажется слишком ограниченным. Хорош в качестве пробного варианта без расчёта на долгосрочную перспективу ввиду невозможности переноса содержимого сайта. Если Вас заинтересовал данный конструктор, советуем посмотреть как создать сайт с его помощью.

№8: Конструкторов сайтов uCoz^точнее

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

Преимущества:

• Большое количество шаблонов и настраиваемых модулей (форум, опросы, галереи, магазин, блог и т. д);
• Обилие возможностей и настроек;
• Постепенно растущий объём дискового пространства по мере развития сайта (без дополнительной оплаты);
• Хорошо индексируется поисковиками;
• Доступен PHP (платно);
• Возможен RSS импорт и экспорт;
• Доступность техподдержки.

Недостатки:

• Огромный рекламный баннер в правом верхнем углу, закрывающий четверть экрана, причём не всегда пристойного содержания;
• Невозможность полного переноса сайта на другой хостинг;
• Нельзя устанавливать на хостинг сторонние скрипты, можно использовать только штатные;
• Иногда администрация банит сайты без возможности восстановления, обжалованию не подлежит;
• Конструктор будет сложным для новичков;
• Достаточно однообразные шаблоны.

uCoz противоречив. Если Вы новичок, то Вам будет сложно, если продвинутый пользователь — то он Вам не нужен попросту.

№9: Конструкторов сайтов A5^точнее

Сервис чем-то напоминает западный Wix. Функционал похож тем, что работа по созданию сайта может происходить как в HTML5-редакторе, так и во флеш. Подробный обзор конструктора А5.

Преимущества:

• Удобный редактор сайта;
• Возможность создания собственного уникального шаблона;
• 150Mb дискового пространства и неограниченное кол-во страниц;
• Наряду с HTML5 есть возможность создания сайтов на flash;
• Отзывчивая служба поддержки;
• Большое кол-во шаблонов (около 300);
• Несложный интерфейс плюс наличие качественных видео-уроков по его использованию.
• Отличное соотношение цена/качество при переходе на платный пакет.

Недостатки:

• Незапоминающийся цифровой домен 3го уровня, вида 2834234.mya5.ru, в бесплатной версии;
• Присутствует реклама конструктора в верхнем правом углу и липкие копирайты в бесплатном пакете.

А5 — простой, но достаточно ограниченный на бесплатном пакете конструктор. Однако, этот конструктор замечательно подходит для определенных целей, что хорошо отражено в статье: создаем сайт на A5.

№10: Конструкторов сайтов Fo.ru^точнее

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

Преимущества:

• Простейший интерфейс, удобный визуальный редактор;
• Множество стильных шаблонов, состоящих из модулей, которые можно менять;
• Нет навязчивой рекламы;
• Наличие партнёрской программы;
• Есть возможность публикации Интернет-магазина в формате приложений для iOS, Android, Facebook и Вконтакте;

Недостатки:

• Слабая техподдержка, нередко не отвечают;
• Мало возможностей для продвинутых пользователей, слабоватая панель администратора, в код залезть не получится;
• Сайт нельзя регистрировать на биржах продажи ссылок;
• Администрация всячески навязывает платные пакеты.

Fo.ru — в целом, неплохой ресурс, особенно для новичков, желающих на скорую руку создать свой первый сайт. Для серьёзных проектов недостаточно гибок в настройке и функционален. Если Вас заинтересовал проект Fo.ru, то детальное описание создания на нём сайтов находится здесь.

Ответы на вопросы

Выводы

Итак, какой конструктор сайтов выбрать? Как Вы можете заметить, идеальных решений нет. Для начала нужно определиться, каким Вы хотите видеть Ваш сайт и какие конструкторы сайтов смогут предоставить наиболее ценные именно для Вас преимущества, имея при этом малозначительные конкретно для Вас недостатки.

Большинство конструкторов сайтов бесплатны (расширение функционала потребует перехода на платный тариф), имеют более-менее удобный интерфейс, неплохой набор шаблонов, акции и т. д. Конкуренция велика, поэтому каждый ресурс стремится привлечь как можно большее количество клиентов всеми доступными средствами.

Лучшие конструкторы сайтов дают возможность даже на бесплатном пакете сделать нечто более-менее приличное и продвигать сайт в Интернете. Из вышеописанных конструкторов хотелось бы обратить внимание на Wix, Nethouse и uKit. Они несколько лучше выглядят на фоне конкурентов. Но выбор, конечно, за Вами!

Оригинал: Лучший конструктор сайтов — рейтинг и сравнение характеристик

Остановитесь на минутку и задумайтесь, сколько энергии вы потребляете? Да, лично вы… и ваша семья. Я, например, думаю об этом постоянно. Постоянно выключаю свет, регулирую термостат, просчитываю маршруты поездок для экономии бензина и выключаю телевизор, если его не смотрят. Уверен, что и вы делаете тоже самое. За несколько последних лет сильно увеличились затраты на потребление всех видов энергии и эти затраты постоянно растут. А задумывались ли вы о том, сколько энергии расходуется на «клик» по ссылке веб-страницы или отправка письма по электронной почте? Наверное, нет. До сих пор это «нет» было и у меня.

Я провожу исследования эффективности использования энергия различными системами и процессами при постоянном доступе к веб-сайтам интернета. Недавно на одной из встреч член исполнительного совета заметил, что прикрываясь стоимостью своих персональных компьютеров и широкополосного соединения в интернете скрываются истинные энергетические затраты. А это, прежде всего, сервера и инфраструктура информационных супер-магистралей. Сколько энергии требует ваше желание увидеть последний топ видео на YouTube? Что будет, если Вы не щелкните на эту ссылку? Сколько энергии Вы сэкономите? Сколько углекислого газа не будет выброшено в нашу атмосферу? И я подумал: «Вау» какой интересный вопрос …, можно ли ответить на него немедленно? Вот в чем дело. Это фундаментальная проблема, которую сложно оценить (что никогда меня не останавливало), поэтому здесь мы рассмотрим, что происходит, когда вы посещаете веб-сайт и, приняв некоторые допущения, сделаем разумные выводы. Поехали …

Разберёмся, что происходит при «клике» по ссылке в браузере. Сначала, прежде чем браузер^એ сможет запросить страницу, связанную со ссылкой, он должен подключиться к серверу. Для этого используется протокол транспортного уровня (TCP^એ — Transport Control Protocol), что напоминает телефонный звонок серверу. Как только сервер «ответит» и установит соединение, браузер формирует пакет запроса для получения страницы, связанной со ссылкой. Этот запрос просит сервер отправить содержимое страницы обратно браузеру. Затем, если адрес реальный и страница существует, сервер передаёт поток пакетов контента на языке разметки гипертекста (HTML^એ — Hypertext Markup Language) с идентификаторами допустимости ответа, а также другую информацию, такую как скрипты, мета-данные, форматирование и прочее. Как только весь контент ответа на запрос доставляется браузеру, соединение завершается, а информация преобразуется в то, что пользователь сможет увидеть и прочитать. На самом деле современные браузеры одновременно делают несколько подключений и запросов, рисуют картинки и прочие разделы страницы. Таким образом, рендеринг^એ происходит гораздо быстрее, обеспечивая для пользователя более равномерное проявления образа страницы (см. ниже).

Процесс, описанный выше, проходит между двумя компьютерами, как правило, разделённых значительными расстояниями. Очень разумно ожидать, что большинство веб-запросов к серверам осуществляется на расстояниях от сотен до тысяч километров. Между двумя компьютерами разветвлённая сеть коммутаторов и маршрутизаторов — «шоссе» для пакетов данных. Как железнодорожные вагоны, пакеты путешествуют от кабельного модема вашей сети (локальной межсистемной линии) в центральный офис. Там пакеты переходят на уровень более высокой пропускной способности — волоконно-оптической связи (основные железнодорожные линий), где с помощью очень коротких импульсов лазерного света они могут уехать очень-очень далеко. Пакеты могут проходить нескольких крупных коммутационных станций, а затем направляться в местные сети, где и расположены удаленные сервера. Интересно то, что цельное сообщение часто состоит из нескольких пакетов и, как вагоны, могут поступить по разным причинам в точку приёма в разное время. Это происходит из-за различных условий движения по сети и снова, как поезда на железной дороге, данные маршрутизаторы ищут для пакетов наиболее эффективные пути доставки до точки приёма. Одна из задач программы на принимающем компьютере заключается в том, чтобы заново заказать информацию и передать ее на более высокий уровень программного обеспечения для интерпретации.

Выполнение всей этой транзакции требует электропитания для компьютеров на обеих конца (Ваш и удаленный сервер), для сетевого оборудования и для сетей между ними. Как упоминалось ранее, для оценки мощности, потребляемой при загрузке веб-страницы нужно сделать некоторые допущения. Мы будем игнорировать потребление локального компьютера и домашнюю сетевую инфраструктуру — будет считать, что это уже учтено в нашем бюджете и не зависит от доступа в Интернет. Мы будем делать оценку мощности только внешней для нашей дислокации структуры.

Далее нам потребуется понять сколько пакетов потребуется для передачи содержимого страницы в наш браузер. В нашей «типичной» странице не будет никаких видео, которое воспроизводится, чаще всего, в потоковом режиме при длительном непрерывном соединении (как долгий телефонный разговор с лучшим другом — только с ним можно так долго говорить). Она будет иметь 3 картинки, размером в среднем 100 кБ каждая и около 5 000 символов информации (например, как в Википедии или на странице новостей). Общее содержание страницы будет объёмом примерно 310 кБ для передачи от сервера к браузеру. К серверу от браузера, необходимо передать, как минимум 4 запроса (1 для страницы и 3 для изображений). Запросы занимают лишь около нескольких сотен байт, поэтому будем считать, что для получения одной веб-страницы вместе с запросами потребуется 315 кБ данных (которые включает в себя все затраты на установку соединения) между двумя компьютерами.

Теперь, когда у нас есть понимание сколько информации передается между двумя машинами, нам необходимо понять, сколько потребуется дополнительного сетевого оборудования и маршрутизаторов и какова потребляемая мощность всего этого добра. Предположим, что кабельная сеть, модем, коммутаторы и маршрутизатор одного конца потребляют около 200 Вт. Высокоскоростное соединения в Интернете на стороне маршрутизатора, вероятно, имеет оптоволоконный канал с интерфейсным модулем (еще 100 Вт). Предположим, что пакеты на своем пути 3 раза проходят через различные маршрутизаторы. Для каждого перехода потребуются 2 коробки оптоволоконных модуля и высокоскоростной маршрутизатор (для простоты) общей потребляемой мощностью порядка 300 Вт на каждый переход. Для сервера потребуется один оптоволоконный модуль, маршрутизатор и коммутатор, которые добавляют дополнительные 300 ватт. Таким образом, общая потребляемая мощность сети для нашей транзакции составит примерно 1 500 Вт (1,5 кВт). Кроме того, не надо забывать о средней мощности современного Блейд-сервера — допустим, она составляет в среднем около 50 Вт.

Думаю, что теперь у нас есть цифры, которые позволят получить более-менее достоверную оценку. Нам надо знать, сколько времени необходимо каждой единице оборудования на передачу данных при оценке потребляемой энергии в ватт-часах. Обсудим это для различных скоростей, начиная с кабельной сети. Типичные данные проходя через кабельную сеть системного интерфейса по спецификации (docsis) и через модем будет иметь совокупную пропускную способность около 152 Мбит/с (Мегабит в секунду) от сервера к компьютеру и 108 Мбит/с от компьютера на сервер. Для упрощения расчетов времени передачи пакетов остановиться на том, что в сети при передаче от компьютера к серверу мы будем использовать скорость 108 Мбит/сек. Также мы предполагаем, что используется оптоволокно OC-12 (Optical Carrier 12) со скоростью около 601 Мбит/с (от 622 Мбит/с до 21 Мбит/с всеми накладными расходами). В заключении в локальной сети, внутри инфраструктуры веб-сервера, скорее всего, будет 1 Гбит/с (гигабит в секунду).

Для нормализации всех этих различных скоростно-мощностных показателей, мы воспользуемся метрикой моей компании, National Semiconductor при оценке энергопотребления устройств интерфейса. Приведем наши предположения к единой метрике в единицах энергии на бит (Дж/бит — см. PowerWise® Solution Metrics). Я также упоминал этот метод в предыдущем статье (см. перевод «Эффективность передачи бита). Это позволяет нам значительно упростить вычисления всех различных скоростно-мощностных показателей. В Таблице 1 показано, сколько пикоДж требуется для передачи 1 бита. Полная энергия одного бита составляет примерно 4,6 микроДжоуль на бит.

Загрузка сервера будет переменной, но мы предполагаем, что сервер полностью загружен и обеспечивает передачу 2 000 страниц в секунду. Ваша страница потребует 1/2000 от 40 ватт или 0.02 ватт-секунд (Джоулей). Теперь давайте посмотрим, что это значит для просмотра вашего веб-страницы.

Мы приходим к выводу, что средний запрос страницы требует около 315,000 байт данных. Вот вам 2,52 х 10⁶ бит. Общая энергия, необходимая для этого составил 4,6 х 10^-6 Дж/бит. Умножив эти два числа получим в 11,52 Джоулей. Добавляем энергопотребление сервера 0,02 Джоулей и в итого получаем 11,61 ватт-секунд (Джоулей) для просмотра каждой страницы. Опять же, это не потоковое видео (это рассмотрим в другой статье), а статичная веб-страница. Если теперь вы умножьте это на 1 млн. просмотров, что характерно для среднего города, то получим потребление энергии около 11,610 киловатт в час, чтобы обеспечить передачу данных… Достаточно для обеспечения электричеством примерно 13 американских домохозяйств за месяц! Если один человек просматривает 100 страниц в день, то это, примерно, 323 милливатт-часов энергии, что эквивалентно просмотру телевизора в течение примерно 10 минут — интересное соображение.

Как и ожидалось, вклад отдельного человека крайне мал, но нас миллиарды. Может, у вас есть лучше оценки или вы по другому смотрете на это, то дайте мне знать! До следующего раза…

По мотивам: The True Cost of an Internet “Click”