Обзор веб-ресурсов по веб-дизайну и веб-разработке

ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ОБРАЗОВАНИЯ

«МОРДОВСКИЙ ГОСУДАРСТВЕННЫЙ ПЕДАГОГИЧЕСКИЙ УНИВЕРСИТЕТ ИМЕНИ М. Е. ЕВСЕВЬЕВА»

Физико-математический факультет

Кафедра информатики и вычислительной техники

Дисциплина «Программирование»

Реферат на тему:

«Обзор веб-ресурсов по веб-дизайну и веб-разработке»

Выполнила:

студентка группы МДМ-216

И. С. Филимонова

Проверил:

доцент кафедры информатики и

вычислительной техники

Т. В. Кормилицына

Саранск 2021

Содержание

Введение 3

Классификация веб-страниц 4

Web-дизайн и браузеры 6

Веб-ресурсы 11

Заключение 16

Введение

World Wide Web (WWW)- это большая компьютерная сеть, которая содержит огромное количество сайтов, на которых размещена всевозможная информация. Доступ к этой информации люди получают за счет технологии Internet. В наше время Интернет стал неотъемлемой частью жизни всего человечества. Доступ к нему имеют миллионы людей по всей планете. Каждый день создается большое количество Web-сайтов, которые с огромной скоростью расширяют просторы «мировой паутины». Для путешествия в среде WWW используются специальные программы – Web-браузеры. Вся информация в Web-браузере отображается в виде Web-страниц, которые являются основным элементом сайтов WWW.

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

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

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

Классификация веб-страниц

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

По поведению документа в браузере пользователя, различают:

Статические страницы – означает, что страница выглядит всегда одинаково, на зависимо от действий пользователя. Например, меню организованно ссылками на отдельные страницы, а не выпадающим списком.

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

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

По способу создания документы делят опять на статические и динамические.

Статическими называют страницы, если они лежат на сервере в html виде. А динамическими называют те, которые генерируются "на лету" по запросу браузера.

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

Если ваш сайт содержит часто меняющийся контент (content – информация на сайте), то вам на помощь придут скрипты, выполняющиеся на сервере. И это ключевое отличие этих скриптов, от описанных ранее (тех, что написаны на JavaScript). Работает это следующим образом:

1) браузер запрашивает у сервера документ;

2) сервер определяет, что документ является скриптом и запускает его на выполнение;

3) скрипт генерирует html страницу;

4) сервер отправляет сгенерированную страницу браузеру, так что тот и не догадывается, что на сервере отработал скрипт.

Надо сказать, что сейчас все больше набирает силу гибридная система. Название у нее, как у голландского футбольного клуба - AJAX, что означает: Asyncronous JavaScript And XML . Эта технология позволяет скриптам на JavaScript обращаться к какому либо скрипту на сервере и получать информацию с сервера. Это в свою очередь, дает пользователю гибкость и позволяет перезагружать только часть содержимого страницы, а не всю ее полностью.

Web-дизайн и браузеры

Многие Web-дизайнеры сходятся во мнении, что одна из главных проблем Web-дизайна – многообразие браузеров и платформ, каждая из которых по-разному поддерживает HTML и сценарии. С выпуском каждого нового браузера улучшаются их характеристики и возможности, но это не означает, что более ранние версии при этом исчезают. В большинстве своем люди не склонны гнаться за новейшим и лучшим. Одни довольствуются тем, что у них имеется, а другие, вероятнее всего, работают на компьютерах фирм или учреждений, которые выбрали браузеры за них.

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

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

Браузеры Netscape Navigator и Microsoft Internet Explorer. На рынке доминируют два основных браузера: Netscape Navigator и Microsoft Internet Explorer. Вместе они, включая все их версии, представляет примерно 90 % (или более) используемых сегодня браузеров.

Эти два браузера конкурируют между собой за господство на рынке. Результатом их борьбы стала коллекция фирменных HTML-тегов, а также несовместимые реализации различных технологий (печально известный Dynamic HTML, а также JavaScript и Cascading Style Sheets – каскадные таблицы стилей). С другой стороны, конкуренция между Netscape и Microsoft в целом способствовала более быстрому развитию среды Web.

Большинство Web-авторов в своей работе ориентируются на Navigator и Internet Explorer, поскольку они занимают львиную долю рынка. Тем не менее, существует ряд других браузеров, которые вы можете принимать во внимание.

