Проектирование и разработка Web-сайтов.

Тема 2

Основы веб-проектирования

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

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

С чего начинается проектирование web-сайта?

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

Проектирование Web-сайта начинается с определения целей и задач будущего сайта.

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

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

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

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

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

Модульная сетка любой web-страницы содержит, как минимум, два блока: для основного текста сайта и для меню. Если на странице нужны дополнительные элементы, например, еще одно меню, «подвал» («footer») или «хедер» («header»), то модульная сетка разбивается еще на несколько блоков.

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

В блоке «хедер» (заголовок) принято указывать название сайта, которое может быть выбрано в соответствии с названием компании или именем автора, а также при необходимости логотип сайта. Основной блок меню в европейских сайтах традиционно расположен слева, в соответствии с направлением письменности (слева-направо). Также основное меню может быть расположено сверху, под «хедером».

Если сайт рассчитан для просмотра на экранах с разным разрешением, то web-дизайн, как правило, выполняется «резиновым» или же центрируется по горизонтали.

Веб-дизайн — это не знание языка разметки документов HTML и не умение работать с графическими редакторами. Да, все это тоже необходимо, однако далеко не достаточно для того, чтобы создать сайт.

Веб-дизайн — это проектирование практичной, удобной, визуально привлекательной системы. Англоязычные разработчики используют термин «usability» — целая наука, которая рассказывает, как разрабатывается дизайн, ориентированный на пользователя — понятный и удобный.

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

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

Итак — какие модули должны присутствовать на главной странице сайта? Рассмотрим самый типичный вариант для сайта средней фирмы или вариант авторской страницы.

• Название (сайта или организации)

• Логотип (или любой графический знак, который уникальным образом идентифицирует проект или организацию)

• Навигационное меню (в простейшем случае это один блок, однако, их может быть несколько в рамках одного проекта и одной страницы проекта).

• Данные. Собственно содержание первой страницы.

• Второстепенные данные. Это может быть графический баннер партнерского проекта или текстовая информация о спонсорах…

Вы получили ряд прямоугольников, которые требуется разместить на странице (экране).

Конечно же, перед тем, как приступить к разработке, даже опытные дизайнеры обязательно уделяют время «серфингу» по интернету, наблюдают варианты уже реализованных решений, а новичку опыт «хождения и наблюдения» просто необходим…

Важно научиться быстро моделировать целостную систему из ваших информационных блоков. Проектировать модульную сетку.

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

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

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

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

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

Разработанный в графическом редакторе шаблон верстается в html-файл. При помощи тэгов языка HTML и таблиц стилей CSS задаются все необходимые параметры страницы: размещение элементов, цвет и размеры шрифтов, цвет фона и т.д.

Работа над шаблоном требует обязательного теста на кросс-браузерность, т.е. на совместимость с различными браузерами и их версиями. Разные браузеры могут по-разному интерпретировать код html, поэтому такое тестирование необходимо, чтобы избежать возможного «развала» дизайна.

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

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

Разработка дизайна сайта начинается:

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

с оценки целевой аудитории — потенциальных посетителей (клиентов) этого проекта.

Каждый разработчик должен потратить время на то, чтобы нарисовать «портрет своего посетителя» — кто он? Подросток, который ищет информацию о любимой рок-группе? Домохозяйка, которая пытается заказать в он-лайне понравившуюся соковыжималку? Пенсионер, для которого так важно отследить последние политические новости или программист, которому нужна документация о работе программы, студент, художник, менеджер?

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

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

Проектирование и разработка корпоративных web приложений / Habr

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

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

    Рассмотрим отдельно задачу построения иерархической структуры работ. Каждое web-приложение можно представить в следующем виде:

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

    Формально каждое web-приложение можно разбить на 3 взаимно независимые части.

1. Модуль, который исполняется WEB-браузером. Это приложение может быть написано на любом языке, который поддерживает браузер. Чаще всего используется язык JavaScript, как наиболее поддерживаемый и имеющий большую библиотечную поддержку. Это очень важно, так как позволяет существенно экономить бюджеты проектов.
2. Модуль, исполняемый на серверной стороне под управлением web-сервера. Это приложение может быть написано на любом языке, интерпретацию которого поддерживает выбранный Вами web-сервер. Последнее время, часто, в качестве языка программирования выбирается язык Java. Этот язык также имеет серьезную библиотечную поддержку.
3. База данных. В этой области так же существует достаточно широкий выбор. Есть промышленные базы данных, такие как Oracle, DB2, PostgreSQL. Есть легкие базы данных, такие как MySQL. База данных выбирается основываясь на целях и области решаемых задач.

      Возможные эталонные модели проектирования web-приложений.

    При построении архитектуры web — приложения необходимо максимально уменьшить зависимость между структурными единицами. В общем случае приложение состоит из трех структурных единиц.

