Словарь “web-разработчика”

Благодаря целеустремленности и 6-ти летнему опыту, занимаем лидирующую позицию в web-разработке и оптимизации в странах СНГ и Европы. Ознакомиться с нашими работами можно в разделе Портфолио.

Контакты
?
Контакты
Эл. почта
verstkovo.ru@gmail.com

@font-face

@font-face – это правило помогающее с определением настроек шрифтов, а также с загрузкой определенных шрифтов на компьютер пользователя. В содержание конструкции именуемой @font-face находиться набор свойств для корректировки параметров шрифтов (font-family, font-size, font-style и др.), а так же сама ссылка на файл с шрифтом.

Адаптация верстки под retina

Адаптивная верстка под Retina – это верстка, способствующая корректному и качественному отображению Ваших картинок, текста и прочих графических материалов на странице сайта. Что бы понять для чего нужно верстка под «Retina» нужно понять значение этого термина. Retina, а точнее Retina ready – это жидкокристаллический дисплей с насыщенностью пикселей в 2-2,5 раза больше чем их аналоги, а результате чего на сайтах неоптимизированных под Retina, весь текст и изображения получаться смазанными.

alt

адаптивный дизайн сайта

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

alt

безопасный веб сайт

В первую очередь безопасный сайт, от не безопасного отличается наличием протокола шифрования «HTTPS» и подсвечивающийся зеленым в адресной строке браузера, но даже это не делает сайт безопасным. Протокол шифрования «HTTPS» не предоставляет возможность защиты от атак «man on the middle», что бы избежать подобных атак на Ваших пользователей необходимы способы повторной аутентификации ( при условии что на сайте есть платежные системы или личные кабинеты пользователей, если же таковых нет, достаточно протокола шифрования «HTTPS»)

блочная верстка

Наиболее современным подходом для верстки сайтов, считается его построение при помощи блоков, или так называемая блочная верстка. Layouts – так называют блочную верстку в англоязычных источниках. Расположение блоков при таком подходе к верстке будет один над другим, либо изменение их порядка отображения при помощи позиционирования с использованием CSS. Блочная верстка – это метод, используя который web-сат сайт строят использую теги div (так называемые блоки). Свойства тегов div: div – это блочный тег с необходимостью задания ширины, в противном же случае блок растягивается на всю ширину окна браузера. div – при незаданной высоте блока, она равняется его содержимому. Пустые блоки div имеют высоту в 0 пикселей, благодаря чему не отображаются на странице. div – не имеет собственного оформления. Для его использования необходимо задать ему стиль в CSS. В теге div отсутствует смысловая нагрузка, это способ структурирования сайта. div – может содержать в себе абсолютно любое количество тегов и вложенных элементов. Благодаря чему в него можно вкладывать другие блоки div, разнообразные заголовки и картинки в сочетании с параграфами, а так же многое другое.

alt

БЭМ методология

БЭМ – это технология, построенная на компонентной web-разработке по принципу «Блок, Элемент, Модификатор). Основа данной технологии заключается в разделении интерфейса Вашего сайта на независимые блоки. Такой подход позволяет в кротчайшие сроки, с минимальной затратой сил, разрабатывать web интерфейс любой сложности и повторно использовать уже существующий код, без использования «Copy-Saste».

alt

Дизайн-макет

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

alt

Комментарии в коде

Комментарии – это некое пояснение исходного кода программы или вебсайта. Находятся они в теле программы непосредственно в месте комментируемого кода. Синтаксис проставления комментариев на прямую зависит от используемого языка программирования. С точки зрения компилятора или Seo, использование комментариев в теле вебсайта, непосредственно не влияет на работоспособность или семантику. Подавляющее большинство программистов используют комментарии в коде программы для подробного объяснения конкретной области кода.

alt

Кроссбраузерность

Кроссбраузерность – это так называемая «Правильная верстка сайта». Благодаря данной верстке достигается одинаковое отображения Вашего web-сайта в различных браузерах. Реализуется же данная верстка благодаря использованию HTML и CSS, дополнительным хакам, а также в отдельных случаях — JavaScript. Для правильной визуализации и отображения сайта одновременно в самых разнообразных браузерах, начиная от самых ранних и заканчивая последними версиями, веб-дизайнер должен позаботиться о кроссбраузерности выполняемого проекта, с самого начала выполнения работы над web-сайтом.

alt

Метаданные

Мета-теги – это часть кода страницы, который формирует страницы Вашего сайта. Данные теги используют для фиксации конкретного аспекта информации на каждой странице сайта. Существуют различные виде мета-тегов, каждый из которых играет свою роль. Примеры некоторых из них <Title> – это мета-тег отображающийся на в верхней части браузера или на вкладках. В котором крайне важно указать отображаемый контент страницы. Данный тег, должен быть достаточно короткий, чтобы корректно отображаться в верхней части страницы. Такой тег как <Title> хорошо воспринимается поисковиками, он обеспечивает крайне качественное понимание о содержимом конкретной страницы Вашего сайта. <Title> отображается для Ваших клиентов в результатах поисковых систем. Крайне важно, чтобы тег <Title> был уникальным для каждой страницы Вашего Сайта. <Description> – данный мета-тег отвечает за текст, отображаемый Вашим клиентам непосредственно в результатах поиска и находиться под названием страницы. Данное описание страницы Вашего сайта должно состоять из двух, трех простых предложений в точности описывающих что находиться на той или иной странице Вашего сайта и не превышать размер в 200 символов. Целью такого описания является – подтверждения информации поиска на странице Вашего сайта. Все известные поисковые системы используют данное описание, поэтому оно должно быть насыщенно ключевыми словами и запросами, наиболее подходящими для конкретной страницы сайта, но не состоять только из них.

