Таблица лидеров


Популярные публикации

Отображаются публикации с наибольшей репутацией начиная с 03/14/11 во всех областях

  1. 9 баллов
    Друзья, представляю вам новый проект - webreference.ru, доступен также по короткому адресу http://webref.ru Сайт пока не закончен в том виде каком мне это хотелось бы, поэтому это не официальный анонс, а бета-версия для получения советов и выявления ошибок. webref.ru - это сайт, на котором будут справочники и руководства по темам, не обязательно связанным с вёрсткой, как сейчас на htmlbook. К тому же работать над ним будет не один человек, а несколько. С htmlbook же постепенно уберу справочники и переделаю сайт. Как, ещё не знаю, речь не об этом. Итак, что хотелось бы услышать. - найденные баги, ошибки в отображении материалов; - общее впечатление; - удобство использования; - что убрать, что добавить. Ещё мне нужна небольшая помощь по вёрстке под мобильные версии. Есть небольшие проблемы с отображением на мобильных устройствах. Надо спрятать меню на маленьких экранах. Кто готов помочь, за деньги или бесплатно, пишите в личку.
  2. 8 баллов
    Техническое задание. Базовые требования Платформы: 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
  3. 7 баллов
    Добрый день. Данный пост расскажет о том, как правильно оформить вопрос, что бы получить на него ответ в кротчайшие сроки. Пожалуйста, инвестируй 2 минуты своего времени и прочитай ниже изложенное до конца. Давай согласимся с тем что никто никому ничего не обязан. Задавая вопрос на форуме никого не будет интересовать выполняешь ли ты заказ, за который получишь вознаграждение, или просто верстаешь бесплатный макет, или обучаешься. Ты просишь помощи и кто-то из форумчан любезно согласится тебе помочь. Задавая вопрос понимай тот факт, что время человека, который на него ответит, с очень большое вероятностью, стоит в несколько раз (а то и в десятки раз) дороже чем твоё (в рамках специализации). А это говорит о том что желание тебе помочь непринужденное и безвозмездное — уважай, пожалуйста, этого человека и его намерение решить твою проблему. Пойми нас, пожалуйста, правильно — проблема описанная тобой в паре слов для нас может не иметь вообще никакой, для размышления, информации что бы хоть каким-либо образом её воспроизвести в голове. Мы, к сожалению, не телепаты. Нам не дано узреть твою проблему удаленно. Именно по этому я прошу оформить пост согласно следующих рекомендаций. Давай по-порядку. 0. НЕ ВЫКЛАДЫВАЙ СТРАНИЦЫ КОДА СЮДА! КОД НИКТО НЕ БУДЕТ ЧИТАТЬ! 0.1 В рамках исключения вполне нормальной ситуацией выложить небольшой кусок кода на несколько строк 1. Ссылка на проблему. 1.1 Если проблема возникла на странице рабочего сайта — выложи ссылку на эту страницу. 1.2 Если проблема возникла в ходе разработки сайта, выложи сайт/страницу на любой бесплатный хостинг, и предоставь нам ссылку на проблемную страницу 1.3 Если проблема возникла в процессе создания блока/элемента страницы, выложи код сюда: jsfiddle.net 2. Описание проблемы. Очень важным этапом является корректное описание проблемы. Опиши здесь исходную информацию с которой нам предстоит столкнутся. Толи ли это лэйаут (каркас), или форма поиска, или слайдер, или карусель, или что-то другое — опиши с чем обстоит проблема. 2.1 Если проблема возникла в ком-то определённом браузере (Firefox, Chrome, Opera, Internet Explorer, Safari) то следует указать версию браузера и версию Операционной Системы (ОС). 3. Описание задачи. Далее скажи что должно быть в конечном итоге. Опираясь на ранее изложенные тобой данные нам надо четко понимать что именно тебе требуется иметь в конечном итоге. Если вопрос в html/css — расскажи какую именно ситуацию ты пытаешься решить. Если дело со скриптами — расскажи что именно ты ожидаешь получить в результате. 4. Скриншоты. Очень сильно помогает наглядное представление того что должно быть выполнено. Это может быть от руки нарисованная схема (в paint или photoshop — не важно). Или же скриншот макета, который ты выполняешь. 4.1 Если проблема возникла на странице со множеством элементов, то лучшим вариантом будет скриншот, на котором проблемная область обведена квадратом (или показать стрелочкой). Для этого можно воспользоватся, например, программой Clip2Net или Monosnap. Я искренне надеюсь на твоё понимание и отзывчивость к этим рекомендациям.
  4. 6 баллов
    Большинство запросов на рецензию верстки, в разделе Обсуждение работ, в результате имеют одни и теже ответы. Более 90% будущих разработчиков на начальном этапе допускают одни и теже ошибки. Типичные ошибки Запрещено имя класса начинать с цифры, или с дефица после которого следует цифра (пруфлинк: eng рус) Рекомендации Ниже я привожу список самых распространенных ошибок. CSS Не использовать #id для описания стилей блока. Почему-то одна из самых часто встречаемых ошибок -- это использование идентификатора вместо класса, для описания силей блока. Не надо этого делать. Давай мы с тобой определимся раз и на всегда с двумя простыми решениями: .class-name -- имена класов используются для того что бы описать стили блока. В 99,9% случаев программист не будет менять установленные верстальщиком имена классов. #id -- идентификаторы используются в JavaScript для того что бы передать в скрипт элемент и использовать его. Программист имеет право изменять имя идентификатора на своё усмотрение. Возьми за правило не использовать в вёрстке #id. В 99,9% случаев ты сможешь обойтись классами. 0,01% остаётся на уникальные ситуации и вероятность того что тебе такая попадётся, сам понимаешь, очень мала. Давай человеко-понятные имена классам. Когда ты именуешь какой либо класс придерживайся простых рекомендаций: класс должен быть набран латиницей правильно: ".block-reviews" не правильно: ".блок-отзывы" имя класса должно объяснять для чего данный элемент правильно: ".link-checkout" не правильно: ".link-highlight" используй переводчик для поиска англоязычных терминов правильно: ".discount-coupon" не правильно: ".kupon-skidki" не используй сокращений. Пускай имя класса будет длинее, зато его можно прочитать правильно: ".available.in-stock", ".block-shopping-cart" не правильно: ".avail.instk", ".blk-shopCart" не начинай классы с цыфры не правильно: ".7-element" не создавай индексированные классы. Для уточнения конкретного блока используй термины. правильно: ".comment", ".comment.first", ".comment.last", ".comment.highlight" не правильно: ".comment-1", ".comment-2", ... , ".comment-N" так же данный вопрос детальнее раскрыт в этом посте не используй верхний регистр в именах классов, не используй "camelCase" правильно: ".block-layered-navigation" не правильно: ".blockLayeredNavigation" здесь я рассказываю почему не стоит использовать "camelCase". Там же присутвует альтернативная точка зрения. Не описывай стили внутри аттрибута style="". Все стили, за некоторыми редкими исключениями, которые касаются элемента должны быть описаны в CSS файле. Давать всем элементам в коде уникальные имена классов(для непосредственного описания стилей каждого элемента на странице) избыточно. Но, если тебе попался сложный проэкт, который требует такого похода, то рекомендую перед тем как приступить к работе ознакомится с методологией БЭМ и понять как, в данном случае, правильно именовать классы. не указывай размеры картинок в стилях, для этого есть атрибуты тега <img> HTML Не используй комментарии в коде (<!-- comment -->). Лучше написать чистый код и дать ему человеко-понятные классы, нежели плодить комментарии, тем более на русском языке. Не надо везде где попало использовать тег <p> -- используй <div> или <span>. Тег <p> определяет текстовый абзац, а не часть разметки. Использование тега <nav> -- если тебе надо создать одноуровневое меню, то вместо иерархии "nav>ul>li>a" достаточно (и правильнее) использовать "nav>a" Логотип и тег <h1>. Начну с того что по умолчанию не обязательно помещать логотип в заголовок. Единственное где это уместно -- на страницах без заголовка, на пример -- "Главная страница". Такие страницы, как правило не имеют заголовка и содержат только промо контент. Но надо учесть что данный вопрос, все таки, по части SEO, т.е. -- индивидуален для каждого сайта. Приёмы Если надо вывести список данных с маркером, не надо генерировать маркер на стороне сервера. Вместо того что бы выводить: <li>- Возможность уточнять вопрос;</li> <li>- Моментальная публикация;</li> <li>- Гарантия получения ответа;</li> лучше использовать псевдо-элементы. Например: li:before { display: inline-block; vertical-align: middle; content: "-"; } На заметку Не обязательно применять свойство "display: block" в паре с "float: left" и/или "position: absolute (fixed)" -- это избыточно. Подробнее в этом посте Псевдо-элементы ":before" и ":after" по умолчанию отображаются как "display: inline;" Ресурсы, на которые стоит обратить внимание В первую очередь прочитай эту тему до конца, так как другие участники любезно делятся с тобой опытом. Гражданин с забавным ником Sorax Его канал на youtube: http://www.youtube.com/user/ArtSorax Его группа с vk: https://vk.com/soraxcss Системы контроля версий: git http://githowto.com/ , svn http://svnhowto.com/ , mercurial http://mkharitonov.net/hg/help/ru/ http://webfont.ru/ -- шикарный проект со шрифтами от товарища Softlink Методологиея БЭМ -- была разработана в Яндексе. Саму методологию в полном объеме использовать есть смысл на высоконагруженных проектах с большим трафиком, но из неё можно подчерпнуть массу ценной информации и использовать в проектах средней и низкой сложности. Рекомендую ознакомится. Ресурсы, которые не рекомендуются для обучения http://evgeniypopov.com/dvd.html - видео курсы от Евгения Попова http://2develop.ru/videokurs - видео курсы от Дмитрия Валака http://srs.myrusakov.ru/list Придерживаться или нет данных рекомендаций ложится на плечи разработчика. Если есть чем дополнить - предлагайте, так как список не окончен.
  5. 5 баллов
    Всем привет. А что если обсуждение работ будет проходить онлайн? С рекомендациями как улучшить свою работу, как предвидеть ошибки и писать качественный читабельный код. Предыстория Так сложилось, что я часто получаю письма с просьбой оценить вёрстку, подсказать что сделанно хорошо, что плохо, что можно было бы улучшить, какие ошибки были допущенны и как их избегать и так далее. А ещё чаще спрашивают как решить ту или иную задачу, над которой разработчик бётся последние пару дней, хотя решение заключено в паре строках кода. За последние несколько лет такой разбор полётов для меня стал как хобби. Но что меня печалит — так это то, что ошибки у разных начинающих повторяются. Приходится объяснять одно и тоже разным людям, что, порой, честно говоря, утомляет и демотивирует. Зачем это надо? Сообщество htmlforum.io существует ради того, что бы посетители имели возможность совершенствоваться, повывать свой профессиональный уровень, развиватся и помогать в этом другим. С этой же идеей мне пришла в голову мысль — вести раз в неделю скринкаст, в котором я буду делится своим мнением по поводу вёрстки, которая будет предоставленна на обсуждение. Длительность ролика будет зависит от количества желающих получить отзыв о вёрстке, но не более чем 1 час. Предположительно за это время получится обсудить до 10 работ за раз. Как добавить вёрстку для оценки? Для того что бы иметь возможность оценить проделанную Вами работы, мне понадобится: Исходный код, выложенный на github, butbucket или любой другой вариант (пожалуйста, не выкладывайте код в архиве, пользуйтесь общедоступными ресурсами) Помимо исходного кода требуется доступ к итоговому результату через браузер. Для этого идеально подойдёт pages.github.com В комментарие к данному посту отпишитесь и предоставьте вышеуказанные данные Что будет в итоге? Вы получите анализ по следующим критериям: вёрстка: какие ошибки допущены, каким блокам не достаточно универсальности, какие проблемы могут возникнуть в будущем, как оптимизировать структуру и поднять гибкость разметки стили: буду обращать внимание на пользование пре-процессорами, предлагать решения которые помогут поддерживать код годами структура проекта: дам рекомендации по организации файловой системы и кода в целом, буду обращать внимание на пользование современными инструментами разработчика В итоге Вы получите анализ по своей работы с точки зрения построения долгосрочных проектов, которые поддерживаются годами, поделюсь своим виденьем какие изменения требуется изменить что бы код не превратился в боль разработчика в ближайшее время. Кстати, не лишним для Вас будет заглянуть в блок Пособие верстальщика и ознакомится предоставленными по теме статьями. Я буду опиратся на описанные в пособие основы в изучении Вашей работы. Когда и где будет обзор? Обзоры будут выкладыватся на канале YouTuBe, каждый вторник в 19.00. Первый обзор будет опубликован 7 августа 2018 г. Первый обзор отложен из-за непредвиденной высокой нагрузки. Как только материал будет готов — отпишусь комментарием в текущем посте. Я тоже хочу делать обзоры Предложение отрыто для всех. Если Вы считаете себя достаточно опытным что бы уметь анализировать работу других разработчиков, — напишите мне в личку @klierik. Что по чём? Анализ вёрстки бесплатен, деньги за это брать не буду. Я понимаю ценность данной информации для начинающих и предлагаю Вам то, чего у меня не было, когда мне доводилось делать первые шаги в веб-разработке. Но если случится так, что мой обзор Вашёй вёрстки помог Вам стать лучше, и есть неуталимое 🙂 желание проявить благодарность, — используйте донейшн. Таким образом у нас с вами будет взаимообмен. Вы получаете консультацию по своей работе, а в обмен поможете существовать данному сообществу.
  6. 4 балла
    Рекомендую купить ещё учебник русского языка.
  7. 3 балла
    Знания вероятно будут ограничиваться интеграцией готовых решений на jQuerry и качество/скорость работы будут оставлять лучшего, но вакансию они закроют. Тут правды ради стоит отметить что не реже чем каждые 3-4 месяца придётся накидывать +10к окладу иначе человек просто сбежит поднабравшись опыта.
  8. 3 балла
    Всем привет! Благодаря Светлане (Svetlana_P) у нас возродился еженедельный дайджест крутых эффектов на CSS/SVG/JS. Так что приглашаем всех желающих лицезреть эти чудеса: Еженедельная подборка красивых эффектов на CSS/SVG/JS #46. Следите за выпусками каждую неделю, и говорите спасибо Светлане
  9. 3 балла
    http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo If 'display' has the value 'none', then 'position' and 'float' do not apply. In this case, the element generates no box.Otherwise, if 'position' has the value 'absolute' or 'fixed', the box is absolutely positioned, the computed value of 'float' is 'none', and display is set according to the table below. The position of the box will be determined by the 'top', 'right', 'bottom' and 'left' properties and the box's containing block.
Таблица лидеров находится в часовом поясе Киев/GMT+03:00