Основные этапы планирования Web-сайта
Г Л АВ А 2
Принципы построения Web-сайтов
Впредыдущей главе мы знакомились с принципами работы Интернета и WWW, Web-страницами и Web-сайтами, интернет-адресами, хостинг-провайдерами и Web-редакторами. То есть с теорией.
Вэтой главе мы начнем заниматься практикой. Но практика эта будет особого рода. Сейчас мы не будем создавать Web-страницы и Web-сайты. Мы займемся планированием структуры нашего будущего Web-сайта как совокупности Webстраниц: определим, какие Web-страницы он будет включать и как они будут связаны друг с другом.
Вообще, разработка любого Web-сайта начинается с этапа планирования. Это справедливо и для простейшей домашней Web-странички, и для гигантского портала транснациональной суперкорпорации, такой как Intel или Coca-Cola. Поэтому, начиная планирование будущего Web-сайта, лучше вообще выключить компьютер, чтобы не возникло соблазна сразу же засесть за создание Web-страниц. На этом этапе нам понадобятся только карандаш, бумага и ластик или, если кто-то все-таки предпочитает компьютер, программа текстового редактора.
Итак, о чем нужно подумать перед началом работы над Web-сайтом?
1.Прежде всего, четко определить назначение Web-сайта. Что он должен делать: рассказывать о ком-либо или о чем-либо, привлекать клиентов, помогать решать какие-то проблемы, просвещать или развлекать. В зависимости от предполагаемого назначения Web-сайта его структура может сильно различаться.
2.Определить, какая конкретно информация должна присутствовать на Web-сайте, а какая — не должна. Здесь главный принцип — ничего лишнего, только то, что действительно нужно потенциальным посетителям.
3.Собрать всю необходимую информацию. И сделать это прямо сейчас, чтобы потом не работать по принципу «хватай мешки — вокзал тронулся». Все тексты, изображения, файлы, которые мы намерены выложить в Сеть, должны быть на
studfile.net
Что такое веб-план? | — 2019
Каждый веб-план должен соответствовать потребностям и ситуации. Вы должны быть в состоянии настроить свой веб-план, чтобы он соответствовал вашей компании, а не следовать рецепту, чтобы построить план куки-резака. Тем не менее, есть стандартные компоненты, с которыми вы просто не можете обойтись.
- Анализ рынка:
- Стратегия сайта: Это должно включать стратегическую направленность, миссию и цели, стратегию развития и стратегию веб-маркетинга.
- Прогноз продаж (или преимуществ):
- Бюджет расходов: Это должно содержать достаточно подробностей для отслеживания расходов по месяцам и последующего анализа плана-фактического. Обычно план также включает конкретные планы веб
ru.mfginvest.com
Планирование Web-сайта
В зависимости от стиля жизни, социального статуса, ресурсов (как финансовых, так и информационных), потребитель может задаться целью создания собственного интернет-сайта. Это может быть как сайт о компании, о самом потребителе, так и вплоть до любимого домашнего животного и т.д.
На этапе информационного поиска потребитель может двигаться в поиске бесплатного хостинга, где можно самостоятельно при помощи базового инструментария составить страницу.
Сайт ориентирован на ту часть целевой аудитории, которойнужна информация. В первую очередь на начинающих пользователей Интернета, заинтересованных в изучении фундаментальных технологических основ Web- дизайна. Предполагается, что пользователь владеет основными навыками работы в Интернете, взаимодействия с приложениями Microsoft Windows, настройки операционных систем, включая изменения конфигурации системных установок. Может выполнить установку и удаление программного обеспечения. Первоначальных знаний в области Web-дизайна и программирования не требуется. Весь спектр информации по созданию сайтов, включая дизайн, разработку стиля и графики, помогут разработать стиль сайта, создать графические изображения и качественно оформить его внешний вид.
Сведения такого рода могут быть весьма полезными при проектировании Web-сайтов и планировании рекламных кампаний в Internet.
Каждый прогрессивный пользователь старается как можно скорее самостоятельно соорудить такую страницу, чтобы оставить информацию или просто заметку о своем пребывании в сети.Особенно это может быть интересно тем пользователям, которые обычно пользуются шаблонами для создания своих персональных страниц, и могут понятия не иметь о том, как всё-таки нужно их писать.
Кто знает, насколько полезной такая информация окажется для кого-либо.
Структура сайта должна быть в первую очередь удобна. Психологи утверждают, что человек, впервые попавший на заглавную страницу сайта, принимает решение около 8 секунд.
Основная функция сайта — удовлетворять информационные запросы клиента или развлекать его, поэтому если пришедший по рекламе (ссылке) посетитель не находит ничего необходимого или интересного за первые 8 секунд, то он покидает этот сайт навсегда.
Все разделы сайта и информация должны быть легко доступны, а навигация эргономична. Позвольте зашедшему самостоятельно регулировать глубину просмотра — не вываливайте всю информацию сразу.
Кроме того, очень важно, чтобы сайт имел удобное название. Существует несколько неписаных правил присвоения доменного имени. Во-первых, по возможности оно должно ассоциироваться со всей деятельностью отрасли (например, автомобили — www.avto.ru). Во- вторых, доменное имя должно быть обязательно куплено. В-третьих, следует избегать длинных и сложных названий. Доменное имя должно легко читаться и произноситься. В-четвертых, признаком хорошего тона считаются имена второго уровня (например, www.имя.ru, www.имя.com).
Размещение полезной информации на своем сайте может решить сразу несколько задач: увеличение частоты посещений; создание положительного имиджа; привлечение посетителей через поисковые системы.
При разработке Web-страница должна быть доступна (и правильно отображаться) для максимально возможного числа пользователей. Идея проста: необходимо определить наиболее часто используемое разрешение дисплея и разработать страницу таким образом, чтобы страница гарантированно заполняла все рабочее пространство.
Все большее число разработчиков считает стандартным разрешение 800×600. И совсем единицы разрабатывают страницы для еще более высоких разрешений. Конечно, ваше решение будет, в первую очередь, зависеть от аудитории. Например, если сайт ресурсов для дизайнеров графики, то считаем, что они имеют дисплеи, по крайней мере, с разрешением 800×600 или выше, в соответствии с чем и разрабатывается страница. Если сайт предназначен специально для WebTV или какого-то другого устройства отображения, следует ориентироваться на это конкретное устройство.
Размер файла графического изображения должен быть минимально возможным! Нужно максимально уменьшить объёмы строк и оптимизировать всё изображение для более быстрой загрузки. Создание изображений, предназначенных для передачи по сети, возлагает ответственность на разработчиков серьезно относиться к проблеме времени загрузки.
Все страницы должны быть оформлены в одном стиле: использовать не более трёх основных шрифтов, включая шрифты, применяемые при создании графических объектов. Использовать три основных цвета, можно использовать оттенки. Текст не должен напрягать зрение, глаза не должны уставать.
Схема сайта
studfile.net
Подбор и планирование команды веб-студии на старте / WebCanape corporate blog / Habr
Всем привет. Если вы читаете этот материал, значит вы уже ознакомились с предыдущими. Две недели назад мы поставили задачу построить прибыльную веб-студию в сегменте недорогих сайтов и через 3 года выйти на хорошую прибыль. Мы поставили цель и проработали типовой бизнес-план. Думаю, большинство читателей уже успели ознакомиться с ним. Спасибо всем, кто прислал свои комментарии и замечания. Сегодня поговорим о подборе команды…
Прежде чем приступить к заявленной теме статьи, позволю себе небольшое отступление, связанное с отрицательным доходом в бизнес-плане в первый год работы. Да, чтобы зарабатывать, нужно вложить деньги. Не начинайте этот бизнес, если у вас нет хотя бы половины суммы от той, что нужно вложить. Если у вас не будет резерва денег, вы не сможете следовать заложенной стратегии, а это очень плохо. Первый год вы должны нарабатывать клиентскую базу, довольную клиентскую базу. Вы будете работать в минус, но это нормально. Зато четко выдержите стратегию, которая скоро позволит изменить ситуацию наоборот.
Планируем стартовую команду
Это важный этап. Посвящу этому значительную часть материала. На старте вам нужно два человека. Менеджер по работе с клиентами и менеджер проектов. Разделение нужно делать сразу. В противном случае процесс реализации бизнес-плана затянется, и вы начнете терять интерес. Командой из двух человек необходимо проработать минимум 3-4 месяца. Это будет классное, но сложное время.
Менеджер по работе с клиентами (менеджер по продажам)
Обязательно с опытом продажи проектов по разработке сайтов и чувством прекрасного. Очень желательно техническое или финансовое образование, возраст от 27 лет. Выбирайте этого человека, ориентируясь на работу с ним, как минимум, на три года. Именно это время вы будете строить систему продаж и систему взаимоотношений с клиентами. Соответственно, этот человек будет играть ключевую роль. Через три года на его место можно будет сажать почти любого адекватного менеджера. Техническое образование нам необходимо, чтобы мыслить категориями бизнес-процессов в рамках комплексного системного подхода, который мы будем описывать во всех последующих статьях. Если вы понимаете, о чем я говорю, значит быстро сможете найти такого человека. Если нет, вот несколько критериев, которые помогут с большей вероятностью сделать правильный выбор.
- Мотивационный тип «Инструментальный»
- Поведение в конфликте «Компромисс»
- Профессиональная мотивация «Высокая»
- Психоэмоциональное выгорание «Низкое»
- Коммуникативные способности «Высокий уровень»
- Организаторские способности «Высокий уровень»
- Уровень IQ от 100
Задачи:
— Привлечение клиентов;
— Обработка входящих заявок, консультирование клиентов;
— Сопровождение сделок в CRM до момента предоплаты;
— Подготовка КП, договоров и выставление счетов;
— Анализ воронки продаж;
Ответственность:
— продажи согласно бизнес-плану (обеспечить приход денег)
— соответствие клиентов вашей стратегии (не брать всех подряд)
Менеджер проектов
Техническое образование очень приветствуется, т.к. нужна ориентация на результат, а не процесс. Умение четко разговаривать по телефону, писать письма и грамотные тексты на сайт, работать с CMS, работать с изображениями в графических редакторах, знать HTML, базовые основы SEO. Короче вам нужен менеджер-вебмастер универсал с опытом в сфере веб-разработки.
- Мотивационный тип: Профессиональный (ПР)
- Поведение в конфликте: Сотрудничество,
- Профессиональная мотивация «Высокая»
- Психоэмоциональное выгорание «Низкое»
- Коммуникативные способности «Средний уровень»
- Организаторские способности «Средний уровень»
- Уровень IQ от 90
Первые несколько месяцев, все, что нужно будет делать менеджеру проектов — это быстро и качественно конфигурировать сайты под клиента штатными средствами CMS, не занимаясь дополнительным программированием и версткой. Да, нужно будет брать готовые решения, шаблонные решения и уметь быстро, профессионально их настраивать. Если потребуются дополнительные работы по программированию, дизайну или верстке — привлекайте фрилансеров или разработчиков CMS. Но лучше, если этих дополнительных работ не будет первое время. 90% задач клиента можно решить базовым набором функционала CMS.
Задачи
— Штатными средствами системы управления выполнить то, что наобещали клиенту в договоре;
— Коммуникации с клиентом на протяжении всей работы по проекту;
— Учет рабочего времени по проектам;
Ответственность
— Выполнение сроков, укладываясь в бюджет
— Довольный клиент (получен хороший отзыв от клиента)
Вот такой командой вам нужно поработать 3-4 месяца. Отработайте качественную связку «продажи — запуск сайта в минимальной конфигурации», не отвлекаясь на индивидуальные технические доработки. Будете отвлекаться — отойдете от последовательного выстраивания системы, решая вместо этого непредвиденные проблемы. Не исключаю, что уже на старте у вас может быть дизайнер и программист (если финансы позволяют). Уметь быстро выстроить коммуникации с фрилансером или разработчиком на удаленке, на первых порах более важно, чем решать ненужные проблемы командообразования и мотивации.
Дальнейший рост команды
Далее команда будет расти примерно в следующей последовательности. Приходит дизайнер и отвечает за внешний вид сайтов в рамках ограничений шаблонов готовых решений. Чуть позже в команду приходит верстальщик, способный верстать контент и изменять шаблоны вывода информации на сайте. Это даст вам гибкость в работе с клиентами и немного разгрузит менеджера. У него в этот момент уже будет приходить в работу 5 (!) новых сайтов в месяц. Дальше берем программиста для решения нестандартных «хотелок» клиентов (калькуляторы, модификации каталогов, нестандартные импорты/экспорты и пр). Это позволит вам работать, увеличить среднюю сумму чека и не отказываться от ряда проектов.
Следующим этапом начинается последовательно масштабирование команды разработчиков и менеджеров проектов. С ростом команды рекомендую добавлять отдельно соответствующие строчки в бизнес план по мере работы, чтобы иметь на руках более точные цифры по затратам.
Для примерного расчета количества человек, необходимого для обеспечения покупательского спроса, можно будет использовать табличку, которую я выложу позже. Вбивайте в нее нормативы по проектам, прогнозируемое количество продаж и смотрите сколько нужно каких людей.
Но прежде чем выложить табличку, необходимо более подробно разобрать принцип формирования продуктов и расчет их рентабельности. Это мы сделаем в следующей статье.
В рамках данного материала скачайте табличку учета работы команды. Она нам понадобится, чтобы вести статистику по сотрудникам. Первое время — это дополнительная нагрузка на вас, но позже, когда сотрудников станет много и нужно будет внедрять систему роста, градации, мотивации, — она приобретет важное значение.
Как узнать, чем именно мотивированы сотрудники в настоящее время, внепланово распишу в одной из ближайших статей.
В заключении еще раз про дорогие заказы
Я с этого начал и этим хочу закончить данный материал. Почему на первых парах нельзя браться за дорогие заказы? Первое — это сроки. Чем сложнее и дороже проект, тем выше вероятность затягивания сроков сдачи проекта (особенно в начале пути). Затягивание сроков означает — задержка выплат. А это уже повышает риски потерять время и не получить довольного клиента. Соответственно вы отклоняетесь от нашей стратегии и рискуете завалить весь проект 🙂 Именно поэтому мы начинаем с небольшой команды и готовых типовых решений сайтов, которые можно быстро сделать и запустить.
По всем вопросам можете писать в комментариях к постам. Все новые материалы будут появляться на Хабре. Подписывайтесь на наш блог, делитесь опытом.
Василий Чуранов и команда WebCanape
habr.com
№ занятия | Наименование разделов профессионального модуля, тем и занятий по МДК | Календарные строки | Обязательная учебная нагрузка | Коды формируемых компетенций | Материальное и информационное обеспечение занятий (№ позиций из таблиц 2а, 2б, 2в) | Внеаудиторная самостоятельная работа обучающихся | Формы и методы контроля | Ф.И.О. преподавателя (ей)* | |||||||||||||||||||||||||||||||||||||||||
Кол-во часов | Вид занятия | ОК | ПК | Вид задания | Информационное обеспечение (№ позиций из таблиц 2б,2в) | Кол-во часов | |||||||||||||||||||||||||||||||||||||||||||
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | |||||||||||||||||||||||||||||||||||||
Раздел 1. Основы web—дизайна и программирования. | |||||||||||||||||||||||||||||||||||||||||||||||||
Тема 1.1. Распределенная обработка информации. | |||||||||||||||||||||||||||||||||||||||||||||||||
Варианты архитектурного построения систем распределенной обработки информации. | Сентябрь | 2 | Урок | ОК1.-ОК3. | — | Подготовка доклада по теме «Архитектуры распределённой обработки информации» | ОИ1 стр. 14-16 | 1 | Устный опрос | ||||||||||||||||||||||||||||||||||||||||
Распределенная обработка информации на базе механизма удаленного вызова процедур. | Сентябрь | 2 | Лекция | ОК4._ОК6 | — | Изучение материалов учебника «Требуемые свойства систем распределенной информации» | ОИ1 стр.:16-20 | 1 | Письменный опрос | ||||||||||||||||||||||||||||||||||||||||
Особенности интеграции приложений в сети Интернет. | Сентябрь | 2 | Урок | ОК7.-ОК9. | — | Изучение материалов учебника «Объектно-ориентированный подход к организации распределенной обработки информации». | ОИ2:стр. 202-205 | 1 | Устный опрос | ||||||||||||||||||||||||||||||||||||||||
Тема 1.2.Основы Интернет. | |||||||||||||||||||||||||||||||||||||||||||||||||
История возникновения Интернет, WorldWideWeb (WWW), и «стандартов Web». | Сентябрь | 2 | Урок | ОК1.-ОК3. | — | 1.1 | Создание кроссворда по теме «Интернет и Рунет. Различные типы сайтов: визитки, корпоративные сайты», «Интернет — магазины, форумы, чаты, тематические сайты, порталы», «Средства коммуникации: QIP, Mail.Ru Агент, Skype»». | ОИ 2 стр. 10-11ОИ 3 стр. 31-32, ДИ1 стр. 59-62 | 1 | Устный опрос | |||||||||||||||||||||||||||||||||||||||
Стек протоколов TCP/IP. | Сентябрь | 2 | Урок | ОК4.-ОК6 | — | 1.2 | Создание сравнительной таблицы по теме»Статистика браузеров.Windows Internet Explorer 7.0,Opera, MozillaFirefox, Safari.Сравнение скорости браузеров». | ДИ2 стр. 257-258 | 1 | Устный опрос | |||||||||||||||||||||||||||||||||||||||
Клиент-серверные технологии Web. | Сентябрь | 2 | Лекция | ОК4.-ОК6 | — | Выполнение индивидуальных заданий по теме «Персональные блоги», «Тематические блоги. Социальные сети», «Коллективные блоги с элементами социальных сетей». | ДИ2 стр. 10-14 | 1 | Письменный опрос | ||||||||||||||||||||||||||||||||||||||||
Серверные web-приложения. Web-сервисы. | Сентябрь | 2 | Лекция | ОК4._ОК6 | — | Разработка семантической карты по теме «Безопасность в Интернете», «Скрытие IP-адреса, веб — анонимайзеры», «СистемаTor. Steganos Internet Anonym VPN»,«Прокси-сервер», «Сервис Whois»,«Анонимная отправка электронной почты». | ДИ2 стр. 15-17, | 1 | Письменный опрос | ||||||||||||||||||||||||||||||||||||||||
Тема 1.3. Основы проектирование сайтов. | |||||||||||||||||||||||||||||||||||||||||||||||||
Планирование Web-сайта. | Сентябрь | 2 | Урок | ОК1.-ОК3. | — | Изучение материалов учебника «Схема сайта» | ОИ 2 стр. 14-17 ДИ3 стр. 15-16 ОИ3 стр. 32-36 | 1 | Устный опрос | ||||||||||||||||||||||||||||||||||||||||
Элементы Web-страниц. | Сентябрь | 2 | Урок | ОК7.-ОК9 | — | Изучение материалов учебника» «Именование страниц» | ОИ3 стр. 36-39 ДИ4 стр. 12-15 | 1 | Устный опрос | ||||||||||||||||||||||||||||||||||||||||
Разработка структуры и дизайна сайта. | Сентябрь | 2 | ПЗ№1 | ОК4._ОК6 | — | Изучение материалов учебника» «Разработка логической и физической структуры сайта» | ДИ4 стр. 16-19 ДИ3 стр. 37-40 | 1 | Контроль выполнения практических заданий | ||||||||||||||||||||||||||||||||||||||||
Тема 1.4.Введение в Web—дизайн. | |||||||||||||||||||||||||||||||||||||||||||||||||
Композиционные принципы, законы, средства. | Сентябрь | 2 | Урок | ОК1.-ОК3. | — | Разработка семантической карты по теме «Монохроматические цветовые схемы», «Дополнительные цветовые схемы». | ДИ4 стр. 20-22 | 1 | Устный опрос | ||||||||||||||||||||||||||||||||||||||||
Модульные сетки их применение в дизайне. | Сентябрь | 2 | Лекция | ОК7.-ОК9 | — | Разработка семантической карты по теме «Триадические цветовые схемы», «Тетраэдрические цветовые схемы». | ДИ4 стр. 22-26 | 1 | Устный опрос | ||||||||||||||||||||||||||||||||||||||||
Поэтапное создание дизайн – макета сайта. | Сентябрь | 2 | Урок | ОК4._ОК6 | — | Изучение материалов учебника «Определение гарнитуры шрифта для заголовков, подзаголовков и основного текста. Некоторые секреты выравнивания» | ОИ 2 стр. 21-25;202-204 | 1 | Устный опрос | ||||||||||||||||||||||||||||||||||||||||
Раздел 2. Основы проектирования сайтов и технологии проектирования. | |||||||||||||||||||||||||||||||||||||||||||||||||
Тема 2. Элементы языка гипертекстовой разметки HTML. | |||||||||||||||||||||||||||||||||||||||||||||||||
Роль языка гипертекстовой разметки HTML в построении сайтов глобальной компьютерной сети Internet | Сентябрь | 2 | Урок | ОК1.-ОК3. | — | Подготовка доклада по теме «Справочная информация SGML для HTML» | ДИ3 стр. 7-11 | 1 | Устный опрос | ||||||||||||||||||||||||||||||||||||||||
Структура HTML-документа и элементы разметки заголовка документа | Сентябрь | 2 | Лекция | ОК4._ОК6 | — | Подготовка доклада по теме «Формат и структура HTML-документов» | ОИ 2:стр.26-32 | 1 | Письменный опрос | ||||||||||||||||||||||||||||||||||||||||
Взаимосвязи документов: элемент LINK. | Сентябрь | 2 | Урок | ОК1.-ОК3. | — | Изучение материалов учебника «Базовые типы данных HTML» | ОИ 2 стр. 86-87 ДИ 3 стр. 63-67 | 1 | Устный опрос | ||||||||||||||||||||||||||||||||||||||||
Принципы применения таблиц в HTML – разметке. | Октябрь | 2 | Лекция | ОК1.-ОК3. | — | Подготовка доклада по теме «Ссылки – мнемоники в HTML». | ОИ2 стр. 111-114 ДИ 3 стр. 89-94 | 1 | Письменный опрос | ||||||||||||||||||||||||||||||||||||||||
Создание HTML документа. Разметка текстового контента. Форматирование списков HTML. | Октябрь | 2 | ПЗ№2 | ОК4._ОК6 | — | 1.3 | Подготовка доклада по теме «Формальное определение HTML, и проверка» | ОИ 2 стр. 47-51 ДИ 4 стр.102-103 | 1 | Контроль выполнения практических заданий | |||||||||||||||||||||||||||||||||||||||
infourok.ru
Этапы создания веб-сайта. Часть 1 — Планирование
Недавно на популярном ресурсе habrahabr.ru нашел интересный материал об этапах создания сайта. Автор (HTML-верстальщик и Front-end разработчик) подробно и доступно рассказывает про все особенности создания сайта «с нуля». Условно процесс создания сайта (web-проекта) можно разделить на 3 этапа: Планирование, Дизайн и Разработка. В этой части поговорим про планирование.
Данный этап можно разделить на несколько подэтапов:
- Создание идеи
- Разработка структуры проекта
- Проработка макета проекта
Создание идеи
На данном этапе нам необходимо определиться с тематикой проекта (сайта, сервиса). Далее, в соответствии с выбранной темой, необходимо собрать соответствующие материалы: текстовые, графические.
Разработка структуры проекта
Когда мы определились с темой проекта, подобрали необходимый материал, следующим этапом будет разработка структуры проекта. Структура проекта подразумевает под собой разделы сайта, в соответствии с которыми будет формироваться навигационное меню и строиться дизайн проекта. На данном этапе можно классифицировать материал по темам и разделам.
Проработка макета проекта
После того, как мы определились со структурой проекта можно составить макет проекта (схематично).
Для отрисовки наброска можно использовать бумагу и ручку, Photoshop, любой другой редактор графики (раньше часто использовали Adobe Fireworks). Важно отметить, что данный этап – это не отрисовка готового дизайн-макета, а всего лишь схематичный набросок, выполненный для понимания того, как на сайте будут располагаться основные информационные блоки, графика и прочие элементы дизайна.
Основные элементы страницы
Зачастую основными элементами страницы являются: содержащий блок (wrapper, container), логотип, навигация, контент, футер (нижний колонтитул), свободное пространство (по сути свободное пространство — это не элемент дизайна, но понятие, помня о котором при составлении макета страницы, наш проект не будет выглядеть как нагромождение блоков).
Содержащий блок (контейнер)
Роль контейнера на странице может выполнять непосредственно элемент body или же div. Ширина содержащего блока может быть резиновой (fluid), а может быть фиксированной (fixed).
Логотип
Текстовая или графическая составляющая проекта и выделяющая его среди других. Логотип чаще всего располагается в верхнем левом углу страницы или же посередине (в зависимости от идеи, макета).
Навигация
Основная навигационная панель содержит ссылки на основные разделы сайта. Навигационная панель часто располагается в верхней части страницы (в независимости от того вертикально или горизонтально располагаются элементы навигации).
Контент
Контент – это основная составляющая веб-страницы. Он занимает главенствующую роль в дизайне страницы, поэтому занимает большее пространство, подкреплён, помимо текста, графикой.
Данный элемент располагается внизу страницы и обычно содержит информацию о правообладателе, контактные и юридические данные, ссылки на основные разделы сайта (зачастую дублирует основную навигацию), ссылки на социальные сети, форму обратной связи и пр.
Резиновый и фиксированный макет
Фиксированный макет
Фиксированный макет подразумевает под собой, что в независимости от разрешения экрана пользователя ваш сайт всегда будет занимать одинаковую ширину.
Резиновый макет
«Резиновый» макет подразумевает, что страница сайта будет стараться занять всё доступное ей пространство на экране пользователя, подстраиваясь под разрешение.
В данном контексте стоит уяснить такие понятия, как отзывчивый веб-дизайн (Responsive Web Design aka. RWD) и адаптивный веб-дизайн (Adaptive Web Desing aka. AWD). Первое понятие укладывается в концепцию «резинового» и означает, что при изменении размера экрана ваш сайт подстраивается под него, второе понятие подразумевает, что при разработке вы определяете основные разрешения (размеры экрана), под которые будет подстраиваться (адаптироваться) ваш контент. В обоих случаях следует разрабатывать не один, а несколько макетов, которые будут соответствовать разным разрешениям экрана. Часто создаётся 3 макета под разрешения iPhone (Android Phone), iPad (Android Tablet) и Desktop.
На данном изображении показаны оба подхода. Сверху блок «отзывается» на любые изменения размера контейнера, снизу «адаптируется» под определённую ширину
Почему при «резиновом» дизайне создаётся несколько макетов, а не используется один?
При разработке макета мобильной версии сайта стараются на первый план выносить основной контент, поэтому навигационное меню часто прячется, скрываются большие баннеры и декоративные элементы, блоки контента обычно располагают друг под другом. На заранее составленном макете как раз можно определиться какие элементы мы оставляем на мобильном, а какие прячем.
Модульная сетка
Перед составлением схемы проекта так же необходимо уяснить понятие модульной сетки. Модульная сетка подразумевает под собой разделение страницы на отдельные колонки по вертикали и выстраивание контента, при разработке дизайн макета, именно по этой сетке.
Наиболее популярной системой является модульная сетка 960 Grid System (http://960.gs), которая максимально делит страницу на 12, 16 и 24 колонки. Максимум в ширине сетка имеет 960 пикселей. Данное решение основано на том, что большинство современных мониторов, на момент создания сетки, имели разрешение не меньше 1024 на 768 пикселей. Создание макета на основе данной сетки, в дальнейшем, поможет ускорить процесс разработки (вёрстки).
Так же стоит отметить, что при разработке «резинового» макета страницы существует понятие максимальной ширины. Данное утверждение основывается на удобстве восприятия информации. Если предположить, что наш сайт не имеет максимального значения по ширине, то на больших мониторах информация будет сильно растягиваться и её неудобно будет читать. Чаще всего ограничиваются шириной в 1280 пикселей.
Модульная сетка 960GS отвечает концепции «фиксированного» дизайна, для «резинового» дизайна можно обратить внимание на адаптацию этой же сетки на сайте http://www.designinfluences.com/fluid960gs/ или воспользоваться сеткой, которую предлагает фрэймворк Bootstrap (http://getbootstrap.com/css/#grid).
Благодаря модульной сетке блоки контента и элементы будут располагаться на определённом расстоянии друг от друга, будут иметь удобоваримую ширину, что в дальнейшем визуально будет приятно пользователю и не будет вызывать у него какие-либо неудобства в восприятии сайта.
Модульная сетка, по сути, – это некая визуальная абстракция, визуальное деление страницы на равные по ширине столбцы с равными отступами между ними. Визуализировать данную модель можно посредствам направляющих или отдельного слоя, на котором будут изображены эти столбцы. Именно такое решение вы найдёте в шаблонах сетки 960gs.Макеты веб-страниц
Среди всего многообразия составления макета веб-страницы можно выделить четыре наиболее распространённых:
- Навигация в левом столбце
- Навигация в правом столбце
- Навигация в трёх столбцах
- Горизонтальная навигация. На данном этапе сайты с таким типом навигации составляют большинство. Удобство такого подхода легко объяснить тем, что в данном случае у нас остаётся больше пространства для контента, составляющего наш сайт.
Но данный список типов макетов нельзя назвать исчерпывающим, поэтому перед разработкой макета и дизайна страницы так же можно погулять по различным сайтам с примерами других работ, а так же по сайтам схожей с вашей тематикой
Mobile First
С учётом тенденций последних лет данный подход плотно занимает свою нишу в разработке и дизайне сайтов. Тенденция такова, что практически около 60% пользователей интернета используют для доступа в сеть мобильные устройства, поэтому правилом хорошего тона становится разработка не только десктопной версии сайта, но и мобильной версии. При использовании данного подхода разработка макета сайта, дизайна и вёрстки начинается с мобильной версии, а затем уже прорабатываются макеты для других разрешений: добавляются блоки, баннеры, дополнительные элементы дизайна и пр.
Данный подход учитывает практически весь цикл разработки, поэтому мы ещё к нему вернёмся.
Усвоив всё вышесказанное можно переходить к следующему этапу – Дизайн.
Источник habrahabr.ru
www.work-navigator.ru
Планирование Web-сайта
Приступая к разработке своего сайта, нужно четко представить себе его назначение. Обычно сайты создаются для того, чтобы заявить о себе или о своей организации, сообщить о результатах работы или своих достижениях, наладить деловые связи, дать рекламу о товарах или услугах и т.д.
Кроме назначения сайта нужно определить круг его потенциальных посетителей, то есть аудиторию, на которую будет рассчитан ваш сайт. Будут ли это ваши люди различных возрастов и профессий или люди, имеющие какой либо специальный интерес представляемой вами информации. В какое время они будут посещать ваш сайт и на каких языках они будут говорить? Какими браузерами они будут пользоваться?
Следующим этапом будет подбор материала. На весь материал по тематики сайта, который у вас имеется, стоит публиковать в Интернете. Нужно трезво оценить качество материала и его интересность для посетителей. Отобранный материал разделите по темам – эти темы определят разделы будущего сайта. Если материала по каждой теме набирается достаточно много, рассортируйте его по степени важности.
При планировании сайта, предназначенного для какой либо организации, немаловажным является вопрос финансирования работ.
Разработка структуры сайта
Материалы, которые вы планируете опубликовать на сайте, нужно организовать в определенную структуру. Чаще всего для Web-сайтов выбирается древовидная структура организации информации (рис.1,а,б). На верхнем уровне находится начальная страница сайта, с которой посетитель с помощью меню или ссылок может переходить на страницы следующего уровня. Древовидная структура может состоять из нескольких уровней подчинения.
Очень важно определить оптимальное соотношение между количеством уровней (глубиной корней или высотой дерева) и количеством вариантов выбора на каждом уровне (шириной дерева). Если дерево окажется очень широким (при одном уровне иерархии эта плоская структура, рис.1,а), посетителю трудно будет ориентироваться в представленной информации и удерживать в памяти множество вариантов выбора. Если же уровней будет много, то посетителю придется «докапываться» до интересующей его информации (рис.1,б). Для этого необходимо будет сделать множество щелчков мышью и дождаться загрузки промежуточных страниц.
Начальная страница
а
Начальная страница
Б
Рис. 1. Примеры структуры сайта: а – широкое дерево; б – узкое дерево
Чтобы облегчить путешествие вглубь сайта, на страницах верхнего уровня помещают ссылки, которые могут перевести посетителя сразу же к страницам нижнего уровня. На глубоких страницах так же могут размещаться ссылки для обратного перехода вверх по иерархическим уровням сайта.
Древовидная структура в своем строгом виде практически не применяется. Обычно внутри неё существуют переходы, образующие петли, которые нарушают древовидность. На основе дерева образуются сложные структуры практически всех крупных узлов.
Иногда для узла вместо древовидной структуры целесообразно выбрать структуру в виде простой цепочки (линейная структура). При этом переход с каждой страницы может осуществляться только в двух направлениях: на следующую и на предыдущую страницы (рис.2, а). Для этого на страницах располагаются кнопки Вперед и Назад, с их помощью легко организовать, например, просмотр разделов книги или набора фотографий. На практике линейная структура применяется редко – в основном, когда смысл документа в середине цепочки не ясен или его получение не желательно без предыдущих документов. Линейная структура может сочетаться с различными ответвлениями и альтернативными переходами (рис.2, б).
а
б
Рис. 2. Пример линейной структуры сайта: а – линейная цепочка; б – линейная структура с ответвлением и альтернативным переходом
Посетитель составляет представление о структуре узла с помощью средств навигации: меню с выпадающими подменю, списков-ссылок и т.д. Благодаря средствам навигации посетитель затрачивает минимум времени, чтобы найти то, что вы хотите ему показать. От понятности системы навигации, продуманности ее элементов зависит, найдет ли посетитель нужную информацию или уйдет, так и не разобравшись в лабиринте документов. Поверьте, именно удобная навигация, а не красивые картинки, будут привлекать посетителей возвращаться на ваш узел, на котором они легко найдут интересующий их материалы.
Схема сайта
Сайт состоит из трех разделов: гиперссылка, язык разметки – HTML, система распределения гипертекстовой информации.
Практически каждая Web-страница содержит особые области текста или рисунка, при выборе которых будет выполнен автоматический переход к ресурсам Интернет, расположенным по другим адресам. Таким образом достигается взаимосвязь между Web-страницами. А особые области называются гипертекстовыми ссылками (гиперссылками).
Вообще, термин гипертекст был придуман задолго до появления Интернета (авторы этого понятия — Ваневар Буш, Тед Нельсон). Аналогом гипертекста может быть обычная энциклопедия. Том энциклопедии составлен из небольших статей на определенные темы, а в каждой статье могут содержаться ссылки на другие статьи. Гипертексты, в отличии от печатной энциклопедии-книги, представляют собой электронные документы. С гипертекстами можно работать только на компьютере, в печатном виде гипертексты не существуют. Примером гипертекстовой системы может служить известная справочная система ОС Windows. Связи в гипертекстовой структуре осуществляются с помощью ссылок. Благодаря ссылкам, пользователь может из одного документа вызвать другой документ, из него следующий документ и т.д.
Гипертекст – это текст, представленный в виде связанных блоков текста. При этом блоки текста могут находиться на просматриваемой Web-странице, на другой странице данного сервера либо на другом сервере глобальной сети. Переход от блока к блоку осуществляется скачком с помощью гиперссылок .
Гиперссылка – специальным образом выделенный фрагмент гипертекста (или графический объект), который содержит невидимый для пользователя указатель (адрес,URL) на другой сервер, другую Web-страницу или фрагмент просматриваемого документа (блок).
Реализуется соединения между блоками текста с помощью протокола передачи гипертекста НТТР (Hyper Text Transfer Protocol).
При работе по этому протоколу широко используется технология клиент-сервер. Документы заранее размещаются на компьютерах, которые постоянно подключены к глобальной сети (на серверах, хостах), а с помощью браузера (программа-клиент) пользователь может выбирать и просматривать (или прослушивать) хранящиеся на сервере документы.
Чтобы «добраться» до хранящегося на сервере файла, необходимо в адресной строке браузера указать путь к этому файлу, то есть адрес или, как его еще называют, ресурс URL.
История языков разметки уходит в 60-е годы 20 в., когда сотрудники компании IBM взялись за решение задач переноса документов между различными платформами и операционными системами. Результатом их усилий стал язык GML (General Markup Language — общий язык разметки), который предназначался для использования на ЭВМ семейства IBM. Язык GML в дальнейшем был расширен, а в 80-х годах прошел стандартизацию в ISO (Международная организация стандартизации). Этот мощный и универсальный язык разметки, названный SGML (Standard General Markup Language), использовался военным ведомством США при оформлении технической документации. Однако SGML широкого распространения не получил в виду своей сложности и дороговизны реализации.
Следующий этап развития языков разметки связан с Европейским центром ядерных исследований (CERN, г. Женева). Приезжавшие в этот центр специалисты со всего мира применяли собственные методы представления информации. Чтобы облегчить доступ к тысячам документов, требовалось создание универсальной системы, которая не зависела бы от используемой компьютерной платформы и в то же время была бы достаточно простой. В начале 80-х годов этой проблемой занялся сотрудник CERN, консультант по программному обеспечению Тим Бернерс-Ли. Для решения этих задач он стал разрабатывать язык разметки, с помощью которого документы воспроизводились бы одинаково на разных компьютерах.
В основу разрабатываемого языка Бернерс-Ли положил язык SGML и приемы работы с гипертекстом, с чем и связано название созданного им языка — HTML. Новый язык использовал основные конструкции SGML для описания документов и гипертекстовых ссылок.
1989 году Бернерс-Ли предложил для CERN разработать информационную систему, напоминающую паутину документов, связанных ссылками. Документы хранятся на серверах, которые размещаются по всему миру и соединены между собой каналами Интернета. Первоначально эта идея отклика не получила, и из-за бюрократических проволочек работа продвигалась медленно. Тогда Бернерс-Ли разработал протокол HTTP- язык, на котором серверы должны обмениваться гипертекстовыми документами, и написал первые программы Web-сервера и браузера. Он обратился напрямую к Интернет-сообществу, и энтузиасты в 1991 годы начали создавать первые узлы Web. В 1992 году началось практическое применение этой технологии за пределами CERN. С конца 1993 года начался поистине взрывной рост WWW, который привел к тому, что сегодня этот вид информационного сервиса Интернет является самым популярным, наиболее динамично развивающимся и во многом определяет современный облик всемирной сети.
В последующие годы система World Wide Web стремительно развивалась, она стала самой популярной службой в Интернете. В настоящее время она удовлетворяет потребности в информации самых широких слоев пользователей, включая в свой состав миллионы узлов Web. На больших узлах размещаются тысячи и сотни тысяч документов, причем общее количество документов в WWW с каждой секундой увеличивается, поскольку над их созданием трудится огромная армия специалистов и любителей в разных уголках земного шара.
World Wide Web. или Web – это глобальная система распространения гипертекстовой информации, использующая в качестве каналов транспортировки Интернет.
Фактически World Wide Web – это гипертекстовое пространство документов, которое не связано с географией размещения самих Web-узлов. Поэтому в этом пространстве физическое расстояние между узлами не имеет смысла. Вы можете на экране монитора одинаково просматривать Web-страницы, которые хранятся как на диске компьютера в соседней комнате, так и на сервере, расположенном в другой стране.
Web-дизайн – новый жанр изобразительного искусства, основанный на применении специфических инструментов (компьютер и программы-редакторы), специальных языков программирования (HTML, JavaScript, Java, Perl, C++, PHP и др.) и сетевых технологий (CGI,CSS,SSI и др.). целью Web-дизайна является проектирование (создание) объектов (Web-страниц, баннеров, апплетов, скриптов, отдельных элементов Web-страниц), размещаемых в Интернете.
studfile.net