Jump to content

Макет -- Relax Clinic (с ТЗ)


klierik
 Share

Recommended Posts

rc_index.jpg

 

Скрытый текст

rc_inner.jpg


 
Техническое задание.
 
Базовые требования
Платформы: Windows, Mac OS X.
 
Браузеры

  • IE8 и выше
  • Chrome последние 2 версии
  • Firefox последнии 2 версии
  • Opera последнии 2 версии (на базе движка Blink)
  • Safari последнии 2 версии

В качестве эталонного браузера использовать Chrome или Firefox.
Это значит что в одном из них вёрстка должна как можно точнее соотвествовать макету, в остальных не должно быть визуальных отличий.
 
Соответствие макету
Вёрстка должна 1:1 соответстввовать дизайну, но допускаются незначительные различия. Данные различия, как правило, возникают из-за шрифтов или при использовании технологии адаптивной разметки. В помощь прийдет инструмет PixelPerfect -- расширение для браузера.
 
Отдельно отмечу что верстка должна быть написана в лучших традисиях graceful degradation. Т.е. всё современные фишки оформления должны быть выполнены средствами CSS. Браузеры которые не поддерживают CSS3 или некторые его свойства должны корректно рендерить страницу без них.
 
Стандарты
HTML5/CSS3. HTML - должен проходить валидацию. CSS - не обязательно.
 
В кажестве исходного кода для CSS использовать препроцессор LESS или SASS.
Не обязательно, но крайне желательно использовать Grunt для генерирования LESS/SASS в CSS с применением технологии сжатия.
 
Сброс стилей
В качестве сброса стилей браузера использовать Normalize.css.
 
Javascript:
За основу взять фреймворк jQuery версии 1.11.х или 2.x.x.
Для поддержки HTML5 тегов в IE можно использовать код:
 

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]><script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script><![endif]-->

 
Допускается применение modernizr если потребуется.
 
Ширина сайта
Стандартная ширина сайта - 100%.
 
Изменение/наполнение контентом
Блоки могут и будут содержать иной контент, отличный от того что в макете. Контент может занимать как больше так и меньше пространства. При вёрстке следует это учесть что бы в будущем макет не "поехал".
 
Особености макета
Главная страница
1. Фоновое изображение должно занимать полностью область окна браузера. По умолчанию картинка имеет значение ширины 100%.
1.1. В случае если ширина окна браузера больше чем высота, ширина картинки 100%, высота "auto". Картинка приклеена к верху и обрезается снизу.
1.2. В случае если ширина окна браузера меньше чем высота, установить значение высоты для картинки 100%, а для ширины "auto". Картинка должна выравниватся по центру, тем самым обрезая края слева и справа.
1.3. Вышеуказанные пункты реализовать при помощи CSS3
2. Меню
2.1. Меню имее отступ сверху фиксированный.
2.2. Высота меню не фиксированна. Количество пунктов может менятся. Текст в пункте меню может быть в несколько строк -- такой пункт должен выглядеть более сжатым по отношении к другим за счет line-height.
2.3. Ширина меню фиксированна.
3. Слайдер
3.1. Блок с текстом всегда должен быть по-центру как вертикально так и горизонтально. Контент внутри может и будет менятся.
3.2. Ширина блока по-центру может занимать все доступное срастранство, но не может "налазить" на меню слева. Так же этот блок не должен "налазить" на индикацию в нижнем правом углу если там будет много слайдов.
3.3. Индикация слайдов размещается в нижнем правом углу. Отступы справа и снизу фиксированные. Элементы индикации могут выстраиваются в несколько строк при сужении экрана (в таком случае возможна ситуация конда индикация ложится поверх блока по-центру). Кликатебельная зона должна быть достаточной что бы в неё можно было тыкнуть пальцем на смартфоне.
3.4. Требуется поддержка touch-устройств.
 
Внутреняя страница
1. Блок с белой рамкой имеет фиксированную высоту, выравнивается по-центру области в которой размещается. Его ширина может достигать ширины всей строки, за вычитом ширины меню. Текст внутри данного блока должен выравниватся вертикально по-центру. Строк может быть как одна так и две. Если контент превышает область -- прятать излишки.
2. Белая область на странице.
2.1. Данная область занимает всё пространство области, при этом имея фиксированный отступ сверху и слева.
2.2. Левая колонка имеет фиксированную ширину
2.3. Правая область, с картой, занимает все доступное пространство.
 
Масштабирование страниц
Поддержка не обязательна. Пользователь сам на себя берет отвественность за результат отображения страницы применяя к ней любые инструменты которые влияют на её изменение.
Если есть желание все таки учесть поддержку масштабируемости, то советую почитать про Эластичные шаблоны, а так же опосля ознакомится с "rem"
 
