Верстка макета из Figma в XHTML + PrimeFaces + JavaServer Faces
Нужна качественная адаптивная + кроссбраузерная верстка
Макет: https://www.figma.com/file/F9N18MbDtHrSBYTaON0ftB/naVse
Технические требования для разработки верстки макета.
В связи с тем, что проект использует за основу фреймворк PrimeFaces (https://www.primefaces.org/) в дальнейшем PF и реализует в себе разметку JSF (https://uk.wikipedia.org/wiki/JavaServer_Faces, https://www.tutorialspoint.com/jsf/) есть ряд ограничений.
Макет.
- Верстку необходимо делать с учетом используемых компонентов PF см. документацию (https://www.primefaces.org/showcase/).
- Максимально использовать компоненты PF
- Важно! Изменять визуальное отображение PF компонентов по крайней необходимости.
- Использовать составные компоненты <ui:composition xmlns="http://www.w3.org/1999/xhtml" …> если это не главный шаблон.
- Отдельный компонент в отдельном файле.
- Все компоненты инклудить в мастершаблон <ui:include src="/components/[component_name].xhtml" />
- Описывать namespace в компонентах
<html xmlns:f="http://java.sun.com/jsf/core", xmlns:ui="http://java.sun.com/jsf/facelets", xmlns:p="http://primefaces.org/ui" …> - Использовать разметку XHTML
- Создать грамотную структуру папок проекта
- Минимум элементов, которые потребуют создания графических файлов
Стили.
- Использовать CSS-препроцессоры Sass (SCSS) (https://sass-lang.com/documentation).
- Разделить сущность на:
- Константы (constants.scss)
- Функции (functions.scss)
- Миксины (mixins.scss)
- Плэйсхолдеры (placeholders.scss)
- При стилизации компонента страницы учитывать вес селекторов.
- Верстку разделять на отдельные компоненты.
- Для media запросов использовать breakpoint system проекта:
- xxs: 320px;
- xs: 480px;
- sm: 640px;
- md: 768px;
- lg: 960px;
- xl: 1200px;
- xxl: 1440px;
Скрипты.
- Использовать модульный подход.
- Отдельный модуль в отдельном файле.
- В проекте подключен jQuery 3.5.1 использование $() допускается.
- Максимально не вмешиваться в работу встроенного компонента сторонними скриптами.
Компоненты PF используют логику работы описанную в Core PF
Шрифт.
- Важно! Использовать шрифт проекта Montserrat, sans-serif
- Важно! Использование стороннего шрифта не допускается.
Иконки, элементы навигации.
- Все иконки в макете должны соответствовать общепринятым размерам (16х16, 24х24, 32х32, 48x48 и т.д. кратность 8).
- Все иконки должны быть в формате .SVG. В 100% размере с оригиналом в макете
- Элементы навигации типа стрелок, иконок в отдельном .SVG формате на прозрачном фоне.
- По максимум использовать формат .SVG для оформления
Сборщик.
Сборка проекта производится под средством webpack 4.41.2
Материалы.
Минимальный комплект материала для передачи верстальщику
- Папка с компонентами содержащая XHTML файлы
- Папка с графическими материалами
- Папка SRC содержащая папки стилей и скриптов исходных файлов сборки такие как SCSS, JS
- Папка собранного проекта после обработки сборщиком.
Додатки 1
-
1547 23 0 Здравствуйте! Меня заинтересовало Ваше предложение. Примеры работ http://www.victoryzorkina.pl.ua/ .Точные сроки и стоимость смогу сказать после обсуждения всех деталей. Пишите, буду рада сотрудничеству.
-
1144 39 3 4 Добрый день!
Сейчас свободный, готов выполнить ваш проект, пишите в личные сообщения - обсудим.
Также можете посмотреть портфолио выполненных робот, на моем сайте.
https://web-shum.com.ua/portfolio.html
-
2276 114 1 Здравствуйте. Специализируюсь на адаптивной верстке.
Создаю чистый, валидный, компактный и кроссбраузерный код
(scss+gulp, flexbox, оптимизация по google page speed, валидация, настройка форм, анимации и тд).
Работы в портфолио профиля. Буду рад сотрудничеству.
////////////////////////////////
Актуальні фриланс-проєкти в категорії HTML та CSS верстання
Верстка та посадка на WordPress сайту будівельної компанії (Premium-сегмент) з акцентом на SEOОпис проєкту:Шукаємо досвідченого WordPress-розробника для верстки та посадки готового дизайн-макета з Figma на CMS WordPress. Важливий контекст проєкту:Це не розробка сайту з нуля. Компанія має діючий сайт, ми оновлюємо структуру та дизайн. Нам необхідно реалізувати головну… HTML та CSS верстання, Веб-програмування ∙ 43 хвилини тому ∙ 25 ставок |
Переніс сайта з опенкарту на платформу ХорошопДобрий день. Є сайт на опенкарті, інтернет магазин. Потрібно перенести струкутуру сайту на платформу хорошоп, підібрати дизайн для нового сайту та зробити його повноцінно працюючим HTML та CSS верстання, Веб-програмування ∙ 21 година 21 хвилина тому ∙ 26 ставок |
Потрібен сильний WordPress / WooCommerce спеціаліст для доопрацювання сайту MARSPROШукаємо відповідального фрілансера або невелику команду для якісного завершення та технічного доопрацювання сайту компанії MARSPRO. Сайт вже працює, але після попереднього розробника залишилось багато дрібних і важливих технічних проблем. Нам потрібна людина, яка зможе не просто… CMS, HTML та CSS верстання ∙ 1 день 21 година тому ∙ 44 ставки |
Сандра Айс Крим - Калейдоскоп
4132 UAH
У нас є невеликий проект, і ми хотіли б дізнатися, чи зможете Ви підготувати для нас відеоролик для LED-екрана. Відео буде використовуватися на нашому заході. Ми надамо всі необхідні матеріали: дизайн, брендбук, розміри та технічні вимоги. Будь ласка, повідомте, якщо Ви доступні… HTML та CSS верстання ∙ 1 день 23 години тому ∙ 7 ставок |
Розробка сайту по ТЗ на FramerПотрібно зробити сайт по цим параметрам що в тз https://docs.google.com/document/d/1ODO2C9Krb4AaMiJz9wfbNzWlAyA2FwCCHL8r0biajUY/edit?usp=sharing Називайте реальний рейт на основі цього дизайну HTML та CSS верстання, Javascript та Typescript ∙ 2 дні 5 годин тому ∙ 26 ставок |