Верстка макета из 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 + WooCommerce по шаблону Astra
14 825 UAH
Необходимо настроить и подготовить к работе интернет-магазин мебельных тканей для рынка Норвегии. Домен, хостинг и WordPress уже установлены: eximtextilnordiq.com Сайт нужно сделать не с нуля и без индивидуального программирования, а на готовом бесплатном шаблоне Astra,… CMS, HTML и CSS верстка ∙ 1 час 18 минут назад ∙ 33 ставки |
Сайт реберня-піцеріяКлиентская часть — динамическое меню с Firebase, категории с вкладками, карточки блюд с фото и ценами, поддержка двух размеров (пицца 30/40 см), адаптивный мобильный дизайн, боковое меню с контактами и локацией. Админ-панель — авторизация, управление категориями и блюдами… HTML и CSS верстка ∙ 5 часов 9 минут назад ∙ 58 ставок |
Необходимо сделать доработку на сайте Modx Evolution CMS 3.1.7
1000 UAH
Разрабатывается доработка дизайна и верстка сайта, нужно будет внедрить эти работы на сайт. Также внедрить некоторые доработки на сайте. HTML и CSS верстка, PHP ∙ 5 часов 49 минут назад ∙ 20 ставок |
Разработка карты семян Minecraft Java / просмотрщика семян для сайтаРазработка карты семян Minecraft Java / Seed Viewer для сайтаОписание проекта Необходимо разработать браузерный инструмент Minecraft Java Seed Map / Seed Viewer, который будет работать на нашем сайте и позволит пользователю ввести семя Minecraft Java Edition и просмотреть… C и C++, HTML и CSS верстка ∙ 22 часа 23 минуты назад ∙ 12 ставок |
Перенос небольшого сайта визитки на 58 стр. с Joomla 1.5 на Joomla 6Есть небольшой сайт визитка сделан на Joomla 1.5 на 58 страниц (если считать на двух языках), на которых содержится небольшие тексты с фотографиями. На одной странице размещена таблица. На двух страницах размещены PDF файлы на всю страницу во фрейме. Сайт сделан на двух языках с… CMS, HTML и CSS верстка ∙ 1 день 5 часов назад ∙ 33 ставки |