Как научиться быстро верстать сайты


Как быстро верстать сайты

Автор: Анатолий Черкес /

Дата: Опубликовано: 19 мая 2019 /

Просмотров: 2742

Здравствуйте уважаемые друзья!

Если Вы хотите знать как быстро верстать сайты и уже знакомы с HTML и CSS, то эта статья для Вас.

В данном обзоре рассмотрен классический процесс вёрстки без использования препроцессоров и различных библиотек, например, таких как Bootstrap.

Ускорение вёрстки будет происходить за счёт применения правильного алгоритма самой вёрстки.

Насколько же быстро можно ускорить процесс вёрстки? По моим подсчётам строгое соблюдение данного алгоритма позволяет ускорить процесс вёрстки как минимум в 5, а то и в 10 раз.

Давайте сразу перейдём к делу.

Алгоритм быстрой вёрстки имеет 7 основных шагов

  1. Иметь подготовленный шаблон.
  2. Подключить нестандартные шрифты в самом начале вёрстки.
  3. Составить макет архитектуры тегов страницы.
  4. Иметь систему названий селекторов.
  5. Подготовить сразу все изображения.
  6. Вёрстку проводить по специальной схеме.
  7. Настроить скрипты и формы.

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

Подготовленный шаблон для вёрстки

Для ускорения вёрстки рекомендую каждому верстальщику иметь для этого специально заготовленный шаблон. Шаблон для вёрстки сайта представляет из себя папку с набором файлов и других подпапок. К основным файлам можно отнести:

  1. файл главной страницы сайта index.html с размеченной структурой HTML-страницы, основными первичными блоками, подключёнными файлами стилей и скриптов;
  2. файл стилей style.css – основной файл стилей со сбросом стилей и стилями для первичных блоков и меню;
  3. файл стилей media.css – файл стилей для адаптации с расставленными media-запросами и стилями адаптивного меню;
  4. файл скриптов script.js с настроенными скриптами различных блоков таких как адаптивное меню, меню аккордеон, всплывание модального окна и др.;
  5. папку images для хранения изображений;
  6. папку fonts для хранения нестандартных шрифтов;
  7. файл form.php – файл обработчик формы отправки заявки;
  8. другие файлы.

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

Минимум 5 часов времени Вы сэкономите при вёрстке каждого сайта, имея такой вот специальный макет для вёрстки.

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

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

Полную версию страницы можно посмотреть здесь.

Учитывая факт того, что дизайн был немного замороченный, и мне параллельно приходилось записывать видео вёрстки, то на вёрстку главной страницы сайта у меня ушло около 7 часов времени. Считаю это хорошим показателем. Думаю, что данный показатель можно было догнать и до 5 часов, если бы не приходилось отвлекаться на составление данного обзора. Если же Вы используете для вёрстки препроцессоры и библиотеку Bootstrap, то вполне вероятно сверстать такой сайт, имея свою заготовку для вёрстки, у Вас получится быстрее.

Подключение нестандартных шрифтов в самом начале вёрстки ускоряет процесс вёрстки

Большинству верстальщиков известна проблема кроссбраузерности нестандартных шрифтов на сайте. Одно дело подключить шрифты через сервис Google Fonts. Но этот способ не всегда приемлем. Второе дело подключить загрузку нестандартных шрифтов автономно с сайта. Вот здесь то и возникают различные траблы: то шрифт вдруг не отображается в каком-либо браузере, то в макете PSD, вы встречаете новый шрифт, который изначально не подключили. Начинаете его искать и снова подключать. А на это всё расходуется дополнительное время. Поэтому настоятельно рекомендую подключить все нестандартные шрифты на сайт в самом начале вёрскти.

Составление макета архитектуры тегов HTML-страницы ускорит Ваш процесс вёрстки минимум в 3 раза

Что такое макет архитектуры тегов страницы?

Макет архитектуры тегов страницы – это графическое отображение тегов на странице согласно дизайна.

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

Полный макет архитектуры тегов можно посмотреть здесь.

При разработке архитектуры тегов страницы необходимо учесть следующие факторы:

  • Вложенность блоков;
  • Соседство блоков;
  • Позиционирование элементов.

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

Составление макета архитектуры тегов страницы занимает около 20 минут времени, но в дальнейшем экономит от 3 до 20 часов времени на вёрстку.

Система названий селекторов

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

Система названий селекторов помогает избежать зависаний при вёрстке.

В моём случае система выглядит следующим образом: внешним тегам я задаю название логически соответствующее блоку (его содержимому), например, если это шапка, то название селектора будет header. Внутреннему блоку я задаю название внешнего блока + слово inside, т.е. внутренний блок у меня будет называться header_inside. Если внутри внутреннего блока идут два блока слева и справа, то каждый из них будет иметь соответственно следующие названия: header_inside_left и header_inside_right. В данной статье я не ставлю целью полностью расписать свою систему названий селекторов. Думаю, что смысл уловили.

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

Подготовка сразу всех изображений экономит время в процессе вёрстки

