Верстка макета из 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
- Папка собранного проекта после обработки сборщиком.
Załączniki 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, валидация, настройка форм, анимации и тд).
Работы в портфолио профиля. Буду рад сотрудничеству.
////////////////////////////////
Aktualne zlecenia dla freelancerów w kategorii Java
Tworzenie aplikacjiChcę stworzyć aplikację mobilną do komunikacji, w aplikacji ma być audio, wideo rozmowa, tworzenie grupowych czatów, możliwość synchronizacji z kontaktami telefonu, ustawieniami konta: powiązanie przez e-mail, 2fa, numer telefonu, możliwość dostosowywania powiadomień aplikacji,… Java, Python ∙ 2 dni 9 godzin temu ∙ 36 ofert |