Нестандартные шрифты (начертаные)

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

оптимизация изображений

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

Ориентирование верстки

Ориентирование верстки – вёрстка бывает четырех типов: Фиксированная верстка – блоки не изменяют свою ширину в не зависимости от экранов пользователей. Резиновая вёрстка - Блоки меняют свою ширину в зависимости от размера окна браузера. Она может принимать максимальное и минимальное значение (свойство max-width). Но нельзя по мере уменьшения экрана из 50% сделать 100%. Адаптивная вёрстка – заточена под конкретные размеры экранов (352 x 240, 800 x 480, 1280 x 768 и другие) и любое изменение происходит рывками, после достижения одного из уровней Отзывчивая вёрстка - Это объединение резиновой и адаптивной вёрстки. В реализации самая сложная. Но результат получается наиболее приемлемый. Можно с уверенностью сказать, что сайт приспособится к любому устройству. Отзывчивая вёрстка – по сути своей это объединение адаптивной и резиновой верстки, считается самой сложной в реализации. Результат подобной верстки считается наиболее универсальным для любых устройств

Перестроение блоков

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

Скорость загрузки сайта

Наиболее важным в Сайте, является скорость его загрузки, которая влияет на множество факторов как со стороны ранжирования, так и с взаимодействия посетителей с сайтом. Хорошей скоростью загрузки сайта считается 0.5-3 секунды. Благодаря высокой скорости загрузки при одинаковом рейтинге сайтов с конкурентом, Вы сможете получить место в естественные выдачи выше чем сайты с более медленной скоростью загрузки. Скорость загрузки сайта немаловажна и для клиентов, сайты с хорошей скоростью загрузки более конверсионные, ведь некому из нас не нравиться, когда web-сайты долго грузятся. Подводя итог вышесказанного можно сделать вывод что – непосредственно увеличивая скорость загрузки сайта, мы получим не только плюсы в виде более высокого места в выдаче, но и коэффициент доверия клиентов, следовательно, % конверсий будет на порядок больше.

Скрипт

Скрипт – это программный файл сценарий, функционалом которого является автоматизация некоторых задач, которые пользователи делали бы вручную, используя интерфейс программы или веб сайта. Скрипты пишутся на различных языках программирования, которые различаться по своей сфере применения, возможностям, а также синтаксису. Примеры сферы применения различных скриптов: Пользуясь скриптами, пользователь получает возможность обращения к базам данных. Скрипты активно используются и в seo, они помогают продвигать веб сайты, используются в которых специализированные программы автоматизации – к примеру ХНЕ. Наблюдение статистики посещений (счетчики посещаемости) CMS и форумы полностью построенные на скриптах. Скрипты так же помогают динамическому отображению web-сайтов Возможность проведения изменений части страницы на сайте исключая полную перезагрузку страницы. И еще многое другое.

Спрайты

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

Теги для заголовков

Теги для заголовков – это теги непосредственно влияющие на восприятие страницы не только поисковыми роботами Яндекс и Google, но и посетителями Вашего сайта. Такие теги как <H1,H2,H3,H4,H5,H6> используются для заголовков на странице веб сайта и построение четкой структуры информации на Вашем веб сайте. Тег <Title> используется для задания названия интернет странице, но непосредственно не отображается на ней, длина такого тега не должна превышать рамки в 70 символов. Указание тегов <Title>, <H1>, <H2> позитивно скажется на ранжировании и облегчит взаимодействие пользователей с веб сайтом.

ТЗ или как правильно составить техничесское задание

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

Что такое CMS

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

alt

Шаблон сайта

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

BOOTSTRAP

Bootstrap – это самый популярный Фреймворк для разработки на Js, HTML и CSS. В первую очередь он набрал свою популярность как Фреймворк для разработки мобильных web-проектов.

alt

CSS 3

CSS (каскадная таблица стилей) – это язык программирования используемый для установки стиля и оформления внешнего вида Вашего сайта. Если быть точнее через CSS файлы задаются такие «Чрезвычайно важные» детали Вашего вебсайта как: Цвет, шрифты, расположение отдельных блоков и разнообразные аспекты представления внешнего вида сайта.

alt

GIT

Git – это распределённая система управления версиями файлов. Особенностью Git является то, что работа над версиями проекта может происходить не в хронологическом порядке. Разработка может вестись в нескольких параллельных ветвях, которые могут сливаться и разделяться в любой момент проектирования. Работу с версиями файлов в Git можно сравнить с обычными операциями над файловой системой. Структура состоит из четырех типов объектов: Blob, Tree, Commit и References; некоторые из них, в свою очередь, делятся на подобъекты.

Google PageSpeed Insights

Google PageSpeed Insights – это высокотехнологичный сервис, помогающий Web-мастерам оценить качество сайта, а именно: скорость загрузки web-сайта на персональных компьютерах и телефонах. Главное преимущество этого сервиса его бесплатность. Он дает рекомендации для разработчиков по возможностям ускорения загрузки страницы в браузере клиента. Алгоритмы данного ресурса меняются чрезвычайно часто, это происходит для совершенствования и следует всем требованиям поисковой сети Google. Данный сервис учитывает только факторы независящие от интернета сети посетителя сайта.

alt

Gulp

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

alt
Видео