HTML код

  • Кодировка – utf-8
  • Структурный, не комментируемый код
  • Семантическая разметка на уровне грамотного использования тегов.
  • Имена классов и идентификаторов – осмысленные, на усмотрение разработчика.
  • Классы служат для привязки оформления, идентификаторы – скриптов.

LESS/SASS код

  • Структурный, отбивка табами.
  • Комментариями обозначены начало/конец крупных модулей/блоков разметки.
  • Допускается использование вендорных префиксов.
  • Стили для IE вынесены в отдельные CSS файлы, если они потребуются.
  • Для реализации в IE не поддерживаемых CSS свойств использование javascript хаков, или каких либо других интсрументов, запрещено (выше уже упоминалось про graceful degradation)

Перед тем как приступить к работе настоятельно рекомендую ознакомится с темой Типичные ошибки начинающего верстальщика
 
Javascript код

  • Структурный, отбивка табами.
  • Имена переменных осмысленные, на усмотрение разработчика.
  • Снабжен комментариями: описаны назначения
    • методов/классов
    • функций
    • условий
  • Для объемных задач используется ООП, для простых – обычные функции.
  • Код должен быть без ошибок.
  • При использовании Ajax и не предоставления заказчиком api для взаимодействия с серверной частью, api создается на усмотрение разработчика.

Изображения

  • Имена файлов осмысленные, на усмотрение разработчика.
  • Графику следует оптимизацировать в Photoshop (использую инструмент "Save for Web") и ImageOptim (OSX) или OptiPNG (Windows)
  • Малые изображения и иконки объеденить в спрайты.
    • Для полноцветных RGBA картинок можно использовать инструмент Stitches
    • Для векторных изображений иожно использовать IcoMoon

Организация структуры файлов и папок

  • HTML файлы лежат в корне. Главная страница – index.html. Остальные – по именам макетов.
  • Стили в папке - /css/
  • SASS/LESS в соответствующей папке - /sass/ или /less/
  • Javascript - /js/
  • Изображения оформления - /images/
  • Изображения содержания - /thumbs/ или /pic/
  • Шрифты - /fonts/

Наглядный пример
 
Краткий вариант - только директории:

Скрытый текст

 


.├── project
│   ├── css
│   ├── images
│   │   ├── carousel
│   │   ├── gallery
│   │   ├── icons
│   │   │   └── src
│   │   ├── ie
│   │   ├── loader
│   │   ├── table
│   │   └── title
│   ├── js
│   │   ├── plugins
│   │   │   ├── jcarousel
│   │   │   └── typeahead
│   │   └── scripts
│   ├── less
└───└── thumbs

 


 
Полный вариант -- директории и файлов:

Скрытый текст

 