В версии Internet Explorer 4.0 для компьютеров Macintosh отсутствует значительная часть функциональных возможностей версии, созданной для Windows, поэтому использование ряда особых возможностей версии 4.0 может исключить из игры некоторых пользователей.

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

Несмотря на заявления Microsoft, что DHTML поддерживается всеми платформами, он особенно ненадежен на компьютерах платформы Масintosh.

Браузеры America Online. Пользователи America Online (AOL) используют один из семи возможных браузеров (в зависимости от платформы и версии программного обеспечения AOL), некоторые из них обеспечивают только самую минимальную поддержку HTML.

Последняя версия America Online для PC – это версия 3.0, использует адаптированную версию браузера Microsoft Interne Explorer 3.0. Тем не менее, не всегда можно полностью положиться на эту версию так же, как на стандартный вариант MS Internet Explorer 3.0. (Функциональность особенно ограничена для пользователей компьютеров Macintosh). Многие разработчики Web не раз ужасались, увидев дизайн своего сайта (который великолепно работал в большинстве основных браузеров), после того как он был запущен в системе AOL и отображен одним из их браузеров.

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

Кроме того, некоторые технологии, такие как Java и Cascading Style Sheets (каскадные таблицы стилей), не доступны для пользователей Windows 3.0 (примерно 40 % пользователей AOL). Владельцы компьютеров Macintosh не смогут использовать JavaScript и ряд других возможностей (примерно 8 % пользователей).

К счастью, создан специальный сайт в помощь тем Web-дизайнерам, которые стремятся сделать свои страницы интересными и доступными для пользователей AOL. Особого внимания заслуживает таблица браузеров, где вы найдете специальный список для каждого из браузеров (по версиям и платформам), перечень технологий и поддерживаемых функций, а также процент сбоев для каждого из браузеров. (Адрес сайта AOL для Web-дизайнеров: http://webmaster.info.aol.com).

WebTV. WebTV приводит в наши квартиры Web через обыкновенный телевизор с пультом дистанционного управления (также, по желанию, можно использовать клавиатуру). Для просмотра Web-страниц WebTV использует собственный специализированный браузер. Он осуществляет синтаксический анализ в соответствии – со стандартом HTML 3.2, но не предоставляет возможностей отображения фреймов, Java, JavaScript, ActiveX или любого другого формата, который требует встраиваемых приложений (за исключением встроенных Shockwave и RealAudio 3.0). Также создано много новых фирменных HTML-тегов, которые используются только в WebTV.

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

Opera. Opera – это маленький и простенький браузер, созданный норвежской компанией Opera Software в Осло. Этот браузер обладает исключительно малым временем загрузки и минимальными требованиями к объему диска. Достоинством Opera является полное соответствие стандартам HTML. Неточности в написании тегов (например, пропущенные закрывающие теги, неправильное вложение и т. д.), которые пропускают более солидные браузеры, не будут правильно отображаться этим браузером. Opera 5.0 поддерживает Java, каскадные таблицы стилей и DHTML.

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

Lynx. Lynx – это распространяемый бесплатно браузер, обеспечивающий просмотр только текста, предлагает вам быстрый и надежный доступ в Web. Он заслужил известность как наименьший общий знаменатель стандарта, пригодный для тестирования Web-страницы по базовым функциональным характеристикам. Несмотря на простоту, этот браузер не устаревает. Lynx постоянно совершенствуется и модернизируется. Сейчас он обеспечивает поддержку таблиц, форм и даже JavaScript!

Люди действительно используют Lynx, поэтому не стоит удивляться, если клиент закажет разработку сайта для Lynx. Этот браузер также важен для инвалидов по зрению: они используют Lynx вместе с речевыми устройствами.

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

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

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

Веб-ресурсы

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

Конструктор сайтов Wix:

1) тип сайта – все типы сайтов;

2) бесплатный тариф (есть, с рекламой и ограничениями по количеству сайтов, дисковому пространству и объему передаваемого трафика);

3) платные тарифы – от 90 до 1000₽ в месяц;

4) шаблонов – более 500;

5) сложность освоения – очень простой.

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

Подходит для создания сайта-визитки, блога, лендинга и интернет-магазина.

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

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

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

• наличие бесплатного тарифного плана;

• гарантированный возврат средств в течение 14 дней;