Для того, что бы не отвлекаться от самого процесса вёрстки, рекомендую произвести процесс нарезки изображений для сайта сразу. Хорошо было бы, если бы дизайнер передавал верстальщику макет PSD и уже нарезанные изображения. Но как показывает практика, в большинстве случаев верстальщик нарезает изображения с PSD сам. Да кто же лучше верстальщика это сделает? Ведь нарезка изображений должна логически ложиться в архитектуру тегов страницы.

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

Проведение вёрстки по специальной схеме

Все предыдущие этапы вёрстки рассмотренные в данной статье можно назвать подготовительными. Ну а теперь давайте рассмотрим основной этап вёрстки.

Что же из себя представляет специальная схема вёрстки?

Специальная схема вёрстки предусматривает 5 шагов вёрстки:

  1. Провести расстановку тегов согласно макету архитектуры тегов.
  2. Задать селекторы классов для тегов согласно системы названий селекторов.
  3. Задать свойства тегам.
  4. Доверстать внутренние блоки.
  5. Произвести попискельное равнение всех блоков.

Выше представлена моя субъективная схема. Любой верстальщик может данную схему усовершенствовать для себя.

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

Провести расстановку тегов согласно макету архитектуры тегов

Расстановка тегов подразумевает под собой написание тегов в HTML-странице согласно макету архитектуры тегов, который был создан на 3-м этапе алгоритма быстрой вёрстки.  Делается это очень быстро, т.е. за 5-10 минут мы полностью расставляем все основные теги страницы. Рекомендуется каждому внешнему блоку задавать комментарии. Обязательно соблюдать штабную культуру вёрстки, т.е. делать соответствующие отступы для каждого дочернего тега на один tab относительно родительского тега.

Задать селекторы классов для тегов согласно системы названий селекторов

Далее, для расставленных на предыдущем шаге тегов мы просто задаём соответствующие селекторы классов. Ещё одной хорошей рекомендацией по заданию названий селекторов классов служит задание селекторов с двумя словами через нижнее подчёркивание, а не через дефис. В данном случае в редакторе кода для выделения селектора класса достаточно будет произвести двойной щелчок левой кнопки мыши, что также экономит время. На выполнение данного пункта может уйти 5-10 минут.

Задать свойства тегам

После того как у нас построена HTML-структура тегов и заданы селекторы классов, теперь в файле стилей прописываем свойства данным селекторам классов. Здесь рекомендуется выявить повторяющиеся блоки и задать им свойства в одном месте. Например, у нас заголовки h3 имеют одинаковый размер шрифта, одинаковое обрамление, то мы один раз для тега h3 прописываем соответствующие стили и они автоматически применятся для всех наших тегов h3. Чем больше одинаковых блоков Вы выявите и пропишите им сразу стили, тем больше времени сэкономите при вёрстке.

Данный этап вёрстки является наиболее трудоёмким, поскольку приходится снимать параметры с макета PSD и задавать их в файле стилей. Также приходится сверять соответствие результата дизайну и при выявлении ошибок исправлять их.

В файле стилей рекомендуется проставлять комментарии.

Доверстать внутренние блоки

На данном этапе просто верстаем те блоки, которые не были свёрстаны ранее. Можно данный этап совместить с предыдущим.

Попискельное равнение всех блоков

Что я понимаю под попиксельным равнением? Это приведение вёрстки в точное соответствие с макетом. Т.е. на данном этапе все элементы выравниваются пиксель в пиксель под дизайн. Для решения данной задачи есть различные плагины позволяющие производить точное сравнение вёрстки и дизайна. Я же пользуюсь программой прозрачности мониторов «See Through».

Настройка скриптов и форм

После того, как всё свёрстано, можно произвести настройку всех необходимых скриптов и форм отправки писем на эмайл.

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

Так же стоит отметить, что если сайт планируется оставить на HTML и на нём надо будет сделать слайдер, то этап настройки скриптов рекомендуется перенести в начало нашего алгоритма ускоренной вёрстки. Т.е. сразу установить и настроить все скрипты, а потом уже верстать.

Общие выводы по алгоритму быстрой вёрстки

Ну что ж друзья! В данной статье я представил свой субъективный опыт для ускорения процесса вёрстки основанный на 10-и летнем стаже. Каждый верстальщик может данный алгоритм заточить под себя.

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

Основным выводом по данной статье стоит считать строгое соблюдение всех этапов алгоритма быстрой вёрстки.

Ниже представлен видео-обзор алгоритма быстрой вёрстки.

Желаю Вам удачи и до новых встреч.

Добавить комментарий

How To Type - Бесплатный тест набора текста, уроки набора текста и практика набора текста.

У вас может быть достаточно опыта набора текста, чтобы знать большинство общих клавиш - буквы, пробел, ввод, и держу пари, вы знаете, что это Backspace! Но ты мог бы быть неудобно работать с некоторыми клавишами, которыми вы пользуетесь не так часто. Вам нужно замедлить вниз а смотреть на клавиатуру набирать цифру или символ? Если вы программируете или работаете с электронных таблиц вы будете часто использовать символьные клавиши.Если вы геймер, есть возможно, CTRL, ALT и функциональные клавиши, за которые вы возитесь в пылу битвы. В Фактически, большинство программ можно использовать более продуктивно, если вы знаете комбинацию клавиш ярлыки для выполнения общих задач. Точное нажатие на эти неудобные клавиши и комбинации позволяет вам сосредотачивайтесь на том, что делаете, поэтому обязательно включайте их в свой набор текста практика.