.├── project
│   ├── 10.html
│   ├── 11.html
│   ├── 3.html
│   ├── 4.html
│   ├── 5.html
│   ├── 6_1.html
│   ├── 6_2.html
│   ├── 7_1.html
│   ├── 8.html
│   ├── 9.html
│   ├── css
│   │   ├── project.css
│   │   ├── project.ie8.css
│   │   └── project.min.css
│   ├── images
│   │   ├── carousel
│   │   │   ├── control_left.png
│   │   │   └── control_right.png
│   │   ├── gallery
│   │   │   ├── control_corner_next.png
│   │   │   └── control_corner_prev.png
│   │   ├── icons
│   │   │   ├── Readme.txt
│   │   │   ├── spritesheet.png
│   │   │   ├── src
│   │   │   │   ├── bank_atm.png
│   │   │   │   ├── bank_office.png
│   │   │   │   ├── close.png
│   │   │   │   ├── social_fb.png
│   │   │   │   ├── social_gplus.png
│   │   │   │   ├── social_li.png
│   │   │   │   ├── social_mail.png
│   │   │   │   ├── social_pin.png
│   │   │   │   ├── social_rss.png
│   │   │   │   ├── social_tw.png
│   │   │   │   └── tags.png
│   │   │   ├── stitches.txt
│   │   │   └── stylesheet.less
│   │   ├── ie
│   │   │   └── caption-bg.png
│   │   ├── loader
│   │   │   ├── ajax-loader.gif
│   │   │   └── ie.png
│   │   ├── logo.png
│   │   ├── table
│   │   │   ├── sort-asc.png
│   │   │   └── sort-dsc.png│
│   └── title
│   │   └── credits.png
│   ├── index.html
│   ├── js
│   │   ├── jquery-1.10.2.min.map
│   │   ├── jquery.min.js
│   │   ├── plugins
│   │   │   ├── jcarousel
│   │   │   │   ├── jquery.jcarousel-autoscroll.min.js
│   │   │   │   ├── jquery.jcarousel-control.min.js
│   │   │   │   └── jquery.jcarousel-core.min.js
│   │   │   └── typeahead
│   │   │   ├── countries.json
│   │   │   ├── typeahead.js.zip
│   │   │   └── typeahead.min.js
│   │   └── scripts
│   │   ├── project_navigation.js
│   │   └── project_scroll_gallery.js
│   ├── less
│   │   ├── block.less
│   │   ├── breadcrumbs.less
│   │   ├── buttons.less
│   │   ├── carousel.less
│   │   ├── close.less
│   │   ├── dropdown.less
│   │   ├── forms.less
│   │   ├── project.less
│   │   ├── icon.less
│   │   ├── jquery.jcarousel.less
│   │   ├── jquery.typeahead.less
│   │   ├── layout.less
│   │   ├── loader.less
│   │   ├── mixins.less
│   │   ├── modal.less
│   │   ├── navbar.less
│   │   ├── navs.less
│   │   ├── page.less
│   │   ├── pagination.less
│   │   ├── scaffolding.less
│   │   ├── std.less
│   │   ├── tables.less
│   │   ├── unit.less
│   │   └── variables.less
│   ├── thumbs
│   │   ├── block__banner.jpg
│   │   ├── google-map.jpg
│   │   ├── home-page__gallery_03.jpg
│   │   ├── home-page__gallery_05.jpg
│   │   ├── home-page__gallery_07.jpg
│   │   ├── home-page__gallery_09.jpg
│   │   ├── home-page__gallery_11.jpg
│   │   ├── jcarousel_slide.jpg
│   │   ├── navigation__dropdown__thumb_03.jpg
│   │   ├── news_thumb_03.jpg
│   │   ├── news_thumb_06.jpg
│   │   ├── news_thumb_08.jpg
│   │   ├── std__thumb_01.jpg
│   │   ├── std__thumb_02.jpg
│   │   ├── unit__thumbnail_03.jpg
│   │   ├── unit_promo__thumb_03.jpg
│   │   ├── unit_promo__thumb_05.jpg
│   │   ├── unit_promo__thumb_07.jpg
└───└───└── unit_promo__thumb_09.jpg

 


 
Удачи в обучении  :)
 
Автор макета -- Павел Борисенко предоставил данную работу на благо обучения начинающим  :)
За основу ТЗ был взят пример со статьи Техническое задание на верстку сайта

design 2 - relax clinic.zip

Edited by klierik
Link to comment
Share on other sites

  • 9 months later...

А что должно происходить при прокрутке слайдера? Меняется фон, затем меняется ли текст в рамке? (вместе с рамкой?). Ещё что-то меняется? + Можно ли прокручивать слайдер, когда открыто белое окно с контентом? 

Link to comment
Share on other sites

  • 3 months later...

Не ТЗ, а жесть какая-то. Мозг сломать можно.

 

Например:

- п. 2.3 ширина меню фиксирована, после чего открываем спойлер и видим, что меню на внутренней странице очевидно шире и плюс ко всему заполнено непонятными пунктами. Как это верно понять? Дизайнер ступил? Когда мы клацаем на "Контакты" мы получаем одну страницу "Контакты", а меню остается старое или меняется на какое-то новое?

 

- в п. 1.1 и 1.2 говорится об разных пропорциях окна сайта, а вот о том какая минимальная ширина и высота может быть не указано. Судя по тому, что платформы PC, то ширина минимум 960px должна быть? 

 

-  2. Белая область на странице.  п. 2.1. Каким образом там будет фиксированный отступ слева, если меню увеличится допустим вдвое и очевидно начнет залезать/сливаться на область "Контакты"?

 

- ни слова не сказано о том как поведет себя белое окно "Контакты" при сужении окна по горизонтали или вертикали. Откуда попросту выплывает, что у нас все же должны быть минимальные ширина и высота для макета. В противном случае верстальщик делает как ему удобно, а не как надо.

Edited by advokatua
Link to comment
Share on other sites

  • 4 months later...

В самом начале ТЗ такие пункты:

Базовые требования
Платформы: Windows, Mac OS X.
 
Браузеры

  • IE8 и выше
  • Chrome последние 2 версии
  • Firefox последнии 2 версии
  • Opera последнии 2 версии (на базе движка Blink)
  • Safari последнии 2 версии

Подскажите, пожалуйста, возможно ли технически совместить проверку на эти операционные системы и браузеры на одной рабочей станции?

Какими средствами это осуществляется?

Буду очень благодарен за ссылку на подробное описание этого вопроса. 

 

И еще вопрос. После написание ТЗ прошло уже полтора года. Список требуемых браузеров остается по прежнему актуальным на сегодняшний день?

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

