Leaderboard

Приходят неадекваты, а админам потом мучайся, добавляй в бан)

Техническое задание. Базовые требования Платформы: 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 если потребуется. Ширина сайта Стандартная ширина сайта - 960px. Grid За основу взять любой распрастранненый инструмет для построения макета, например 960.gs или Bootstrap Grid System (требуются знания фреймворка) Изменение/наполнение контентом Блоки могут и будут содержать иной контент, отличный от того что в макете. Контент может занимать как больше так и меньше пространства. При вёрстке следует это учесть что бы в будущем макет не "поехал". Особености макета 1. Шапка 1.1. Меню - Все как видно так и делать. Пунктов меню может быть больше -- это один список который выводится в 2 столбца. Текст пункта меню может быть длинее и распологатся в 2 строки. Обратить внимание на высоту строки в этом блоке, так как пункт в 2 строки будет выглядеть плотнее. 1.2. Учесть, что под ссылкой "Мы на Facebook" появятся в будущем еще несоклько аналогичных ссылок. 1.3. Возможно добавится пару языков. 1.4. Поле поиска 1.4.1. В поле поиска добавить placeholder с текстом "Искать...". 1.4.2. Поле поиска изначально должно быть на 1/3 меньше шириной. Поле прилегает к правому краю. 1.4.3. При клике на поле, средствами CSS оно должно растянутся на ширину, указанную на макете. 2. Слайдер в 4 колонки. Слайдер состоит из 4х колонок в слайде. Прокрутка осуществляется при помощи ползунка под ним. Требуется поддержка для touch-устройств для прокрутки контента. 3. Промо-слайдер 3.1. Табы слайдера -- первый и последний "затухают"с градиентом. Активный - крассный. На макете первый затухающий пункт меню содержит ошибку: градиент должен быть от светло-серого в прочрасный, слева на право (для последнего наоборот) 3.2. Кол-во слайдов может быть больше или меньше, чем на макете. 3.3. С прокруткой каждого слайда так же должны прокручиватся Табы (анимация при этом не обязательна). 3.4. В случае, если размер экрана меньше чем ширина макета, стрелка Предыдущий/Следующий слайд должны быть внутри области слайдера. 3.5. Кнопку управления слайдера должны поддерживать состояние "disabled". В случае если прокрутка далее/назад невозможна, стрелка должна быть не-активной. Визуально достаточно будет применить прозрачность 50% к кнопке. 3.6. Слайдер не влияет на 4 колонки под ним. 4. Контент 4.1. Меню слева. Пукты меню могут быть в несколько строк длиной. 4.2. Центральная колонка 4.2.1. Тут ничего особенного, фотография и статья, набранная контент-менеджером. 5. Футер 5.1. 3 колонки разибы по ширине области. Слева меню может наполнятся. Справа какой-то текст. По-центру виджет от Facebook. 5.2. Оступ снижу дл футера сделать высотой 20px. Дополнительно Кнопка "Отправить письмо", справа от макет -- закреплена всегда на одно расстоянии от верха. WYSIWYG Хочу обратить внимание на то что контент будет набиратся контент-менеджером, который не имеет соотвествующих знаний и навыков в работе с разметкой, а использует только окно редактора и инструменты которые он содержит. Соотвественно весь контент который визуально отвечает таким критериям (статьи, информационные блоки), должен "уметь" корректно выводить результат набранный контент-менеджером в редакторе. В качестве примера такого редактора можно взять TinyMCE Масштабирование страниц Поддержка не обязательна. Пользователь сам на себя берет отвественность за результат отображения страницы применяя к ней любые инструменты которые влияют на её изменение. Если есть желание все таки учесть поддержку масштабируемости, то советую почитать про Эластичные шаблоны, а так же опосля ознакомится с "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/ Наглядный пример Краткий вариант - только директории: Полный вариант -- директории и файлов: Удачи в обучении Автор макета -- Павел Борисенко предоставил данную работу на благо обучения начинающим За основу ТЗ был взят пример со статьи Техническое задание на верстку сайта design 1 - splat.zip

нетоварищ, тонкий троллинг содержится только в вашем вопросе и частично в нике

1) заходите на сайт http://getbootstrap.com/ 2) нажимаете на ссылку Getting Started 3) читаете документацию, которая там написана 4) после прочтения документации верстаете сайт

я категорически настаиваю на том, что самые тренированные мозги у бомжей. у них ведь деятельность не проснуться->умыться->сходить на работу в офис, помахать кувалдой. у них каждый день решается вопрос жизни и смерти: где достать поесть, как найти тёплое место для ночёвки, где достать тёплую одежду для зимы, как уберечься от собак и т.д. а это посложнее вёрстки или программирования. и кстати, заметьте, у них нет гугла такая активная деятельность очень эффективно прокачивает нейронные сети