• специализированные подписки и функционал для развертывания коммерческих и торговых сайтов;

• большая коллекция шаблонов и приложений;

• предоставление бесплатного домена сроком на 1 год на большинстве тарифов;

• SEO-мастер – инструмент для автоматической поисковой оптимизации сайта;

• расширенные настройки SEO – в панели управления сайтом можно отредактировать файлы robots.txt, Sitemap.xml, настраивать редиректы, метатеги. А также применять шаблоны для быстрой поисковой оптимизации нескольких веб-страниц;

• Wix ADI – быстрое создание ресурсов с помощь искусственного интеллекта;

• Ascend – интегрированный сервис для продвижения с помощью email-рассылок, онлайн-чата, форм для сбора заявок и т.д;

• встроенная аналитическая платформа – в ней агрегируются данные по трафику, действиям клиентов и продажам;

• средство для приема платежей;

• встроенная CRM система;

• редактор для создания и публикации постов в социальных сетях.

Недостатки: ограниченные лимиты бесплатного тарифного плана – по объему передаваемого трафика и дисковому пространству.

Конструктор сайтов Nethouse.

Конструктор сайтов, создатели которого сделали упор на простоте функционала. В бесплатном тарифном плане сервис предоставляет SSL-сертификат и домен третьего уровня для размещения сайта. А также несколько десятков шаблонов с адаптивным дизайном.

Подходит для создания сайта-визитки, блога, интернет-магазина и лендинга.

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

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

• наличие бесплатного тарифного плана;

• 10 дней бесплатного доступа – предоставляется после оплаты тарифного плана;

• шаблоны с адаптивным дизайном;

• SSL-сертификат предоставляется во всех тарифных планах;

• встроенный функционал для интернет-магазина (список клиентов, управление товарами, генератор промокодов и т.д.);

• нативный конструктор почтовых рассылок;

• тарификация без ограничений по дисковому пространству и объему передаваемого трафика;

• возможность SEO-настройки шаблонов.

Недостатки:

• небольшая коллекция шаблонов;

• ограниченные возможности конструктора – отсутствие дополнительных элементов для добавления на страницы;

• малофункциональный инструментарий для интернет-магазина;

• ограниченное количество виджетов для расширения функционала создаваемого сайта.

Конструктор сайтов Ukit.

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

Подходит для создания сайта-визитки, лендинга, блога и интернет-магазина.

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

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

• огромная коллекция шаблонов – более 350;

• тестовый период на 14 дней;

• большой набор встроенных шрифтов;

• возможность создания собственной цветовой палитры;

• инструмент оценки SEO-оптимизации сайта;

• возможность самостоятельного редактирования кода;

• автоматическое и ручное сохранение резервных копий – до 10 версий сайта;

• коллекция всплывающих окон для вставки на страницы веб-ресурса;

• визуальный конструктор с поддержкой функции перетаскивания элементов дизайна;

• безлимит на количество SMS-уведомлений о заказе клиентами обратного звонка.

Недостатки:

• в минимальном платном тарифе присутствует логотип Ukit;

• отсутствие нативного функционала для интернет-магазинов;

• тарификация в долларах;

• интеграция с ограниченным количеством сторонних сервисов.

Конструктор сайтов Tilda.

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

Подходит для создания лендинга, блога, сайта-визитки и небольшого интернет-магазина.

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

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

• наличие бесплатного тарифного плана;

• большая коллекция блоков – более 450;

• более сотни шаблонов страниц, оптимизированных под мобильные устройства;

• встроенная CRM система, которая доступна даже в бесплатной подписке на конструктор;

• возможность вставки пользовательского HTML-кода;

• расширенные возможности SEO-оптимизации;

• загрузка пользовательских шрифтов;

• импорт и экспорт данных через нативный API;

• встроенный редактор для создания почтовых рассылок.

Недостатки:

• ограниченные возможности редактирования тематических шаблонов;

• англоязычный интерфейс редактора;

• скудные возможности бесплатного тарифного плана (всего 50 Мб дискового пространства).

Заключение

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

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

Человек, создающий Web-страницу, соединяет свои знания и навыки со своим творческим потенциалом. Умение творить – вот что отличает настоящего Web-дизайнера. Для того чтобы создать Web-страницу, которая бы радовала глаз, нужно сочетать в себе качества художника и программиста.