1. Модуль, который работает под управлением браузера.
2. Модуль, который работает под управлением web-сервера.
3. База данных.

Эти структурные единицы порождают два вида связей.

1. Связь между браузером и серверной частью.
2. Связь между серверной частью и базой данных.

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

    Браузер — это прикладное программное обеспечение для просмотра web страниц.

    HTML – это стандартный язык разметки документов. Большинство современных web-браузеров способны интерпретировать язык HTML.

    Web сервер — это программное обеспечение, которое способно принимать HTTP запросы от клиентов, обрабатывать их и отправлять ответ в соответствии со стандартом протокола.

    База данных — это представленная в объективной форме совокупность самостоятельных материалов, систематизированных таким образом, чтобы эти материалы могли быть найдены и обработаны с помощью ЭВМ.(Wiki)

                                    Минимизация зависимостей

    Для минимизации зависимостей между «Браузером» и Web-сервером необходимо, чтобы язык разметки HTML был задействован только в браузере, а Web-сервер предоставлял интерфейс для получения необходимых данных для страницы.

    Для решения этой задачи необходимо:

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

    Наша диаграмма может быть преобразована в следующий вид:

    Далее «Браузер» преобразуется в UML диаграммы состояний. На этих диаграммах будет отражено, в каком случае вызывается тот или иной метод.

Данная модель достижима двумя путями

1. Программа выполняемая «Браузером» написана на JavaScript и общается с Web-Сервером через AJAX, получая ответы в соответствие с определенным протоколом.
2. «Браузер» интерпретирует только HTML код, а преобразования происходят посредством XSLT преобразований на стороне Web-Сервера.

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

                    Взаимодействие Web-Сервера и Базы данных

    Взаимодействие базы данных и web-сервера возможно организовать на основании двух принципиально разных сценариях:

1. Бизнес логика находится в базе данных.
2. Бизнес логика находится в коде web-сервера.

    В первом случае база данных хранит данные и предоставляет интерфейс доступа к данным:

1. Выборка данных — решается через представления.
2. Модификация данных — решается через хранимые процедуры.

    Программа для web-сервера является драйвером для доступа к бизнес-логике. Т.е она просто связывает Браузер с бизнес логикой, которая реализована в базе данных.

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

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

                                Иерархическая структура работ

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

1. Модуль для «Браузера».
2. Модуль для Web-Сервера.
3. Модуль для Базы данных.
4. Протокол обмена между модулем «Браузера» и Web-Сервером.
5. Интерфейс взаимодействия между модулем «Браузера» и Web-Сервером.
6. Интерфейс взаимодействия между Web-Сервером и Базой данных.

30 полезных сервисов для веб-разработчиков и дизайнеров v2 / Habr

Предыстория: я веду свой паблик ВК о веб-разработке, в связи с чем я каждый день имею дело с большим количеством материалов о веб-разработке. Однажды (3 месяца назад) мне пришла в голову идея опубликовать на хабре подборку «30 полезных сервисов для веб-разработчика». Тот пост набрал почти 100 000 просмотров, и мне приятно, что он оказался полезен сообществу. С тех пор у меня поднакопилось больше 30 новых сервисов, которые будут полезны как разработчикам, так и дизайнерам. Лучшие из них я собрал в этом посте. Осторожно, под катом много картинок!

1. Learn Angular — бесплатные интерактивные уроки по AngularJS.

2. Siteliner — инструмент для seo-анализа сайта. Поиск дублирующегося контента, неработающих ссылок и многое другое.

3. HTML Template Generator — больше подойдет для ленивых разработчиков, еще не использующих никакого boilerplate. Сервис позволяет сгенерировать базовую HTML-разметку документа: добавить нужные мета-теги, скрипты, либо целые бандлы, например, Twitter Bootstrap.

4. Shortcut Mapper — позволяет освежить в памяти горячие сочетания клавиш для программ Adobe Photoshop / Adobe Lightroom, Autodesk 3dsMax / Autodesk Maya, Blender и, с недавних пор, Sublime Text 2.

