Создание интернет ресурсов. Создание интернет ресурсов Анализ рынка web -разработки
Происходит в несколько стадий. В каждой стадии участвуют специалисты, необходимые для этого. И тот кто говорит, что сайт сможешь создать всего лишь один человек является неправильным. По правде говоря в разработке веб-страничку принимают порядка 8-10 человек, сюда входят: проект-менеджер, web-дизайнер, верстальщик, программист, специалист по продвижению и при необходимости копирайтер. Такое больше участие специалистов применяется при крупных коммерческих проектов, где поставлены большие цели. А вот сделать небольшой простой сайт по силам, наверно, каждому, у кого есть желание учиться и немного навыков и умений. Да и в таком случае требуется четкое выполнение определенных действий.
Этапы :
- Проектирование . На этапе проектирования указываются определенные требования от заказчика, описывается идея веб ресурса, рассматривается структура, какие будут разделы. Далее после всех этих требований идет выбор «движка», на котором будет установлен сайт. Все это описывается в техническом задании проекта. Поэтому данный этап является очень важным, от успеха которого зависит дальнейшая жизнь ресурса.
- Дизайн . В этап этап входит: придумывание всех элементов сайта, как будет выглядеть сайт. В дизайне должен быть учтен стиль компании заказчика, его лого, корпоративная цветовая гамма. Так же могут быть предложены разные виды уже готового шаблонного дизайна.
- Верстка . Верстка делается по макету, выполненному дизайнерами и придает ему завершенный вид, такой, какой его видят пользователи Интернета.
- Программирование . Здесь создается весь функционал, что как и зачем должно работать. Привязываются определенные модули: обратная связь, поиск, ссылки, все то, что может облегчить пользователям найти нужную информацию на сайте.
- Наполнение . Здесь идет заполнение контента, вставка картинок. Стоит уделить особое внимание наполнению страниц, т.к. от этого будет зависеть найдет ли пользователь нужную информацию у вас на страничке и останется дальше, либо закроет и забудет. И такое положение не исправит красивый внешний вид сайта, его функционал, удобная структура.
- Тестирование . Это завершающий этап создания сайта. Прежде чем отдать заказ, каждый проект должен обязательно протестирован, обнаружены и убраны все ошибки в коде и тексте сайта.
- Продвижение . Этап является нужным, но не обязательном. Но как пользователь найдет ваш сайт из миллиона других в интернете? Для этого как раз и нужно продвижение. Это ряд мероприятий, которые позволят вывести ваш web-ресурс в ТОП поисковых систем.
- Поддержка . В будущем может появится необходимость в доработках сайта. Создание новых страниц, разработка новых функций и так далее. Ведь без изменений сайт может наскучить пользователям.
Современные информационные технологии / 3.Программное обеспечение
студ. Телегина М. В., к.т.н. Костарев А. Н.
Российский государственный социальный университет, Россия
Основные этапы разработки web-приложений
Разработка web -приложения (web -разработка) - это комплекс мер и действий по планированию и созданию сайта в сети Internet в зависимости от поставленных целей и задач.
Современный Internet -сайт может решать как маркетинговые задачи - продвигать на рынке товары и услуги предприятия, конкурентные преимущества компании, увеличивать спрос на продукцию и пр. - так и представлять собой информационный ресурс, задачи которого ограничиваются информированием целевой аудитории.
Непосредственно созданию сайта предшествует подробный комплексный анализ, определяющий критерии, которым должен соответствовать будущий web -проект.
Процесс создания web -приложения, в общем случае, включает шесть основных этапов:
· определение целей и задач проекта;
· разработка структуры сайта;
· разработка дизайн-макетов;
· html- вёрстка;
· программирование и контроль качества;
· запуск и сопровождение, SEO -оптимизация.
Каждый из перечисленных этапов в достаточной степени независим, что позволяет выбирать схему работы и исполнителя для каждого из них.
Определение целей и задач проекта
На этапе проектирования формулируются бизнес-цели создаваемого проекта, определяются требования, которым он должен удовлетворять, разрабатывается общая концепция.
На данном этапе имеет смысл уточнить пожелания заказчика, а также произвести исследование целевой аудитории. Для более глубокого анализа можно запросить у заказчика соответствующие материалы: брошюры, ежегодные отчёты, образцы продукции, другие сопутствующие данные - всё, что поможет составить представление о том, кто и с какой целью будет посещать сайт, какие задачи будут выполняться на сайте. Немаловажно выяснить технические возможности будущей основной пользовательской аудитории - пропускную способность каналов связи, используемые Internet -браузеры и пр.
Для нахождения целевой аудитории целесообразно войти в роль квалифицированного пользователя на аналогичных создаваемому Internet -ресурсах. Помимо прочего это поможет выявить новые креативные концепции для того, чтобы сайт был более конкурентоспособным и «не затерялся» среди множества других.
Когда цели определены, приступают к составлению расширенного плана проекта, отражающего сколько времени, денег и иных средств понадобится для выполнения работ на каждом из последующих этапов. Такой план часто содержит информацию о бюджете проекта, график работ (с соответствующим распределением ролей между web -разработчиками), техническую документацию, а также раздел «деталей и уточнений», где оговорены конкретные аспекты возможных спорных вопросов. В этот раздел также включают предложения о готовых разработках и шаблонах.
После детального рассмотрения и утверждения плана подписывается договор о выполнении работ.
Разработка структуры сайта
Разработка структуры сайта включает всё, что касается его содержания и информационной стратегии, определяющей, как должна быть организована подача информации, чтобы будущие посетители сайта могли быстро и легко её найти. Первоочередной задачей на данном этапе является создание карты сайта, отражающей взаимосвязи типовых страниц и их наиболее значимые функциональные возможности.
Карту сайта представляют в виде чертёжа (блок-схемы), на котором каждая страница отображается отдельным прямоугольником. Связи между ними показывают схему переходов по страницам.
Также создают каркасы главной и основных типовых страниц, показывающие расположение текста и графики на странице, а также то, как пользователи будут работать с этими элементами. Каркас страницы должен предполагать возможности последующего расширения.
Более эффективную работу сайта обеспечивает соблюдение принципа: «пользователю удобнее добираться до нужной ему страницы максимум за два щелчка мыши». Поэтому обычно рекомендуется использовать не более двух уровней вложенности в пределах каждой группы элементов.
Завершив формирование облика сайта, компоновку страниц и определив размещение содержимого, переходят к следующему этапу web -разработки - к визуальному оформлению.
Разработка дизайн-макетов
Дизайн-макет - это графическое, наглядное изображение основных элементов сайта. Дизайн-макет полностью воплощает визуальную концепцию сайта. Его разработка выполняется в одной из графических программ (в подавляющем большинстве случаев - в Adobe Photoshop). В процессе разработки дизайнер руководствуется письменным соглашением (брифом) на создание дизайн-макета, который заполняется заказчиком и содержит пожелания к дизайну: тип, предпочтительные цвета, наличие тех или иных графических элементов и пр.
На этой стадии создаются все элементы web -дизайна в соответствии со стилем подачи информации и общей концепцией. Главным при дизайне сайта является умение разработать графические объекты, которые бы быстро загружались и хорошо смотрелись, независимо от используемого Internet -браузера.
Часто прибегают к использованию готовых дизайн-шаблонов, которые широко представлены в сети Internet или являются встроенными в различные графические редакторы, такие как, Microsoft FrontPage или Adobe PhotoShop . С помощью подобных шаблонов сайт создаётся за максимально сжатое время. Однако следует отметить, что у такого решения имеется ряд существенных недостатков, главный из которых - повторяемость и не уникальность дизайна. Шаблон является оболочкой с минимальным количеством интерактивных элементов и полезных модулей. Поэтому при выборе шаблона стоит обращать внимание не только на дизайн, но и на функциональность.
Важным элементом web -дизайна является графика, которую условно можно разделить на три категории:
· иллюстрированная графика - пояснительные изображения, схемы и чертежи, фотографии;
· функциональная графика - кнопки навигации, счётчики и другие элементы управления сайтом;
· декоративная графика - эстетические элементы дизайна страниц - фоновый рисунок, заголовки, выполненные в виде графических файлов и пр.
Такая классификация предполагает использование различных мультимедийных форматов. Например, для чётких, контрастных изображений с мелкими деталями и тонкими линями используются jpeg -файлы, а для красочных изображений с мягкими переходами цветов - gif -файлы.
Html -вёрстка
Html -вёрстка макета является следующим шагом после разработки дизайна сайта. Вёрстка - это преобразование созданных дизайнером графических макетов страниц в html -код, который бы отображался в Internet -браузере в точном соответствии с исходным макетом. Сложность вёрстки зависит от сложности дизайна.
Основными задачами при вёрстке являются:
· корректность отображения страниц сайта при разных разрешениях экрана;
· кросбраузерность - единообразность отображения страниц сайта в наиболее популярных браузерах - Internet Explorer , Mozilla Firefox , Opera , Chrome .
Программирование и контроль качества
Программирование - это практическая реализация проекта, интеграция наработок по отдельным направлениям. Другими словами, это процесс построения функциональных инструментов для наполнения и обработки данных. Программирование определяет насколько стабильным и защищённым будет функционирование сайта. Выбор платформы, технологий и грамотного подхода к программированию играет существенную роль. На данном этапе важно определиться с подходом к созданию Internet -реусурса: будет ли он статическим или динамическим.
Статический Internet -сайт представляет собой совокупность html -файлов, каждый из которых представляет отдельную страницу (или её часть). Такой подход используется, в основном, для размещения файловых архивов и медиа-коллекций. Статические сайты программирования, как такового, не требуют.
Страницы динамического Internet -сайт формируются сервером в ответ на запрос пользователя (передаваемый в виде URL -адреса страницы). Такие сайты требуют больше затрат на разработку и техническую поддержку, чем статические, но эти затраты окупаются за счёт снижения финансирования на редактирование материалов и развитие информационной структуры.
CMS
Как правило, современные web -проекты включают подсистему управления контентом (содержимым) - CMS (content management system ), либо строятся на основе неё. Назначение системы управления контентом состоит в предоставлении возможности публиковать материалы на сайте человеку, не обладающему специальными знаниями в области создания html -документов, а также в существенном сокращении времени, затрачиваемом на ввод данных.
Такие системы делают возможным совместную работу по наполнению ресурса информацией, позволяют обновлять содержимое страниц и разделов, размещать на сайте текстовую и графическую информацию, вносить изменения, перемещать или удалять информационные блоки или целые страницы, снижают риск непреднамеренного повреждения программного кода. Управление контентом включает в себя также отслеживание актуальности опубликованной информации, её соответствия критериям SEO -оптимизации и пр.
Существует большое разнообразие системы управления контентом: от систем, создаваемых в рамках реализации конкретного проекта для решения специфических задач, до универсальных систем, таких как WordPress , Joomla , 1С-Битрикс и пр.
Инструментальные средства разработки и базы данных
В настоящее время актуальным программным функционалом среди множества сред разработки обладает высокоуровневый фреймворк Ruby on Rails . Его возможности позволяют существенно повысить продуктивность web -программирования по сравнению с такими технологиями, как PHP или Perl .
Язык Ruby , лежащий в основе фреймворка Ruby on Rails , имеет быстрый цикл разработки (редактирование – запуск – редактирование), реализован в виде интерпретатора, поддерживает нетипизированные переменные, не требующие объявления. Ruby on Rails позволяет добиться высокой надёжности и гибкости разработки проектов любого масштаба. Фреймворк включает подсистему тестирования, которая помогает существенно сэкономить время разработки и повысить качество web -проекта.
В основе большинства динамических web -проектов лежит база данных. Существует множество различных систем управления базами данных (СУБД), но в современных хостинг-центрах - организациях по размещению web -проектов на серверах - как правило, применяются СУБД MySQL и PostgreSQL.Причинами тому являются фактическая ориентация этих СУБД на хостинговые задачи, доступность на всех популярных серверных операционных системах, а также относительная простота настройки и администрирования. СУБД упрощает управление данными и сокращает время и издержки на разработку и развёртывание приложений. MySQL и PostgreSQL обеспечивают приемлемый уровень безопасности, надёжности и масштабируемости.
Системы поддержки процесса разработки
Создание web -приложения, как и любого другого программного продукта, подразумевает работу с постоянно меняющейся информацией, данными, файлами. Контроль за вносимыми в проект изменениями помогают обеспечить системы управления версиями (Version Control System - VCS ), которые хранят предыдущие версии исходных файлов проекта, отслеживают производимые в файлах изменения, обеспечивают совместную командную работу над проектом и пр. К наиболее популярным на текущий момент VCS относятся: SVN , GIT , Microsoft VSS . Использование системы контроля версий поднимает общий уровень качества разработки.
Кроме того, создание любого программного продукта (в том числе и web -приложения) сопровождается новыми требованиями к продукту, предложениями по его улучшению, необходимостью исправлять ошибки и пр. Для управления перечисленными аспектами разработки и улучшения качества менеджмента используются системы отслеживания ошибок (Bug Tracking System - BTS ). Главный компонент BTS представляет собой базу данных с удаленным доступом, обеспечивающую централизованный доступ ко всем необходимым файлам, спецификациям, графикам, планам, замечаниям и т.п.
Существует широкое разнообразие систем отслеживания ошибок: B asecamp, Bugzilla , Trac , MantisBT , Redmine и пр.
По завершении этапа активного программирования начинается этап тестирования корректности функционирования созданного web -приложения: проверки на наличие грамматических ошибок, пропущенных картинок, неработающих ссылок и т.д., а также проверки функционирования сайта в различных web -браузерах. Данный этап может быть автоматизирован с помощью средств автоматического тестирования таких, как IBM Rational AppScan , Empirix E -TEST S uite, XSpider, WAS и др.
Запуск и сопровождение
После исправления ошибок и презентации сайта в сети Internet , начинается новый этап работ, связанный с его сопровождением. Основная цель сопровождения - поддержание стабильности работы web -ресурса и актуальности информации. Обязательным условием квалифицированного сопровождения web -сайта является защита информации, включающая в себя антивирусную защиту и защиту баз данных на сервере от действий злоумышленников, в частности, от SQL injection .
Кроме того, необходимо своевременное обновление содержимого сайта, исправление ошибок, не выявленных или не исправленных на стадии проверки качества. Ещё одним важным моментом сопровождения является постоянный мониторинг эффективной работоспособности сайта, контроль посещаемости и учёт данных статистики.
SEO -оптимизация
Поисковая оптимизация (Search Engine Optimization ) - это комплекс мероприятий, целью которых является увеличение посещаемости Internet -ресурса за счет достижения им высоких позиций в выдаче поисковых систем по заданному набору целевых запросов. SEO -оптимизация базируется на семантическом ядре - списке ключевых слов, по которым планируется продвижение сайта в поисковых системах. Ключевые слова группируются по высоко-, средне- и низкочастотным запросам. От правильности подбора данных слов напрямую зависит успех сайта.
SEO-оптимизация учитывает:
· внутренние факторы ранжирования : число, плотность и расположение ключевых слов на страницах сайта, стилистическое оформление текста, правильность формирования тегов, мета-тегов и т. д.;
· внешние факторы ранжирования : индекс цитируемости, содержание внешних ссылок, релевантность ссылающихся страниц и пр.
Современные системы web -поиска (поисковые машины) анализируют большинство элементов web -страниц: текст, заголовки, служебные html-теги, стилевые и структурные особенности содержания. Результаты работы SEO-роботов сохраняются в специальной базе данных - индексе поисковой системы, - из которой по запросу пользователя выдаются в определенном порядке. Специалисты, чьей профессиональной областью деятельности является SEO-оптимизация, постоянно изучают алгоритмы ранжирования поисковых машин.
Анализ рынка web -разработки
В настоящее время российский рынок w eb-разработок меняется очень быстро и, по ряду оценок, считается самым динамичным за всю историю человечества. Уже на период 2009-го года в России существовало более 2000 компаний, оказывающих подобные услуги. Среди них следует отметить Art Lebedev Group , Actis Wunderman , Айтекс, DEFA Kreativburo . Такой круг лидеров остается более-менее постоянным на протяжении нескольких лет, и только повышение спроса на редкиеуслуги позволяет «выбиться» наверх ранее неизвестным компаниям. Главным «рычагом» web -разработки остается рост аудитории Internet -пользователей, который стимулирует разработчиков к совершенствованию своих web -проектов и увеличению бюджетов на SEO -оптимизацию.
Сейчас в сети Internet совершаются торговые сделки, существует множество электронных валют (Яндекс.Деньги, Webmoney и другие), открыты представительства банков, где пользователи могут работать со своими счетами. Ежедневно миллионы пользователей посещают поисковые системы, электронные энциклопедии, блоги (дневники пользователей), новостные сайты. Последние годы в российском сегменте сети Internet ознаменовались бурным развитием социальных сетей, уже давно завоевавших популярность на западе.
***
Разработка web -приложения - это комплексный многошаговый процесс, требующий знания множества различных технологий и языков программирования, умения работать с базами данных, использовать множество инструментальных средств и программных пакетов.
По информативности Internet -сайт оставляет далеко позади все традиционные источники информации и, что не маловажно, размещенная на сайте информация доступна конечному пользователю в любое время и в любой точке мира.
Литература
1. Гото К., Котлер Э. Веб-редизайн: книга Келли Гото и Эмили Котлер: Пер. с англ. - СПб.: Символ-Плюс, 2007. - 376 с.
2. Лопак Л. Web -дизайн. - 2-е изд.: Пер. с англ. - М.: Издательский дом «Вильямс», 2008. - 304 с.
3. Фернандес О. Путь Rails . Подробное руководство по созданию приложений в среде Ruby on Rails : Пер. с англ. - СПб: Символ-Плюс, 2009. - 768 с.
4. Панфилов К. По ту сторону веб-страницы. - М.: ДМК Пресс, 2008. - 440 с.
Все сайты на просторах интернета можно разделить на следующие типы: посадочные страницы, сайт визитка, корпоративные сайты, интернет-магазины, блоги, информационные порталы и другие.
Все они отличаются друг от друга структурой, функционалом, информационным объемом. Но, несмотря на это основные этапы при создании данных сайтов схожи. Существует несколько общих этапов сайтостроения.
«Написание» сайта — этапы
1. Составление технического задания
Техническое задание, или ТЗ - это план в котором описаны все ключевые факторы, которые нужно учесть при создании лучших сайтов в Самаре . Обычно ТЗ составляет заказчик: основные пункты должны объяснить исполнителю, каким должен быть ресурс в готовом виде, на какую целевую аудиторию рассчитан, какую цель должен выполнять.
2. Создание прототипа сайта
Когда ТЗ готово, к работе приступают разработчики. Прототипирование является ключевым этапом в создании будущего ресурса: на этом этапе создается упрощенный макет со всеми страницами, на которых условно обозначены все элементы сайта. Сам прототип создается с помощью специальных программ - самой популярной из которых является Axure.
3. Разработка дизайна
Над дизайном может работать как один человек, так и группа веб-дизайнеров, в зависимости от масштабности проекта. Основная работа ведется над определением стилистики дизайна, которая определяется с учетом целевой аудитории сайта. Подбираются шрифты, обычно не больше двух, устанавливается палитра основных цветов. Дизайн сайта зачастую разрабатывается в таких программах: Adobe Photoshop, Sketch, Adobe Illustrator. После выполнения данной работы, PSD макет передается верстальщику проекта.
4. Верстка сайта
Под процессом верстки кроется программная составляющая: специалисты работают над написанием HTML и CSS кода. После написания основных страниц, идет процесс установки верстки на CMS. После выбора типа админки, начинается кропотливая работа программирования, по завершении которой создание вашего сайта почти готово, и может выполнять свои функции.
5. Выбор домена и хостинга
На завершающей стадии нужно загрузить сайт на качественный хостинг. Для того, чтоб ресурс работал эффективно нужно подобрать хостинг — место на сервере где будет размещен сайт. Не нужно забывать и о качественном, тематическом домене, который будет выступать в роли имени веб-ресурса.
6. SEO оптимизация
После запуска и всех проверок на работоспособность, нужно передать готовый сайт оптимизаторам, главная цель которых, вывести ресурс в топ 10 поисковой выдачи. Именно данные работы обеспечат поступление постоянного трафика на созданный сайт.
Эти основные этапы и есть главные правила сайтостроения.
Видео
Продолжая тему, предлагаю посмотреть умное и полезное видео с описанием ключевых этапов создания сайтов.
Благодаря модульной сетке блоки контента и элементы будут располагаться на определённом расстоянии друг от друга, будут иметь удобоваримую ширину, что в дальнейшем визуально будет приятно пользователю и не будет вызывать у него какие-либо неудобства в восприятии сайта.
Модульная сетка, по сути, – это некая визуальная абстракция, визуальное деление страницы на равные по ширине столбцы с равными отступами между ними. Визуализировать данную модель можно посредствам направляющих или отдельного слоя, на котором будут изображены эти столбцы. Именно такое решение вы найдёте в шаблонах сетки 960gs.
По основам веб-дизайна и прототипированию неплохим подспорьем может стать данная книга: Джейсон Берд: Веб-дизайн. Руководство разработчика .
Разработка
Итак, процесс дизайна макета страницы плавно перетекает в процесс «оживления» сделанного на предыдущих этапах. Прежде чем сразу начинать писать HTML, CSS и JS стоит немного поговорить о редакторах кода и структуре проекта.Редакторы кода
Из наиболее популярных редакторов кода на сегодня можно выделить три:SMACSS
Так же существует подход SMACSS (расшифровывается данный акроним как Scalable and Modular Architecture for CSS – Масштабируемая и Модульная Архитерктура для CSS), который разделяет понятие о классах и разметке на несколько уровней: базовый, макет, модуль, состояние, тема.- К базовому уровню будет относиться всё, что касается непосредственно тэгов html.
- К уровню макета мы будем относить всё, что касается основных составляющих страницы: секции.
- К уровню модуль мы будем относить всё, что касается переиспользуемых элементов страницы: баннеры, навигация, списки, блоки информации и пр.
- Уровень Состояние описывает как будут выглядеть модули и секции в том или ином состоянии: отображаются или не отображаются, сжатые или раскрытые, активны или неактивны и пр.
- Уровень темы чем-то схож с уровнем Состояния и отражает как модули или секции могут выглядеть.
- Макет: .l- или .layout-
- Так как модули составляют основную часть проекта именовать их, используя префикс module- избыточно. Поэтому для них используются имена как есть, например: .example { }, .afisha {} и пр.
- Состояния имеют префикс .is- , например .is-hidden {}
- Уровень Темы именуется подобно модулям.
Информация о методологии и онлайн книга: https://smacss.com/
Русскоязычный перевод книги по SMACSS: https://github.com/andrew--r/smacss
Важно помнить, что любое соглашение по именованию призвано создать определённый уровень абстракции, благодаря которому работать с проектом будет удобно и он не будет перегружен излишним кодом и прочими артефактами.
Небольшой курс по основам HTML:
Написание CSS
Правила именования классов подводят нас к следующему этапу. Когда написана html структура проекта, определены классы можно переходить к написанию CSS стилей и нарезке макета.Стоит упомянуть о 2-х CSS файлах-дополнениях: normalize.css и reset.css.
Reset.css
Изначально в проектах повсеместно использовался reset.css , написанный Эриком Мейером. Цель данного свода правил – сбросить стили браузера, которые он по умолчанию использует для отображения элементов разметки. Таким образом при использовании reset.css нам не нужно переписывать стили браузера, по сути мы работаем с «чистым листом» и можем сосредоточиться на написании собственных стилей с нуля.Возвращаясь к Mobile First, стоит сказать, что при работе в данной концепции написание стилей стоит начинать с мобильной версии, а затем с помощью медиа запросов добавлять правила, которые будут работать на других разрешениях. Зачастую, при расширении правил от мобильной версии к десктопной, приходится писать гораздо меньше кода, чем при работе наоборот: от десктопной версии к мобильной.
Опять-таки, возвращаясь к теме Mobile First, нельзя не упомянуть о 2-х концепциях, которые коррелируют с данной техникой. Progressive Enhacement и Graceful Degradation, что переводится как прогрессивное улучшение и последовательное ухудшение. Данные принципы описывают 2 разных подхода к разработке: в первом случае мы разрабатываем наш сайт, пишем скрипты с учётом старых браузеров и систем или же определяем поведение при невозможности запуска скриптов, а затем постепенно улучшаем скрипт, вводя современные функции и методы, таким образом мы получаем сайт, который будет одинаково хорошо работать в старых и новых браузерах и средах (то же касается и css).
При Graceful Degradation подход противоположный – мы разрабатываем для современных браузеров и, лишь, потом начинаем вносить доработки и изменения с учётом старых версий.
Подход Mobile First чем-то схож с Progressive Enhacement.
Проверка кода
После написания html, css и js для нашей страницы необходимо проверить всё ли сделано верно. Для этого можно использовать online средства:Командная строка
Работа в командной строке так же может ускорить некоторые этапы работы над проектом, например, создание папок и файлов. Запустив консоль в директории проекта и набрав в ней всего лишь одну строку:Mkdir project && cd project && mkdir css && touch css/styles.css && mkdir images && mkdir js && touch js/app.js && touch index.html
После нажатия enter мы получим папку project в которой будут находиться папки css, images, js, в папках css и js файлы styles.css и app.js, соответственно, а в корне project лежать файл index.html. Таким образом мы сэкономили время на создание папки, написание её названия, создание файлов и пр. Так же командная строка используется для работы с остальными средствами автоматизации.
Так же многие сервисы вроде autoprefixer (автоматическая простановка браузерных префиксов), jshint (проверка JS кода на валидность) могут быть установлены как сторонние плагины в текстовом редакторе (Sumblime Text, Atom, Brackets) и инициализированы при нажатии определённого сочетания клавиш.
Bootrstrap, Foundation, Material Design Lite
Данные фрэймворки уже упоминались в разделе про дизайн. Но стоит опять вспомнить о них, так как они, в определённой степени, помогают автоматизировать процесс разметки веб-страницы и работы с ней.При подключении файлов фрэймворков в проекте мы можем использовать определённые в них классы и сниппеты разметки, которые будут работать по уже описанным правилам и иметь установленный внешний вид (например, кнопки, поля ввода, таблицы и пр.). Таким образом мы экономим время, например, на описание расположения блоков дизайна, их размеров в зависимости от разрешения, внешний вид полей формы, кнопок и их состояния.
Со всеми возможностями и примерами можно ознакомиться на соответствующих сайтах:
- Bootstrap: http://getbootstrap.com/
- Foundation: http://foundation.zurb.com/
- Material Design Lite: http://www.getmdl.io/
Надеюсь, что все описанные вещи будут полезны вам в изучении темы веб-дизайна и фронтенд разработки.
Теги:
- html
- css
- веб-дизайн
Итак, при разработке интернет-ресурса необходимо вести работу в строгой последовательности.
Давайте рассмотрим основные этапы:
1-й этап - проектирование
2-й этап - дизайн
3-й этап - программирование и отладка
Проектирование
Это важный этап по созданию подробной документации для дальнейшей разработки интернет-ресурса. В документацию входят, как принципиальные, концептуальные вопросы, такие как проработка спектра услуг, техническая и функциональная их реализация, так и вопросы, связанные с юзабилити (степень удобства и комфорта использования интерфейса с точки зрения пользователя), с административной панелью (управление сайтом для всех типов пользователей) и многие-многие другие важные аспекты для корректной работы интернет-ресурса.
Создание хорошей документации для интернет-ресурса также необходимо, как подготовка документации при строительстве дома или производстве автомобиля.
Дизайн
Дизайн - это наиболее творческая часть работы! При разработке дизайна очень сложно сохранить баланс между эстетичностью и функциональностью. Именно для этого и делается проектирование будущего ресурса. Когда понятен весь функционал сайта, когда ясно, какие меню, с какими пунктами находятся на тех или иных страницах, когда заранее очевидно, какие формы и какого размера должны находиться на страницах, когда известно, что должен видеть пользователь и как он этим будет пользоваться…. Именно тогда поиск эстетического решения становится максимально творческим и при этом остается функциональным.
Дизайн - это не просто рисование красивых картинок! Это - удобство пользования чем-либо, будь то чайник, автомобиль или интернет-сайт! А удобство не может быть рождено исключительно из художественных вкусов. В первую очередь, это - приведение конструктива к эстетике.
Программирование
С программированием всё намного проще с точки зрения заказчика, но значительно сложнее с точки зрения исполнителя! Программирование нельзя увидеть или пощупать! Плодами работы программистов становится уже готовый к использованию сайт и, как правило, это кажется само собой разумеющимся окончанием работ.
Но на самом деле, зачастую, для реализации функционала какой-нибудь, кажущейся на первый взгляд простой функции, может уйти времени больше, чем на всю остальную работу.
Пользователь видит сайт лишь снаружи и ему кажется, что это очень простой сайт. В то время как, внешняя сторона сайта, это только верхушка айсберга. Самое сложное таится внутри сайта. Эту часть видят только администраторы интернет-ресурсов. Это часть называется административной панелью. Она и является подводной частью.
Для изменения пунктов меню, полей в онлайн-формах, изменения контента сайта, настройки ограничения прав пользователей при наличии разных типов пользователей и многого другого нужна удобная, практичная административная панель!
Мы разработали совершенно уникальную административную панель, позволяющую настроить её под любые функции по требованию заказчика!
