1.3.1 Методы разработки веб-сайтов
Веб-сайт — это совокупность программных, информационных, а также медийных средств, логически связанных между собой, по сути, это отражение успешности компании, её лицо.Доменное имя, символьное имя, служащее для идентификации, областей, которые являются единицами административной автономии в сети интернет. Например, «yandex.ru» является доменным именем, которое объединяет все странички, находящиеся на сервере.Веб-сервером называют, как программное обеспечение, выполнявшие функции сервера, так и домашний компьютер на котором установлено программное обеспечение, может быть использован в роли сервера.Браузер специальная программа, предназначенная для просмотра веб-сайтов. Происходит это с помощью http запросов к серверу и получения от него данных, которые обрабатываются по специальным утвержденным стандартам и таким образом формируется веб-страница.Скелет веб-сайта, который мы видим в браузере написан на языке HTML. HTML (язык гипертекстовой разметки), язык является стандартом разметки документов во всемирной паутине. Основное предназначение языка в разметке текста, для этого используются теги визуально они отображаются в угловатых скобках. HTMLдокументы будут корректно отображаться во всех браузерах и на мобильных устройствах. Все документы HTMLсодержат в себе стандартные элементы такие как титульная надпись, объявление кодировки, различные мета теги.Основным способом верстки сайта является набор кода в текстовом редакторе. Это трудоёмкий и рутинный процесс подразумевает грамотное семантическое прописывание тегов, классов, продумывание иерархии сайта, умение работать стилями в CSS, работа с динамической анимацией по якорям, на языке программирования JavaScript.Вторым способом верстки сайта является использование CMS. Это движок, который предоставляет возможности полуавтоматического создания веб-сайтапо шаблону, создание сайта на CMS. Такой движоктребует меньше знаний и времени, а также в CMSесть панель администратора с помощью, которой можно добавлять, удалять информацию, внедрять готовые плагины, скрипты в верстку веб-сайта.
Третьем способом является, возможность создавать веб-сайты на специальных сервисах, конструкторах, в них ты в визуальном редакторе подстраиваешь блоки под свой дизайн. В таких сервисах обычно нужны минимальные понимания верстки веб-сайта и работы с файлами. Этот метод позволяет достаточно быстро получить верстку со сложным оформлением, анимацией искриптами.Обозначим преимущества и недостатки веб-сайтов написанный на CMSи конструкторах. Что касается, достоинства CMSили сервиса конструктора, самым главным достоинством это будет скорость разработки, ручная верстка в редакторе займет гораздо больше времени. Главный недостаток таких методов — это качество сайта, если в CMSеще более читабельный и оптимизированный код, то в конструкторах в большинстве случаев код получается ужасный, также создание такого сайта будет стоить дороже.Обозначим преимущества и недостатки веб-сайтов, написанных вручную. Созданный таким образом веб-сайт гораздо сложнее взломать, так как нет MySQLбазы данных и отсутствует файл конфигурации, а именно с помощью этих файлов в первую очередь хакеры пытаются взломать веб-сайт.Веб-сайты, сверстанные вручную отображаются горазда быстрее если их сравнивать с CMSсистемами, сервисами конструкторами. Так получается потому что, код получается более оптимизированным, файлы намного компактнее и не надо делать запросы MySQLбазу данных.Скорость отображение веб-сайта положительно влияет на будущего клиента если загрузка долгая, то это негативный фактор, скорость влияет на позицию выдачи при поисковых запросах. При одинаковых условиях веб-сайт,написанный на вручнуюбудет выше. Веб-сайт занимает меньше места что позволяет экономить на тарифах хостинга.Для описание внешнего вида элементов страниц применяется CSS (каскадные таблицы стилей).CSSдовольно просто использовать в HTMLдокументах. Для этого нужно прописать в head(предназначен для хранения других элементов), тег style(применяется для определения стилей элементов веб-страницы) и внутри этого тега прописывать стили.CSS довольно простой формальный язык, который был создан для описания внешнего вида документов. Язык прост и состоит из самобытных примитивных конструкций, которые не так сложны в запоминание, выполняющие определенные задачи. Самое сложное в запоминании не написание конструкций. Например, чтобы задать цвет тексту, достаточно, сделать перевод на английский в результате получиться color и название цвета.
CSSселектор (от слова выбирать) – это конструкция с которой начинается каждый блок объявлений, служит для выборки элемента или однотипных элементов на странице, для дальнейшей стилизации. Чаще всего в качестве селектора используется определенный класс тега. Пример определения класса тегом приведен на рисунке 1.Рисунок 1 – Определенный класса тегаЗдесь селектором будет класс descriptionтега p, который получает необходимое оформление вHTMLдокументе, в теге . В данном случае цвет текста – cadetblue. Соответственно, если на странице естьнесколько тегов (не только p)с классом description, все элементы получат одинаковое оформление,цвет текста серо-голубой.В проектах где, большой объём работы, использование CSSне целесообразно потому что, получатся большое и не структурированное количество кода, в котором сложно ориентироваться. Для решения этой проблемы есть
CSS препроцессор.
CSS препроцессор — это надстройка над CSS, которая добавляет ранее недоступные возможности для CSS, с помощью новых синтаксических конструкций. CSS препроцессоры преобразуют код, написанный с использованием препроцессорного языка, в чистый и валидный CSS-код.При помощи препроцессоров вы можете писать код нацеленный на: -
читабельность для человека;
-
структурированность и логичность;
-
производительность.
Самым популярным предлагаемым функционалом любого CSS-препроцессора является, возможность вкладывать селекторы друг в друга. Оптимальным CSS-препроцессором для маленьких и средних проектов будет LESS, его функционала должно хватать.В
CSS-предпроцессоре LESS, есть примеси, если говорить совсем кратко, то используя примеси (от англ. Mixins), можно сделать код повторно используемым. Это помогает избежать вспомогательных классов в разметке или дублирования свойств от селектора к селектору.Переменные в LESS, переменные нужны для организации и упрощения написания кода и позволяют предварительно задать популярные значения, а затем повторно использовать их в любом месте кода, просто написав имя переменной. Это удобно, потому что нам при необходимости не придётся
отыскивать и править множество значений, достаточно изменить его в одном месте и значения везде заменятся автоматически.LESS также позволяет нам выполнять такие операции как сложение, вычитание, умножение и деление числовых значений, цветов и переменныхв таблице стилей. Допустим, мы объявили переменную paddingкоторая применяется ко всем нашим элементам H1 (заголовокпервого уровня). Но теперь мы хотим добавить дополнительный отступ для нашего заголовка на главной странице.Для того, что ускорить разработку, необходимо использовать БЭМ (блок, элемент, модификатор). БЭМ — это не только простое именование классов, это компонентный подход к работе. Компонентный подход — это когда мы делим разрабатываемый интерфейс на отдельные блоки. При надобности данный блок можем использовать в другой части сайта или приложения без дублирования стилей. Сейчас, конечно же, мало, что понятно, но мы будем разбирать примеры.Основу БЭМ методологии составляют 3 составляющие:
-
блок;
-
элемент;
-
модификатор.
Блоком — это функционально независимый компонент, который может быть повторно использован на любой странице сайта и в любой части документа. Блок именуется только атрибутом class. Название блока (а именно присваиваемый класс) должно характеризовать смысл или предназначение блока.Элемент — это составляющая блока, которая не может быть использована в отрыве от него. Именование элемента выглядит следующим образом: имя-блока__имя-элемента. То есть название элемента отделяется от имени блока двойным нижним подчеркиванием (__).Модификатор — это БЭМ сущность, которая определяет вид, состояние или поведение блока, или элемента. Модификатор отделяется отназвания блока или элемента одинарным нижним подчеркиванием (_). Структура имени модификатора будет следующим, для блока: имя-блока_модификатор.Для ускорения верстки ииспользования удобной сетки можно использовать библиотеку. Bootstrap— свободный набор инструментов, для создания веб-сайтов и веб-приложений. Включает в себя HTML и CSS-шаблоны оформления для типографики, веб-форм, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейса, включая JavaScript-расширения.Преимущества библиотеки bootstrap: -
высокая скорость разработки макетов страниц сайта, bootstrap содержит огромный набор готовых решений и элементов;
-
кроссбраузерность и адаптивность сайта,все элементы библиотеки адаптивны под все устройства и корректно отображаются во всех современных браузерах;
-
легкость в использовании, даже человек, имеющий базовые знания о HTML и CSS, может свободно создавать веб-страницы с использованием библиотеки;
-
простота в обучении, у bootstrap очень хорошая документация с большим количеством примеров готового кода.
Для динамических элементов в проекте понадобиться JavaScript. JavaScript— язык программирования, с помощью которого создаются всевозможные приложения и красочные анимации, они могут либо встраиваться в html-код страницы, либо вызываться с помощью простых команд как отдельный программный файл. Использование технологии JavaScript при верстке сайта позволяет создавать различные формы обратной связи, регистрационные анкеты, подсказки и предупреждения, вносить изменения в стили элементов страниц, удалять или добавлять теги, манипулировать элементами html-кода, записывать данные о посетителях и многое другое.JavaScript поддерживается всеми браузерами и интегрируется с ними. Однако возможности сценариев JavaScript небезграничные. Так, например, JS не выполняет кроссдоменные запросы, ему недоступны файлы, кроме cookie,расположенные не на компьютере пользователя, не защищает страницу от копирования текста.С помощью него доступны к исполнению следующие функции:
-
возможность изменять страницы браузеров;
-
добавление или удаление тегов;
-
изменение стилей страницы;
-
информация о действиях пользователя на странице;
-
запрос доступа к случайной части исходного кода страницы;
-
внесение изменений в этот код;
-
выполнение действия с cookie-файлами.
1.3.2 Проектирование веб-дизайна
Одной из важнейших задач при разработке веб-дизайна ресурса является, реализация такой его функции как коммуникация. Иначе говоря, веб-дизайн-сайта должен быть таков, чтобы оказавшийся здесь по новому запросу пользователь, не только не покинул его, но и захотел бы более подробно ознакомиться с содержанием ресурса и прочей предлагаемой веб-сайтом информации. Веб-сайт не может долго и успешно функционировать, если на каждом этапе разработке, его дизайн не будет гармонировать с его содержимым. Разработка дизайна сайта — это создание прямого и ровного пути между посетителем сайта и целью, которой является искомые данные. Поэтому очень важно при проектировании веб-сайта хорошо понимать на какую аудиторию, он рассчитан какие потребности возникают у пользователей. Все эти задачи в веб-дизайне решает Ux/Ui. UX – это UserExperience (дословно «опыт пользователя»).
То есть это то, какой опыт/впечатление получает пользователь от работы с вашим интерфейсом. Удается ли ему достичь цели и на сколько просто или сложно это сделать.UI