Однажды меня попросили провести небольшой семинар в средней школе, где я учился, что я и сделал. Во время написания речи я подумал, что она может стать полезным материалом для многих начинающих веб-дизайнеров, веб-верстальщиков и т.д. Я не претендую на абсолютную истину. Все, что здесь упомянуто, является исключительно моим личным взглядом на то, как я управляю дизайном и кодом. Эта статья, на мой взгляд, представляет собой поверхностный взгляд на концепции и инструменты, которые являются хорошим началом для тех, кто готов идти дальше. Традиционно процесс создания веб-сайта (веб-проекта) можно разделить на три этапа.
Этот этап можно разбить на несколько отдельных фаз
- Создание идеи
- Разработка структуры проекта
- Подготовка макета проекта
Создание идеи
На этом этапе необходимо определить объекты проекта (местоположение, услуги). Далее, в соответствии с выбранной темой, необходимо собрать соответствующие материалы, тексты и графику.
Разработка структуры проекта
Когда вы определили тему проекта и выбрали необходимые материалы, следующим шагом будет разработка структуры проекта. Структура проекта содержит навигационные меню и разделы сайта, которые формируют дизайн проекта. На этом этапе материалы можно распределить по категориям в соответствии с темами и модулями.
Подготовка макета проекта
После определения структуры проекта можно создать схему проекта (схема).
Вы можете нарисовать контур с помощью бумаги и ручки, Photoshop или другой программы обработки графики (часто использовалась программа Adobe Fireworks). Важно отметить, что этот этап не является готовым дизайн-макетом, а лишь схематичным эскизом, сделанным для того, чтобы понять, как на сайте будут располагаться основные информационные блоки, графика и другие элементы дизайна.
Основные элементы страницы
Часто основными элементами страницы являются Блоки (обертки, контейнеры), логотип, навигация, контент, футер (нижний колонтитул), свободное пространство (собственно, свободное пространство — это не элемент дизайна, а концепция при рисовании. (Поднимите макет страницы, наша работа не выглядит как блочный блок).
Удерживающие устройства (контейнеры)
Роль контейнера на странице может быть заполнена непосредственно элементом body или DIV. Ширина контейнера может быть плавной или фиксированной.
Логотип.
Текстовый или графический элемент проекта, выделяющийся на фоне другого текста. Логотип обычно размещается в левом верхнем углу или в центре страницы, в зависимости от дизайна.
Навигация.
Главная навигационная строка содержит ссылки на основные разделы сайта. Навигационные строки часто располагаются в верхней части страницы (независимо от того, является ли навигация вертикальной или горизонтальной).
Содержание.
Контент является основополагающим элементом сайта. Она доминирует в дизайне страницы, поэтому больше места занимает нетекстовая графика.
Футбол.
Этот пункт располагается в нижней части страницы и обычно содержит информацию о правообладателе, контактные данные, юридическую информацию, ссылки на основные модули сайта (часто копирующие основную навигацию), ссылки на социальные сети, формы обратной связи и т.д.
Резиновая и фиксированная раскладка
Стабильная планировка.
Стабильная верстка означает, что сайт всегда имеет одинаковую ширину, независимо от анализа экрана пользователя.
Резина.
Макет "резиновой ленты" означает, что страница занимает все доступное пространство на экране пользователя и пытается подстроиться под разрешение.
В этом контексте необходимо понять концепции отзывчивого веб-дизайна (или RWD) и адаптивного веб-дизайна (или AWD). Первая концепция относится к понятию "резиновая лента", то есть при изменении размера экрана веб-сайт адаптируется к нему, в то время как вторая концепция относится к определению базового разрешения (размера экрана) контента во время разработки. Персонализация. В обоих случаях необходимо разработать не один, а много макетов, которые адаптируются к различным разрешениям экрана. Часто создаются три макета для iPhone (Android Phone), iPad (Android Tablet) и настольных компьютеров.
На этом изображении показаны оба подхода. В верхней части блоки "подстраиваются" под изменение размера контейнера, а в нижней — под определенную ширину.
Полезные ссылки по теме:.
Почему "резиновый" дизайн создает несколько макетов, а не использует один?
При разработке макета мобильной версии сайта люди стараются подчеркнуть основное содержание, поэтому навигационные меню скрываются, крупные баннеры и декоративные элементы прячутся, а блоки контента обычно располагаются сверху и снизу. Используя предварительно разработанный макет, вы можете решить, какие элементы оставить, а какие скрыть на мобильном сайте.
Шарнирная решетка
Перед составлением карты проекта вам также необходимо понять концепцию модульных сеток. Модульная сетка означает вертикальное деление страницы на отдельные колонки, и именно она используется для размещения контента при разработке макета дизайна.
Наиболее популярной системой сетки является Modular 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.
Полезные ссылки и документация:.
Положения для веб-сайтов
Среди различных типов веб-страниц есть четыре наиболее распространенных
-
Навигация в левой колонке
Во-первых, мобильная связь.
Учитывая последние тенденции, этот подход утвердился в качестве позиции в проектировании и разработке веб-сайтов. Тенденция такова, что почти 60% пользователей Интернета выходят в Сеть с помощью мобильного устройства, поэтому правилом этикета является разработка настольной версии сайта, а также мобильной версии. При таком подходе компоновка, дизайн и разработка макета сайта начинается с мобильной публикации, после чего разрабатываются другие положения анализа, такие как блоки, баннеры и дополнительные элементы дизайна.
Этот подход учитывает практически весь цикл роста, и мы вернемся к нему позже.
После того как вы узнали все вышеперечисленное, можно переходить к следующему этапу — дизайну.
После создания макета проекта можно перейти непосредственно к созданию макета дизайна. На этом этапе следует начать с определения цветового плана проекта.
Один из способов определить основные цвета проекта — создать доску настроения. Для этого необходимо описать все синонимы, связанные с темой проекта. Затем каждый синоним следует ввести в поиск изображений Google или Yandex. На основе найденных изображений запишите, какие цвета чаще всего встречаются на картинках (какие цвета встречаются чаще всего). Найденные цвета являются визуальным восприятием нашей работы и вызывают эмоции у пользователя.
С помощью следующих инструментов вы можете создать цветовую палитру для нашего сайта, используя выбранные вами цвета.
-
Дизайнер цветовых схем 3 (http://colorschemedesigner.com/csd-3.5/). Помимо выбора цветов, эта услуга позволяет вам увидеть примеры того, как выбранные цвета будут смотреться на вашем сайте.
При работе с дизайном оригинальных и внутренних страниц стоит помнить о некоторых основных принципах.
Элементы Call to Action
Концепция приглашения к действию относится к интерактивным элементам, кнопкам и баннерам на сайте. Эти элементы создаются таким образом, чтобы пользователи всегда хотели нажать на них. Например, кнопки с приглашением к действию (клик, покупка, хранение), яркие баннеры с привлекательными предложениями, яркие изображения и т.д.
Эта концепция хорошо согласуется с принципом Аида (привлекательное поведение желания интереса — привлекает интересное поведение желания).
Эта концепция часто используется, когда вы хотите побудить пользователей выполнить какое-то действие, например, создать оригинальную страницу, поделиться страницей. регистрация, покупка и т.д. Переводя эту аббревиатуру на русский язык, можно использовать следующее понятие.
Поэтому принципы создания дизайна на основе этой концепции понятны. Например, яркие изображения, баннеры должны привлекать внимание пользователя. , кнопки с приглашениями к действию.
Однако этот принцип не может работать сам по себе без других вещей: схемы просмотра (наиболее естественного движения глаз по странице), световодов.
Просмотр страницы
Часто встречается вид страницы Рисунок Z. В соответствии с этим детали страницы обычно располагаются следующим образом. Логотип слева вверху, меню справа вверху, информационный блок, фото слева внизу, кнопка приглашения к действию справа внизу.
Наглядное пособие.
Оптические направляющие — это декоративные элементы страницы, которые перенаправляют взгляд пользователя на определенный элемент дизайна, форму, кнопку и т.д. Зрительным ориентиром может быть стрелка, направление взгляда человека на картинке, направление пальца или одно направление.
На первой фотографии глаза неправильно следуют за индикаторами мужчины, и когда он впервые смотрит на страницу, его прямой взгляд непреднамеренно втягивается внутрь себя.
Тот же результат продемонстрирован на втором рисунке с использованием сверхъестественной тепловой карты. В первом случае непосредственное появление ребенка (прямо в глаза) является главной достопримечательностью. Его внешний вид пользователь непреднамеренно обращает на блок с правой стороны.
Фрэймворки
При разработке страницы мы также используем фреймворк Bootstrap, Foundation и Material Design Light. и CSS-фрагменты (куски кода, разметки и многократно используемой разметки) вставляют на страницу данные (те же кнопки, формы и т.д.), а также классы разметки и JS-скрипты для интерактивных элементов.
Использование этих библиотек экономит время при разработке (дизайн, верстка), но в то же время использование каркасных элементов делает сайт похожим на другие сайты. На основе каждого контекста вы можете найти огромное количество бесплатных и платных тем и страниц, а также разработать свои собственные темы.
Готовые элементы дизайна на основе Bootstrap, Foundation и Material Design Lite (MDL)
Трэнды
Стоит отметить несколько новых тенденций в верстке и дизайне страниц.
Во-первых, следует упомянуть о So -Caled Destination Pages, которые включают в себя большие страницы, разделенные на соответствующие модули, и вводят пользователя в основное содержание сайта. Часто страница назначения является единственной страницей, которая может отображать всю необходимую информацию одновременно, не заставляя пользователя просматривать страницу. Лендинги обычно сопровождаются правильным оформлением информации, выверенной и аккуратной подачей, элементами приглашения к действию, интерактивностью (счетчик, анимация и т.д.).
То же самое стоит сказать и о внешнем виде страницы и вспомнить такие понятия, как искаженный или плоский дизайн.
Скептицизм.
Длительное рассмотрение уступает место плоскому дизайну. Эта концепция подразумевает наделение интерактивных элементов реальными свойствами. Например, оформление страниц библиотечной книги, оформление реальных кнопок с соответствующей имитацией нажатия, использование реальных текстур и т.д. Этот принцип активно использовался при создании страниц еще несколько лет назад, но затем тенденция изменилась, и на первый план вышел плоский дизайн (flat, material).
Плоский дизайн
В плоском дизайне используется минимум текстур и украшений, но в основе дизайна лежат понятия контраста, цвета и размера.
Развитие мобильных операционных систем сыграло важную роль в тенденциях веб-дизайна. Наиболее распространенным руководством к действию является решение Apple. Сначала она использовала имитацию реальных объектов в своем дизайнерском решении для iOS, а затем упростила все с помощью плоского пользовательского интерфейса. Плоский дизайн и материальный дизайн, которые Google активно развивает, сейчас доминируют в организации.
Есть отличный сайт, который сравнивает эти две концепции: http: //www.flatvsrealism.com/
Для изучения основ веб-дизайна и создания оригинальных материалов вам поможет эта книга: Джейсон Берд: Веб-дизайн: руководство для разработчиков.
Таким образом, процесс планирования макета страницы плавно переходит в предыдущий этап процесса "анимации". Прежде чем приступить к созданию HTML, CSS и JS, стоит кратко обсудить процессоры кода и структуру проекта.
Редакторы кода
Можно рассмотреть три наиболее популярных на сегодняшний день процессора кода.
Отчасти все эти процессоры похожи по принципу работы, и можно сказать, что это "процессоры на стероидах", поскольку вы получаете процессор во время установки и можете "поставить" необходимые модули и добавки. Единственное различие заключается в технологии, используемой для создания процессоров, sublime texts написаны на C ++ и Python. Из-за этого различия работа с sublime text может быть немного быстрее, чем с соответствующей программой.
Существуют и более сложные IDE, такие как Web Storm и PHP Storm, но вы можете обнаружить, что вам привычнее процессоры кода, а не IDE в табличных версиях.
Чтобы решить, что подходит именно вам, стоит рассмотреть несколько инструментов и выбрать тот, который лучше всего отвечает вашим потребностям.
Обзор текстового редактора:.
Структура проекта
Структура проекта относится к хранению файлов проекта в списке. Часто можно обнаружить, что все файлы "сложены" вместе и имеют имена, например, заглавные буквы, цифры или русские буквы. Во-первых, это просто невежливо по отношению к людям, работающим на вашем рабочем месте, а во-вторых, чем больше ваше рабочее место, тем больше у вас файлов, и в итоге просто возникает путаница и неразбериха, что к чему относится, а что нет.
Вам нужно поместить различные файлы в их собственные папки. Изображения в папке Image S или IMG, CSS в папке CSS, JavaScript в папке JS. Либо index.html и страницы размещаются в корне, либо index.html и страницы размещаются в папке pages. Если вы будете следовать этим правилам, вы не будете участвовать в проекте.
Стоит также упомянуть имена файлов проекта. Наиболее часто используются следующие названия Главная страница — index.html, styles.css, scripts.js или app.js. Минимизированные версии файлов имеют префикс. Минимальные, изображения отражают то, что отображается, например, button.png, download-icon.png, logo.png, а не русские или цифровые знаменитости.
Работа над проектом
Это позволяет продолжить рост после определения процессора кода. Во-первых, стоит отметить, что страница состоит из этапов. Сначала пишется структура HTML (HTML-код), затем добавляются стили, при необходимости пишутся скрипты (JS), добавляются необходимые плагины и библиотеки.
Исходя из вышесказанного, работу над проектом можно разделить на следующие этапы
Написание HTML
При написании HTML-кода теперь можно смело использовать метки и элементы разметки, связанные со стандартом HTML5. Если вам необходима поддержка старых браузеров, вы можете использовать, например, дополнение html5shiv (https://github.com/afarkas/html5shiv). /modernizr.com/) (html5shiv является частью структуры Modernizr, определяющей возможности листа, используемые для отображения сайта).
Современный подход к дизайну сайтов заранее основан на блоках без таблиц, iframe и т.д. Таблицы играют только прямую роль — представление информации в таблицах. Таблицы используются только в офисной версии в отношении электронной почты.
При написании HTML метки (язык разметки HTML) используются для построения некоего скелета страницы, абстрактной модели. Структуру может быть легче аннуировать, если вы изначально создали оригинал, или если вы разработали блоки страниц в черновом варианте, изучив макет страницы.
При написании маркировки можно также сразу описать класс и идентификатор предмета.
Соглашения об именовании классов
От структуры проекта до названий классов, обозначений классов и написания кода — все, с чем вы работаете, нуждается в определенном классе. Важно, чтобы имена классов и идентификаторов соответствовали типу информации и положению соответствующих разделов (заголовки, справочники, ссылки, строки, абзацы и т.д.), но в именах классов и идентификаторов важно создавать детектирование. Классы должны облегчать чтение кода и предоставлять абстрактное понятие блока, к которому они принадлежат, для написания стиля. В принципе, здесь нет ничего сложного. Если вы охарактеризовали меню, разумно предоставить класс .NAV или блок, содержащийся в .Navigation, если это текст текста, вы можете предоставить ему класс .block-text и т.д. .
Сегодня существует общий подход, который касается общих принципов планирования проектов, но на данном этапе нас особенно интересует именование классов. Этот подход называется BEM, что расшифровывается как модификатор блочных элементов.
По сути, этот подход можно описать как выражение контракта имени класса и маркировки страниц. Каждый элемент на странице является сущностью, которая может существовать независимо от своего содержимого — мы говорим о блоке (.block) или — только в контексте другой сущности — элементе (.block__ement). Сущности могут иметь различные критерии представления, такие как цвет, форма, прозрачность и т.д. Мендеры (.block__element_mod) отвечают за эти качества.
Таким образом, он представляет код как композицию блоков, элементов и их модификаций.
Методологические подробности: https: //ru.bem.info/
SMACSS
Существует также подход SMACSS (SMACSS расшифровывается как Scalable Modular and Modular Architecture of CSS). Он разделяет CSS на различные уровни: базовый, макет, унифицированный, статусный и тематический.
- На базовом уровне он относится непосредственно к HTML-меткам.
- На уровне макета он включает те, которые относятся к основным элементам страницы: модулям.
- Уровень модулей относится к многократно используемым элементам страницы: баннерам, навигации, спискам, информационным блокам и т.д.
- Слой состояния указывает, как модули и разделы отображаются в определенном состоянии (например, показаны или скрыты, свернуты или развернуты, активны или неактивны).
- Уровень предмета в некоторой степени похож на уровень штата и отражает то, как отображается раздел или отдел.
- Макет: .l- или .layout-.
- Поскольку модули являются важной частью проекта, нет необходимости называть модули с помощью module-prefix. Поэтому они перечислены в том виде, в котором они есть, например, .example>, .afisha.<> и т.д.
- Статус имеет префикс .is-. Например, .is-hidden.<>
- Уровни тем называются так же, как и модули.
Методическая информация и электронные книги: https: //smacss.com/ Русский перевод книг SMACSS: https: //github.com/andrew—r/smacss
Важно помнить, что соглашения об именовании предназначены для создания уровня абстракции, который делает проект управляемым и гарантирует, что проект не будет перегружен ненужным кодом и другими объектами.
Небольшой урок по основам HTML: посмотрите на
Написание CSS
Соглашения об именовании классов ведут к следующему шагу. После того как html-структура проекта описана, классы определены, можно приступать к написанию CSS-стилей и вырезанию макетов.
Стоит упомянуть два дополнительных файла CSS: normalize.css и reset.css.
Reset.css.
Первоначально написанный Эриком Мейером, файл reset.css использовался на протяжении всего проекта. Цель этого свода правил — восстановить стили по умолчанию, используемые браузерами для отображения элементов разметки. Поэтому при использовании reset.css нет необходимости переписывать стили браузера. По сути, вы работаете с чистого листа и можете сосредоточиться на создании собственных стилей с нуля.
Normalisation.css
Normalize.css, с другой стороны, не сбрасывает все стили, но нормализует их, делая внешний вид стилей проекта практически единообразным во всех современных браузерах.
Оба набора правил имеют свои плюсы и минусы, при этом нормализованный файл normalize.css в настоящее время является наиболее популярным. Популярность этого свода правил обусловлена тем, что основные свойства базовых элементов страницы не нужно переписывать, только изменять при необходимости.
Также стоит упомянуть "быстрый сброс", который записывает свойства всех элементов с помощью селектора *. Это эффективно удаляет все внутренние и внешние подкладки всех элементов на странице. Однако не рекомендуется (на мой взгляд) использовать эту технику, так как она замедляет процесс рендеринга страницы и не имеет практической пользы.
Обратите внимание, что все размеры и отступы берутся непосредственно из схемы чертежа. Чтобы получить эти значения, необходимо использовать инструмент "линейка" и направляющие (примерно набор инструментов Adobe Photoshop), прежде чем переносить эти значения в код. При работе с фиксированной версткой значения переводятся непосредственно в пиксели, но для "резиновой верстки" значения необходимо преобразовать в проценты. Основная формула — это ширина элемента, деленная на ширину фрейма (ширину содержащего блока). Например, если ширина блока, содержащего текст и изображение, составляет 400 пикселей, а ширина блока, содержащего текст, — 340 пикселей, то в процентном выражении это будет (340/400) * 100%, поэтому будет использовано 85%. сбоку от блока, содержащего текст.
Не перегружайте стиль слишком большим количеством конкретики. Например, если вы хотите, чтобы ссылки в списке были красного цвета, вам не нужно описывать всю строку классов и тегов. Просто укажите .main-nav ul li a, .main. —Если у вас слишком много "специфических" правил, правила становятся зависимыми от ситуации, вам приходится писать дополнительный код, и это влияет на скорость рендеринга страницы. Это связано с тем, что при разборе правил CSS анализатор должен читать правила справа налево и сначала получить все ссылки (a). Он отбрасывает все ссылки, не входящие в li, пока не достигнет включенных классов.
Специализация кода также означает чрезмерную привязку к ключевым тегам. Например, если элемент внутри .block имеет синий цвет и использует элемент span (в правилах мы написали .block span), нужно написать новый элемент, чтобы заменить его на div, например. div правило внутри .block. Таким образом, код перегружен ненужными правилами, которые по сути повторяют друг друга. Гораздо проще определить только один класс (класс элемента). Это гарантирует достижение желаемого результата при распределении на внутренние элементы.
Другим примером контекстно-зависимого кода является использование имен тегов вместе с именами классов, например. div.block. если то же имя класса должно быть применено к span, span.block или span.block и div.block должны быть переписаны. Это добавит дополнительную строку в ваш код.
Почему это важно? Во-первых, это гарантирует отсутствие лишней работы. Во-вторых, это избавляет от необходимости просматривать 1000 строк кода, чтобы найти соответствующее правило. Наконец, чем больше строк кода, тем больше файл, а чем больше файл, тем больше вероятность того, что слишком много конкретики замедлит работу страницы при ее загрузке.
Если вы используете правила спецификации CSS3, проверьте префикс вашего браузера на сайте http: //caniuse.com.
Возвращаясь к mobile-first, при работе в этом смысле нужно начинать писать стили с мобильной версии, а затем использовать медиа-запросы для добавления правил, которые работают в других разрешениях. Во многих случаях расширение правил с мобильного на настольный компьютер требует гораздо меньше кодирования, чем обратный подход — с настольного на мобильный.
Полезные ссылки и документация:.
- Сначала забронируйте мобильный телефон.
- Книга CSS. Рецепты программирования
- Большая книга по CSS3
- Книга CSS3. Руководство для разработчиков
- Краткий урок по основам CSS: см.
Написание JS
Поэтому последним шагом является создание JS-скриптов. Использование библиотеки jQuery стало почти стандартом в веб-разработке. Он позволяет легко манипулировать элементами веб-страницы (узлами DOM), подключать слушателей событий, отправлять запросы на сервер, обрабатывать результаты выполнения и т.д. Однако не стоит слепо доверять тренду. В последнее время нативный JavaScript достиг того уровня, когда jQuery, вероятно, не нужен. Поэтому, прежде чем слепо прикреплять jQuery, следует подумать, нужен ли он вам для выполнения задачи и не достаточно ли встроенных возможностей языка JavaScript.
Есть отличный ресурс, который предоставляет альтернативы тем же операциям JavaScript и библиотеки jQuery: http: //youmightnotneedjquery.com/, также хорошим подспорьем является https://developer.org/ru/, вы можете Помимо описаний методов и свойств JavaScript, вы также можете найти полифиллы конкретных методов (библиотеки или партии кода, которые добавляют поддержку новейших функций и методов JavaScript) (библиотеки или код партия).
Важно отметить, что использование JavaScript для настройки не рекомендуется. Другими словами, не используйте JavaScript для добавления кучи свойств CSS к объекту DOM (элементу страницы), чтобы выделить статус и т.д. Рекомендуется определить классы, т.е. предварительно классифицированные CSS (active, impossible, hidden, used и т.д.) и добавлять или удалять соответствующие классы при обработке элемента.
Например, если у вас есть элемент списка класса .list__item, и вместо того, чтобы писать все стили для указания того, активен ли он (выбран пользователем), вы можете просто добавить класс (.list__item — active). Этот класс специфичен для JS: и т.д. Небольшой пример с возможными способами назначения классов (мастера назначаются щелчком по зеленому квадрату): http: //jsbin.com/
Не рекомендуется использовать JavaScript для решения определенных задач явно на уровне CSS, или каким-либо образом выравнивать объекты, или пытаться добавить стили при наведении.
Опять же, возвращаясь сначала к мобильной связи, можно выделить две концепции, связанные с этим подходом. Постепенное улучшение и плавная деградация. Это приводит к постепенному улучшению и последовательной деградации. Эти принципы описывают два разных подхода к росту. В первом случае разработайте дизайн сайта и создайте сценарии для старых браузеров и систем, или определите поведение, когда сценарии не могут быть запущены, и постепенно совершенствуйте сценарии, демонстрирующие новейшие возможности и методы. Есть сайты, которые работают в старых и новых браузерах и средах (то же самое можно сказать и о CSS).
При использовании Graceful Degragment подход противоположный. По мере разработки для новейших браузеров мы начинаем вносить коррективы и изменения, чтобы учесть более старые версии.
Первый подход для мобильных устройств в некоторой степени похож на прогрессивное улучшение.
Проверка кода
После того как вы завершили написание HTML, CSS и JS для страницы, необходимо убедиться, что вы все сделали правильно. Для этого можно использовать онлайн-инструменты.
- Для проверки HTML: https: //validator.w3.org/
- Для проверки CSS: http: /jigsaw.w3.org/css-validator/
- Для проверки JS: http: //www.jslint.com/
Статьи, содержащие советы по созданию JS, HTML и CSS:.
Средства автоматизации
Сегодня почти все распространенные процессы разработки (кроме проектирования) могут быть в той или иной степени автоматизированы.
960gs.
Этот инструмент развития обсуждается в разделе, посвященном четким сеткам и дизайну. Надо сказать, что в 960GS предусмотрены не только положения для составления планов, но и собственные классы для занятий. Используя предоставленные в make классы и подключив к проекту систему CSS First, блоки сайта выстраиваются в эту сетку, что само по себе реально экономит время написания.
Эммет.
Emmet — это инструмент для работы с html и css (http://emmet.io/). Плагины для этого инструмента могут быть установлены, например, в Sublime Text, так что громоздкие куски html и css кода не нужно писать, а можно написать в строку и развернуть в полноценную разметку. Например, row.block> ul.list> li.list__item * 3 может быть развернут в полный код.
Затем текстовые значения должны быть записаны в элемент списка. То же самое относится и к css. Строка w:100px + h:150px + bgc:#ff0 расширяется следующим образом.
Использование этих инструментов делает написание кода более быстрым и приятным, поскольку меньше времени тратится на написание закрывающих блоков и переносов строк, а возможность не закрыть тот или иной элемент разметки уменьшается с точки зрения HTML. Например, что касается CSS, одна строка свойств CSS3 может быть расширена до многих путем добавления необходимых префиксов, что упрощает манипуляции с префиксами браузеров.
Следующий язык, о котором стоит упомянуть, это шаблонные языки, такие как нефритовый (http://jade-lang.com/). Опять же, с помощью jade написание html становится более быстрым и удобным, позволяя создавать многократно используемые блоки кода и микс-ины, а также получать желаемый макет с помощью нескольких вводимых параметров. Благодаря jade проекты могут поддерживать модульность в разметке и компоновке страниц, а часто используемые имена и блоки кода могут быть созданы как переменные (заголовок, название страницы и т.д.) или muxins в отдельных конфигурационных файлах и файлах соответственно. Для работы с jade, а точнее для преобразования кода, написанного jade, в html, необходимо установить платформу nodejs на свой компьютер с помощью командной строки (https://nodejs.org/en/, http: // nodejs .ru /).
Командная строка.
Работа в командной строке также может ускорить некоторые этапы работы над проектом, например, создание папок и файлов. Запустите консоль в каталоге проекта и введите одну строку.
Нажмите Enter, и вы увидите папки проекта css, images, js, styles.css и app.js в папках css и js соответственно, и index.html в корне проекта. Это экономит время при создании папок, написании имен и создании файлов. Командная строка также используется для работы с другими инструментами автоматизации.
Далее стоит поговорить о таких языках, как Sass (http://sass-lang.com/). Этот язык упрощает работу с css. Благодаря Sass вы можете писать вложенные классы, выполнять математические вычисления прямо в коде и создавать многократно используемые значения в качестве переменных в разных файлах или в начале файлов. Это значительно упрощает дальнейшую работу над стилем и облегчает модификацию того или иного значения. Это связано с тем, что все они хранятся в одном месте и нет необходимости "проходить" по всему проекту, чтобы внести соответствующие изменения. Также, благодаря Sass в проекте, можно соблюдать принцип модульности, сохранять части разметки в соответствующих файлах, подключать все к основному файлу и собирать весь код в один css-файл с помощью консольных команд. Он также поддерживает создание результирующего файла "на лету" во время написания стилей. Опять же, для работы с Sass требуется командная строка. Информацию о том, как установить пакет, смотрите на сайте http: //sass-lang.com/install.
Шаблон HTML5
html5boilerplate (https://html5bolerplate.com/) — это предварительно созданный проект, в котором уже есть index.html, remormize.css и т.д. Планируется. С помощью этого проекта вы можете загружать файлы со всеми файлами или использовать пользовательскую структуру: http: //www.initializr.com/. Опять же, принцип прост. Зачем тратить время на рисование одних и тех же линий или выполнение одних и тех же операций, если можно сосредоточиться непосредственно на рабочей задаче?
Gulp и Gantt.
gulp (http://gulpjs.com/) и grunt (http://gruntjs.com/) — это сервисы инициации задач, описанные в основном файле данных и запускаемые через совместимые устройства и через консоль.
Эти услуги помогают, например, использовать в разработке описанные выше инструменты Jade и SASS, автоматически преобразуя их в соответствующие файлы HTML и CSS, сжимая их при необходимости и проверяя свойства CSS на предмет их необходимости, например. Автоматическая замена префиксов браузеров.
Обе службы имеют разные подходы к описанию производительности, но на практике они работают одинаково. Полезное сравнение — http: //frontender.info/gulp-gunt-hatever/.
Многие сервисы, такие как Autoprefixer и JSShint, могут быть установлены как добавки в текстовые процессоры (Sumblime Text, Atom, Brackets) и инициализированы с помощью ключа мгновенного доступа.
Bootrstrap, Foundation и Material Design Lite.
Эти коробки уже упоминались в разделе "Дизайн". Однако о них стоит упомянуть еще раз, поскольку они помогают в определенной степени автоматизировать процесс сигнализации и обработки веб-сайта.
Если вы включите в свой проект файл каркаса, вы сможете использовать определенные в нем классы и экстракты меток. Это работает по уже описанным правилам и позволяет использовать предопределенный внешний вид (кнопки, вставленные поля, таблицы и т.д.). Таким образом, экономится время. Расположение, анализ и форматирование внешнего вида дизайн-блоков, кнопок и их размеров в соответствии с их статусом.
Все характеристики и примеры доступны на соответствующих веб-сайтах.
- Bootstrap: http: //getbootstrap.com/
- Фонд: http: //foundation.zurb.com/
- Material Design Light: http: //www.getmdl.io/
Надеюсь, все, что было описано, поможет вам найти тему для веб-дизайна и front-end разработки.