5. Bounce.JS — одновременно и сервис, и JS-библиотека для быстрого создания и редактирования CSS3-анимаций.

6. CSS Shrink — онлайн-сжатие вашего CSS-кода. Кстати, не только сжатие — можно вставить уродливо отформатированный код и получить на выходе красивый.

7. JS Nice — деобфускация и базовое документирование JS-скрипта. Вставляете непонятный код, сервис его анализирует и приводит в нормальный вид — добавляет отступы, пытается назвать переменные осмысленно в зависимости от контекста, добавляет комментарии с указанием переменных и их типов и т.д.

8. Web Designers Checklist — чек-лист по подготовке проекта к сдаче для веб-дизайнера. Затрагивает многие аспекты, такие как именование файлов и слоев в макете, подготовка типографики, структура файлов и так далее.

9. HTML Hint — похож на JS Hint. Проверяет разметку на соответствие заданным параметрам.

10. Lollytin — визуальный конструктор лэйаута страницы. Использует Bootstrap 3.

11. CSS Colours — красиво оформленный список CSS-цветов, которые могут быть использованы в виде слова, например color: blue.

12. Social Good Ipsum — сервис для генерации текста-рыбы.

13. Badge Service — генерация svg-значков в стиле github.

14. CSS Triggers — подробная информация обо всех CSS-свойствах: что они делают, как влияют на рендеринг страницы и тому подобное.

15. Blockspring — создание своих API, не требующих хранения данных в БД, а также коллекция уже созданных другими юзерами API.

16. Qwecode — кодирование / декодирование строк в различные форматы: BASE64, Binary, Unicode numbers и другие.

17. Loremflickr — это как placehold.it, но с котиками 🙂

18. CSS Shortand generator — собирает специфические свойства типа background-color в одно общее свойство.

19. PX to EM — удобный конвертер из PX в EM и обратно.

20. Frame — набор готовых мокапов для демонстрации дизайна / верстки / etc. Выбираете мокап, загружаете изображение, получаете на выходе готовую картинку с вашей работой.

21. CodeFights — задачки на знание языка JavaScript.

22. Cheetyr — шпаргалки по Photoshop, Illustrator, CSS, Git и Vim.

23. SnazzyMaps — различные цветовые схемы для Google Maps.

24. Plain Pattern — создание паттернов из SVG-изображений.

25. Sass to Scss — конвертер из Sass в Scss.

26. Gitter — удобный чат, имеющий хорошую интеграцию с github’ом.

27. Fibonacci — визуальный конструктор flexbox-лэйаута.

28. Project Parfait — инструмент для быстрой нарезки .psd-макета, и вообще для ускорения верстки в целом. Позволяет узнавать расстояние между слоями, размер разных слоев и многое другое.

29. The Code Player — онлайн-уроки по HTML / CSS / JS в формате живого кодинга. Можно записывать свои уроки.

30. Типограф Муравьева — доступен также и в качестве PHP / Python библиотеки. Позволяет правильно оформить текст.

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

Курс рассчитан на начальный уровень подготовки. Даже если вы никогда не работали в Adobe Photoshop и не верстали на HTML, после прохождения курса вы сможете создать полнофункциональный сайт (десктопную и мобильную версию) с нуля и «под ключ». В рамках курса вы изучите не только внешнюю сторону создания веб-сайтов (frontend), но и серверную часть (backend).

В процессе обучения вы изучите основные технологии создания современных и успешных веб-сайтов: научитесь разрабатывать макеты в таких популярных программах как Adobe Photoshop и Adobe Illustrator, получите полное представление о технологии верстки веб-страниц (frontend), применяя язык разметки гипертекста HTML5 и каскадные таблицы стилей CSS3, научитесь динамически управлять элементами веб-страниц благодаря языку программирования JavaScript, получите базовое представление о платформе NodeJS и научитесь работать с менеджером задач Gulp, а также настраивать его для выполнения ряда задач (hot-reloading и транспиляция файлов).

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

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

Изучая серверную часть (backend) разработки сайтов, вы будете работать с системой виртуализации docker. Вы научитесь создавать собственные образы, управлять контейнерами и получите базовый уровень знаний для работы с консолью unix-систем. Внутри docker-контейнеров научитесь разворачивать стек технологий для веб-разработки на языке программирования PHP с использованием БД MySQL. Научитесь организовывать взаимодействие между контейнерами как на уровне docker, так и средствами языков программирования (API).

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

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

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