Бесплатный фрагмент - Веб-сайт и веб- дизайн: базовые знания

Предисловие

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

I Веб-сайт: базовые понятия

1.1 Понятие веб-сайта. Мы видим веб-сайты, предназначенные для самых разных целей и задач. Как происходит переход на веб-страницы?

Понятие веб-сайта

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

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

Как происходит переход на веб-страницы?

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

1.2 Компоненты веб-сайта

Мы знаем, что веб-сайт — это набор веб-страниц, размещенных на веб-сервере. Далее перечислены компоненты, необходимые для создания веб-сайта.
Веб-хостинг

Хостинг, по сути, является местом физического расположения конкретного веб-сайта. Это группа веб-страниц (связанных веб-страниц), имеющая право называться веб-сайтом лишь в том случае, если она размещена на веб-сервере.

Веб-сервер

Веб-сервер — это набор файлов, передаваемых на компьютеры пользователей при указании ими адреса веб-сайта.

Адрес

Адрес — это адрес веб-сайта, также известный как URL-адрес веб-сайта. Когда пользователь желает произвести открытие веб-сайта, ему необходимо ввести адрес или URL-адрес веб-сайта в веб-браузер, и веб-сервер предоставит ему нужный веб-сайт.

Домашняя страница

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

Дизайн

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

Контент

Все, что представлено на страницах сайта, вместе составляет его контент. Хорошо подготовленный контент делает веб-сайт более полезным и интересным для посетителей.

Структура навигации

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

1.3 Типы веб-сайтов

1. Статический веб-сайт

На статических веб-сайтах веб-страницы возвращаются сервером в виде готовых файлов исходного кода, написанных с использованием простых языков программирования, таких как HTML, CSS или JavaScript. В статических веб-сайтах обработка контента на сервере (по мнению пользователя) не производится. Веб-страницы возвращаются сервером без изменений, из-за чего статические веб-сайты работают быстро. Отсутствует взаимодействие с базами данных. Помимо этого, они менее затратны, поскольку хосту не требуется поддержка серверной обработки на разных языках.
2. Динамический веб-сайт

В динамических веб-сайтах веб-страницы возвращаются сервером, который обрабатывает их во время выполнения. Это означает, что они не являются предварительно созданными веб-страницами, а создаются во время выполнения в соответствии с запросами пользователя с помощью серверных языков сценариев, таких как PHP, Node. js, ASP.NET и многих других, поддерживаемых сервером. По этой причине они медленнее статических веб-сайтов, но обновления и взаимодействие с базами данных возможны. Динамические веб-сайты используются вместо статических веб-сайтов, поскольку обновления выполняются гораздо проще по сравнению со статическими веб-сайтами (где требуется изменение каждой страницы), в динамических веб-сайтах можно внести общее изменение один раз, и оно отразится на всех веб-страницах

1.4 Наиболее распространенные категории

В Интернете существуют различные типы веб-сайтов, мы выбрали несколько наиболее распространенных категорий, чтобы дать вам краткое представление:
Блоги

Такие сайты управляются одним человеком или небольшой группой людей и могут освещать любые темы — от моды до музыки, путешествий и фитнеса. В настоящее время ведение профессионального блога стало популярным способом заработка в интернете.

Электронная коммерция

Эти сайты широко известны как интернет-магазины. Они позволяют нам приобретать товары и осуществлять онлайн-платежи за них и услуги. Магазины могут работать как отдельные сайты. Портфолио

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

Брошюра

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

Новости и журналы

Эти веб-сайты не нуждаются в пояснениях, основная цель таких веб-сайтов — держать своих читателей в курсе текущих событий, в то время как журналы сосредоточены на развлечениях.

Социальные сети

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

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

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

II Что такое веб-дизайн? Основные аспекты

2.1 Веб-дизайн прошел долгий путь Что такое веб-дизайн?

Веб-дизайн прошел долгий путь

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

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

Веб-дизайн прошел долгий путь с момента появления первого сайта в 1991 году. Сегодня в интернете более миллиарда активных сайтов, поэтому неудивительно, что эта индустрия никуда не денется.

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

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

Когда речь заходит о веб-дизайне, многие думают только о том, как сайт выглядит. Но на самом деле это намного глубже. Это о создании такого опыта, в котором пользователи могут легко ориентироваться и находить то, что им нужно.

Хороший веб-дизайн — это когда все продумано до мелочей: от шрифтов до кнопок. Он делает взаимодействие с сайтом простым и приятным, что, в свою очередь, помогает бизнесам достигать своих целей. В конечном итоге это искусство — делать так, чтобы пользователи чувствовали себя на вашем сайте как дома.
Веб-дизайн часто представляет собой совместный процесс, сочетающий знания и инструменты из смежных отраслей, от статистики веб-дизайна до SEO-оптимизации и UX-дизайна. Веб-дизайнеры часто привлекают специалистов из этих областей, которые могут оптимизировать производительность и сосредоточиться на более широком процессе и результате.

2.2 Веб-дизайн против разработки веб-сайтов. Выбор инструментов

Веб-дизайн против разработки веб-сайтов
Первым шагом в нашем путешествии в мир веб-дизайна станет разъяснение разницы между веб-дизайном и разработкой веб-сайтов, поскольку эти два понятия тесно связаны и часто (ошибочно) используются как взаимозаменяемые:
Веб-дизайн охватывает визуальное оформление и практическое применение конкретного веб-сайта. Далее в этой книге мы более подробно рассмотрим веб-дизайн.
Разработка веб-сайта подразумевает создание и поддержание структуры веб-сайта и включает в себя сложные системы кодирования, которые обеспечивают правильное функционирование веб-сайта.

Выбор инструментов
Веб-дизайнерам необходим свой уникальный набор инструментов для создания сайта и веб-дизайна. Есть несколько ключевых моментов, которые определяют, какие типы инструментов вы будете использовать и на каком этапе они вам понадобятся. Вот несколько вопросов, которые стоит рассмотреть:

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