Это не плагин, это JQueryUI, там нет возможности переделать так как вам надо. Или ищите табы на jQuery, или пишите расширение к jQueryUI с нужным вам функционалом.

http://jsfiddle.net/5Y3qw/

Предлагаю вам задать вопрос тут.

Предложение с заведомо одним верным исходом без права выбора - верх наглости. Такая схема сработает только на чайниках, которые не читают книг. А на вопрос я отвечу - "Нет", и можешь себе не верить. ) Смотря, что за дядя. В зависимости от типа дяди я буду выбирать схему разговора, а не рубить с одного конца о том, о чем он вообще может первый раз слышать. Если дядя вообще не рубит тему, то достаточно в 2-3 предложения описать ему цепь разработки сайта и показать звено, которое принадлежит верстке. Если у кого-то проблемы с краткими объяснениями сути дела, то это уже другой вопрос.

Рассматривал я бутстрап и пришла в голову идея по стилизации селекта. HTML <span class="select"> <span class="select__wrap"> <select name="options"> <option value="option-1">Option 1</option> <option value="option-2">Option 2</option> <option value="option-3">Option 3</option> </select> </span></span>CSS .select,.select__wrap { display: inline-block;}.select,.select__wrap,.select__wrap select,.select__wrap option { font-size: 14px; line-height: 1em; vertical-align: bottom;}.select { border: red 3px dotted; border-radius: 5px;}.select__wrap { overflow: hidden;}.select__wrap select { margin: -1px; padding: 0;}Пример: http://codepen.io/GreatRash/pen/isjgL Работает во всех современных браузерах + IE Quirks Mode!

Подобная тема уже была от вас (http://htmlforum.ru/index.php?showtopic=47715#entry319978). В связи с этим идентифицирую вас как спамера и выдаю бан.

А вы в саппорт гугла писать не пробовали? Зачем заниматься домыслами если можно получить комментарий из первоисточника?

«geolocation api» в Google.

Не цепляет. Картинки в портфолио размечены как-то так закручено, что больше похоже на какие-то испытания, нежели на конечный результат. Если название окажется в две строки, то все начинает рушиться.

Мне кажется, что работа верстальщика не отупевает, а наоборот, очень здорово тренирует мозги. Ведь давно доказано, что интеллект, эрудиция, хорошая память - это по большому счету хорошо развитая нейронная сеть, имеющая много связей между собой. А главной предпосылкой развития этой сети и являются трудные задачи, требующие максимального напряжения памяти и внимания. Ведь именно поиск трудного решения лучше всего тренирует мозг. Легкие задачи не требуют большой ментальной активности, а задачи по поиску решения всегда находятся в первых списках любых интеллект-тренажеров. Те же таблицы Шульца, где тяжело зацепиться ассоциативной цепочке и где тяжелее всего запомнить числовой ряд, отлично тренируют память. Верстка - это постоянный поиск интересных, эффективных и оптимальных решений. Это постоянная тренировка мозга, памяти. Мне кажется, что благодаря этому верстка многим и нравится. Это как собираешь конструктор или разгадываешь головоломку. Поэтому работу верстальщика тяжело назвать монотонной всё-таки. А то, что мозги не варят после длительной умственной работы, так это точно, что переутомление, такое у многих есть.

Всем привет. Кто-нибудь пробовал или знает решение следующий проблемы: jQuery tabs работает по принципу href="#якорь", а вот если написать вместе href -> data-href, то не работает. Гуглил уже, даже похожего не нашёл.

мило

Товарищ, как вообще бустрап может быть ответом на мои вопросы. Как я понял он не работает с серверной стороной. Не проще ли было, написать без тонкого троллинга по делу(((

Метод serialize сериализует данные в строку, которую можно записать в базу. В дальнейшем из этой строки можно восстановить положение элементов. Разве не это вам надо?

Вот например я нашел такой макетик. Мне нужно сделать полноценную рабочую страницу. Только я не совсем понимаю, что от меня требуется в целом. Знаю что сверстать и пару скриптов реализовать. В общем - Кто может, посмотрев на макет описать по пунктам процесс всей работы? Буду очень благодарен!

Что за бред? Что у вас тут только умники создают темы? И при чем тут ник вообще? Возможно троллинг покажется только опытному разработчику в моем посте. И вообще. не держить за плюсы т.к и может тоже не стать...