.

Узнайте, как печатать быстрее. Советы по слепому вводу - Ratatype

Положение пальцев на клавиатуре

Цветная клавиатура под полем ввода урока поможет вам понять, каким пальцем следует нажимать каждую клавишу.

  • Нажимайте на клавиши только теми пальцами, для которых они зарезервированы.
  • Всегда возвращайте пальцы в исходное положение «ASDF - JKL;».
  • При наборе текста представьте себе расположение символа на клавиатуре.
  • Установите и поддерживайте ритм при наборе текста. Нажимайте клавиши с одинаковой периодичностью.
  • Клавиша SHIFT всегда нажимается мизинцем, противоположным тому, который нажимает на другую клавишу.
  • Большим пальцем той руки, которая вам удобнее, нажмите клавишу пробела.

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

.

Узнайте с этим веб-учителем, как быстро печатать / FileHorse.com

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

Портал для учителей
TypingWeb предоставляет все необходимые инструменты для составления отчетов, оценки и управления учащимися.

Проверенная учебная программа
Улучшите учащихся навыки набора текста с помощью комплексных проверенных уроков клавиатуры и игр.

Абсолютно бесплатно
Сэкономьте кучу денег в школе! Набор был и всегда будет на 100% бесплатным.

Обзор набора текста
Станьте мастером набора текста на клавиатуре бесплатно

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

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

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

Всего через несколько дней с Typing вы начнете испытывать улучшение скорости и точности набора текста, которые вы можете отслеживать в любое время с помощью встроенной аналитики, которая отслеживает время на сайте, скорость, точность и другие статистические данные.Универсальность Typing можно увидеть не только в отличной языковой поддержке (английский, испанский, немецкий, французский, итальянский, португальский и русский), но и в поддержке обучающих программ для iPhone по вводу текста на виртуальной сенсорной клавиатуре.
Typing - отличный репетитор по набору текста и обучающее приложение по клавиатуре, которым воспользовались более 5 миллионов студентов и 100 тысяч учителей. Его проверенная учебная программа и портал для учителей предлагаются всем бесплатно!

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

Регистрация и стоимость
Набор бесплатен как для студентов, так и для преподавателей.Однако, несмотря на то, что на сайте нет уровней подписки, он по-прежнему предлагает 3 премиальных пакета, которые предназначены для удаления рекламы и предоставления пользователям немного большего: 9,99 доллара в год удаляют рекламу, 14,99 доллара США удаляют рекламу и добавляют 16 премиум-уроков с «Lifetime Platinum» уровень разблокировки тех же функций навсегда с одноразовой покупкой.

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

.

How to Touch Type: A Complete Guide for Beginners

, чтобы понять, если бывший бывший сделает это на или наверх, то будет

Делайте больше, больше, сильнее, лучше, дольше, легче

Введите приведенное выше предложение как есть, используя клавиши Shift для больших алфавитов. Используйте сдвиг правильным пальцем. Например, при вводе Stronger нажмите клавишу Shift правой рукой, а для Better используйте правую руку для нажатия клавиши Shift.

Придумайте десять слов и начните печатать их на двух страницах.

Введите «В месяце 30/31 дней» для половины страницы и «В неделе 7 дней» для другой половины. «В году 12 месяцев» на следующей странице. А если у вас еще остался пар, напишите «365 дней в году».

Сегодня день проверки вашей скорости и точности.

http://10fastfingers.com/typing-test/english

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

В конце теста он покажет вам вашу скорость в словах в минуту (означает количество слов в минуту) и ваш процент точности.Если ваш результат составляет 15-20 слов в минуту с точностью 90%, это считается абсолютно хорошим.

abcdefjhijklmnopqrstuvwxyz abcdefjhijklmnopqrstuvwxyz

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

zyxwvutsrqponmlkjihjfedcba zyxwvutsrqponmlkjihjfedcba

Печатайте алфавиты, начиная с z и заканчивая a.

abcdefjhijklmnopqrstuvwxyz zyxwvutsrqponmlkjihjfedcba

Сегодняшнее упражнение самое важное. Если вы можете сделать это с легкостью, то половина дела сделана.

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

Повторите вышеуказанное упражнение.

Также введите «1 фут равен 30,48 см» и «1 кг равен 2,205 фунта» для каждой 2 страниц.

Это самообучающееся руководство, так что вы лучше всех судите о своем прогрессе. Оцените себя в категории «плохо», «хорошо» или «хорошо».

Если вы попали в первые две категории, повторите упражнение этой недели еще одну неделю, и я уверен, что вы почувствуете себя намного увереннее.

.

Смотрите также

Поделиться в соц. сетях

Опубликовать в Facebook
Опубликовать в Одноклассники
Вы можете оставить комментарий, или ссылку на Ваш сайт.

Оставить комментарий