Edited by Alok
Link to comment
Share on other sites

В самом начале ТЗ такие пункты:

Базовые требования

Платформы: Windows, Mac OS X.

 

Браузеры

  • IE8 и выше
  • Chrome последние 2 версии
  • Firefox последнии 2 версии
  • Opera последнии 2 версии (на базе движка Blink)
  • Safari последнии 2 версии

Подскажите, пожалуйста, возможно ли технически совместить проверку на эти операционные системы и браузеры на одной рабочей станции?

Какими средствами это осуществляется?

Буду очень благодарен за ссылку на подробное описание этого вопроса. 

Можно использовать VirtualBox

Link to comment
Share on other sites

Подскажите, пожалуйста, возможно ли технически совместить проверку на эти операционные системы и браузеры на одной рабочей станции?

 

Проблемы с вендорными префиксами к CSS свойствам можно решить с помощью постпроцессора Autoprefixer, там есть возможность выбирать для каких браузеров и каких версий вам нужно добавлять вендорные префиксы.

 

Mac ОС установить на виртуалке чтобы проверять результат.

 

Кстати есть онлайн сервисы для проверки результата. К примеру http://browsershots.org/

Вот тут в статье описано больше вариантов http://www.avalon.ru/OpenLessons/WebDev/Lessons/testing-tools/копировать не вижу смысла сюда.

Link to comment
Share on other sites

И еще вопрос. После написание ТЗ прошло уже полтора года. Список требуемых браузеров остается по прежнему актуальным на сегодняшний день? IE8 вроде как уже меньше полпроцента пользуются.
 

Если сам понимаешь что ТЗ писалось 1.5 года назад то зачем задаешь такой вопрос? А если бы ему было 10 лет уже то что? Здравый смысл же все имеют )

Да и каждый волен выбирать те браузеры которые хочет — это лишь обучение.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By Andy_Code
      Здравствуйте! Проблема заключается в следующем: есть стартовый шаблон от "Фрилансера по жизни" версии 2021 года, открываю в VSCode, ввожу в терминале npm i затем gulp, все срабатывает как и должно, создается папка с результатом, начинаю прописывать стили для header, задаю ограничивающий контейнер и при проверке работоспособности данного контейнера выясняется, что стили, прописанные мной перекрывают стили медиа-запросов, прописанных в шаблоне и по итогу адаптив не работает, получается что итоговый css собирается в не правильном порядке! Подскажите, пожалуйста, как подобную проблему можно исправить?)
    • By vladdvin
      Верстаю макет с Фигмы - https://www.figma.com/file/2rdy1qjBTl7D6BAC8S4qlf/Webovio?node-id=0%3A1. Наверстал
      CSS
      В результате отображается следующая картинка

      в режиме инструментов разработчика. А вне режима вообще отображает

      Подскажите как добиться отображения текста как на макете.
    • By RaiderCoder
      Здравствуйте , сделал макет сайта для интернет магазина . Но столкнулся с проблемой при верстке кнопок на главной странице и не нашел информации как можно уместить текст + несколько картинок в одну кнопку. Знает кто решение и реалезуемо оно вообще ?

    • By dissamen2
      Здравствуйте, столкнулся с такой проблемой, что в десктопной версии сайта все работает нормально, однако при переходе на мобильную, блок становится пустым и занимает гораздо меньше места, в чем проблема?
    • By Hinn
      Всем приветик, начинающий фрилансер. Ищу первые заказы в данной сфере. Занимаюсь:
      • На малом уровне версткой;
      • Хорошо разбираюсь в таких CMS: как Wordpress и Tilta - легко и быстро разработаю одно страничные, многостраничные сайты, интернет-магазины (могу как дорабатывать, так и создания с нуля, так же занимаюсь переносом одного сервера на другой);
      • Увлекаюсь разработкой логотипов (логотипы с нуля, доработка логотипа, рисование логотипа по эскизу).
      Готов заниматься работой за любую плату. Так же присутствует портфолио, но за частую людям интересно когда о тебе есть отзывы. Поэтому пришел сюда за практическим опытом, и поиском постоянной работы.
      Использую:
      - Верстка: (HTML5/CSS3), верстаю из Figma, Photoshop, illustrator.
      - Разработка сайта: (CMS WordPress, Tilta).
      - Разработка логотипа: (Photoshop, illustrator)
      Если не знаю чего-то необходимого для Вашего проекта\работы -- обязательно разберусь (все-таки начинающий фрилансер).

      Если вы разработчик и вам некому спихнуть рутинную работу - я с радостью возьму её на себя;

      телеграмм: HinnWork;
      почта: balistic.baty@gmail.com

      Открыт для любых предложений. 
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy