Требования к современной верстке.

Что такое Frontend и Backend?

Фронтенд — все что видит клиент, это публичная часть сайта, с которой непосредственно контактирует пользователь.

Бэкэнд — серверная часть (работа с БД, обработка данных, и т.д.), в общем все, чего клиент не видит.

Языки программирования если их можно так назвать которые входят фронтенд – это HTML(HyperText Markup Language, язык разметки гипертекста), CSS(Cascading Style Sheets, каскадные таблицы стилей), и прототипно-ориентированный язык программирования JavaScript.

Языки программирования которые входят в бэкенд – это такие как PHP, Perl, ASP.NET, Python, Ruby, SQL(формальный непроцедурный язык программирования).

Современные технологии вёрстки.

CSS-фреймворки.

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

Плюсы CSS-фреймворков:

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

Возможность создать корректный HTML макет даже не очень опытному специалисту

Единообразие кода

Увеличение скорости разработки

Минусы:

Привязанность к стилю CSS библиотеки

Избыточный код

Bootstrap.

Один из самых известных CSS-фреймворков на сегодняшний день. Имеет в своем составе шаблоны для отрисовки кнопок, сайдбаров, навигационных панелей, форм и других элементов сайта. Включает себя JavaScript-расширения.
Основные инструменты bootstrap — шаблоны, @media, формы, навигация, алерты, типографика и конечно же, сетки. Bootstrap совместим со всеми основными современными браузерами, но в старых версиях браузеров могут быть проблемы. Поддерживает адаптивность. Использует языки Less и Sass.

 

Foundation.

Распространенный CSS-фреймворк. Наряду с другими основными элементами включает в себя несколько HTML шаблонов с различным расположением блоков на странице. Имеет большой набор компонентов на JavaScript. Очень серьезный по своим возможностям и составу фреймворк. Использует Sass. Совместимость кода со всеми основными браузерами.

 

Semantic UI.

Поддержка Firefox, Chrome, Safari, Internet Explorer, Android 4, Blackberry10. Содержит большое количество компонентов: иконки, изображения, надписи, меню и другие стандартные компоненты. Поддерживает последние версии HTML и CSS и имеет хорошую подборку скриптовых модулей и API. Использует Less. По применимости соревнуется с bootstrap. Есть вариант на русском языке, но неполный, а организаторы проекта предлагают помочь в переводе.

Требования к современной верстке.

Чем качественнее выполнена верстка сайта, тем лучше будет работать сайт или блог. Профессиональную верстку может выполнить только хороший специалист верстальщик. Какие же требования сегодня предъявляют к верстке? Вот они:

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

2) Адаптивность.

3) Минимум кода.

4) Высокая скорость загрузки страниц.

5) Семантичность.

6) Валидность.

 

Фиксированная верстка или статическая. Вне зависимости от размеров окна браузера или устройства ширина страниц будет постоянной. Все элементы занимают строго определенную ширину в пикселях на странице. Если разрешение экрана большое и окно браузера развернуто на весь экран, то, как правило, по бокам остается свободное место. И наоборот, на мобильных устройствах при фиксированной верстке снизу на странице появляется полоса прокрутки.

Резиновая верстка. Страница занимает всю ширину браузера, каких бы размеров она не была и на каком бы устройстве вы не открыли эту страницу. Ширина элементов страницы задается в процентах от ширины окна, и поэтому занимают всю доступную область.

Табличная верстка или верстка таблицами. В данном случае сетка страницы строится с помощью таблиц. Это очень неудобно, да и надобности в этом уже нем. Сегодня так страницы уже давно не верстают. Более того, поисковики не любят такие страницы и плохо их индексируют.

Блочная верстка, верстка блоками или div-верстка. Это, пожалуй, самая распространенная верстка сегодня. Сетка страниц конструируется из множества блоков <div> и <span>, которые вложены друг в друга. Для доступа к ним используются атрибуты id и class. Откройте исходный код (Ctrl + U) практически любой веб-страницы и вы увидите такую верстку.

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

Семантическая верстка. Она явилась логичным продолжением блочной верстки и стала доступна в HTML5. Новые теги делают станицу более структурированной. Поисковики любят такие страницы.

Кроссбраузерная верстка. Как понятно из названия, при такой верстке страницы выглядят одинаково в разных браузерах. Первое, с чего обычно начинают — подключают к странице специальный CSS файл — сброс стилей.

Валидная верстка или по-другому верста без ошибок. Это верстка, выполненная в соответствии со стандартами W3C.

CMS(Система Управления Контентом)системы:

Например:

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

OpenCart — это движок интернет-магазинa, вокруг которого сформировалось большое сообщество (более 46 000 участников), благодаря чему существует более 8 500 бесплатных и коммерческих дополнений позволяющие изменять и дополнять функции магазина самым разным образом.

CMS систем большое количество(Joomla, Drupal, Modx, Ucoz, bitrix, Umi, netCat, magento итд.)

Текстовые редакторы:

Предназначены для веб – программирования, есть свои плагины и дополнительные функции для удобной разработки.

Sublime Text

ATOM

Brackets

PhpStorm

Notepad

 

Графические редакторы:

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

 

Adobe photoshop

Coreldraw

Sketch