Leaderboard

Сейчас, когда на дворе почти 2015 год, стало модно делать всякие эффекты без использования JS. Обычно для переключения состояний элемента используются следующие псевдоклассы: :focus :checked :active Вот про первый я и хочу написать небольшую заметку. Знаете ли вы, что в HTML можно сделать любой элемент способным получать фокус? Для этого достаточно просто добавить атрибут tabindex к любому тегу. Есть правда один нюанс - tabindex отвечает за то, в каком порядке пользователь будет переключаться между полями формы (используя клавишу Tab). По умолчанию индексы расставляются браузером автоматически по мере появления контрола в коде, но мы можем изменить порядок переключения задав tabindex, значения которого начинаются с нуля. Так вот, если мы просто зададим табиндекс нашему кастомному элементу - это может нарушить логику работы с формой. Однако есть небольшая хитрость: мы можем задать отрицательное значение, в таком случае браузер будет просто игнорировать клавишу Tab, но при клике на такой элемент он всё равно получит фокус. Вот собственно и всё! В заключении небольшой примерчик.

Всем привет. в 2008 году я попал в аварию и получил тяжелую травму головы, пролежал в больнице вылетел из института и вообще получил крепкий сноп жизненных проблем. Поскольку после этого я люто страдал головными болями, я не смог работать и просто сидел дома. И значительную часть времени я проводил именно на этом форму. В основном моя деятельность сводилась к помощи всем, страждущим из раздела "для начинающих". Помогал вообще всем подряд, бездумно, не испытывая потребности в благодарности. Перечитал все уроки на основном сайте и просто начал делать то, с чем не справлялись остальные новички. Не смотря на то, что уже тогда я знал основы си и немного писал на php меня заинтересовала именно вёрстка. Так продолжалось до тех пор, пока я не встретил в чьём-то исходном коде комментарий на тему актуальности споров вроде "мой код нагляднее, мой код лучше в покер играет..." и как не странно, эти несколько строчек оказали на мой энтузиазм торпедирующий эффект. Я переключился сначала на с++ а потом и на qt и начал готовиться к поступлению в институт. В итоге я успешно восстановился на второй семестр программистской специальности и был очень удивлён тем, что окружающие владеют программированием несколько хуже. В итоге, на данный момент я учусь на первом курсе магистратуры (как старый пятый курс) МГТУ им. Баумана, прошел стажировку разработчиком на js в одной из дочек аэрбаса и у меня крутейший диплом по моделированию методом конечных элементов. Но толчком в развитии, определённый мотив в образовании профессиональных навыков для меня стал именно этот ресурс. Так что спасибо создателям сайта и администраторам форума. В то время тут всем руководил, на сколько я помню, Влад Мержевич. Надеюсь, с тех пор ничего ничего не изменилось и проект по прежнему в хороших руках. P.S. Недавно купил себе классный домен, случайно обнаружив, что он не занят, но уже очень давно не занимался ни чем, связанным с сайтами. Не подскажите хостинг, где можно дёшево и со вкусом развернуть уютный бложик с дисковым пространством от силы 100 мегабайт. Без CMS и всего этого добра. Серверную часть лучше иметь на питоне но вполне пойдёт и php...

Всем привет. Друзья, предлагаю всем познакомиться с сайтом, где собрано немалое количество бесплатных кириллических шрифтов, которые могут понадобиться вам при верстке макетов. Немножко истории Сайт был сделан только из-за того, что мне надоело каждый раз лазить по своим прошлым работам, выдергивать папки со шрифтами и вставлять их в текущий проект. Однажды я собрал их в одном каталоге, написал сниппет для Sublime Text 2 и все шрифты начали подключаться в проекты без лишней волокиты. Потом появилась мысль выложить их в сеть и поделиться этой возможностью сниппетом с друзьями. Коллеги оценили, и я начал плотно заниматься сайтом. Как пользоваться Работая над проектом, где есть несистемный шрифт, идем либо на сайт, либо запускаем плагин и получаем строчку импорта этого шрифта. После работы качаем с сайта уже готовый кит и прикладываем к проекту. Мне это показалось довольно полезным, нежели шуршание по каталогам с проектами. Оставлять абсолютный путь с сайта не рекомендуется. Плагином пользоваться еще проще. Установить его можно через Package Control или руками. Подробная инструкция находится здесь. Уже сейчас ведутся работы по наращиванию дополнительного полезного функционала. Тем не менее, коллеги, хотелось бы услышать ваши отзывы по этому сайту. Что хорошо, что плохо, чего не хватает, что убрать или изменить. Отдельная благодарность участникам нашего форума: sigma77, alexriz и Svatov. Они внесли весомый вклад в проект в виде советов, рекомендаций или помощи, когда я был в тупиковых ситуациях. Им очень спасибо! Сайт - webfont.ru

Сергей. 53 года. Уже семь месяцев как веб-мастер. До этого - всю жизнь строитель.

Доброго тебе дня, друг. Данную тему написать меня сподвигло больше кол-во однотипных тем на тему "Ищу наставника", "Нужен учитель" и тому подобное. Одной из причин тому статья "Путь верстальщика" от автора Максима Усачева, в которой он делится своим безценным жизненным опытом. Я постараюсь пролить свет на некоторые важные (в рамках данной темы) моменты из статьи. Макс пришел на форум имея минимум знаний в сфере разработки и имея большое желание учится. Он упоминает про наставника, но большинство читателей, к сожалению, трактуют данную информацию извращенно. Это не путь к руководству, это всего лишь опыт который получил автор статьи. Нужто ты думаешь, что если и у тебя будет наставник, то ты выучишь все в 2, 3, 10 раз быстрее? Или больше? Или качественнее? Более того, наставник может научить тебя плохому. Наставник в разрезе данной статьи -- это специалист, который допустил огромное кол-во ошибок, который "кровью и потом" работал до глубокой ночи ведя жесткую борьбу с браузерами для достижения своей цели. И хотя результат боя не всегда был на стороне разработчика, войну он всегда выигрывает. Зачем тебе наставник? Что бы он говорил тебе где ты ошибся? Или как надо было сверстать тот или иной блок? Или что лучше использовать float или inline-block? И что это тебе даёт? Набор правил и готовых решений как надо делать и как не надо! Но ведь ты знаешь что каждый сайт уникален, и везде есть нюансы. И ты хочешь каждый раз обращаться к учителю что бы тот подсказал тебе как решить задачу?... Разве ты не хочешь научится думать и понимать чем живет вёрстка? Как она устроена, что из себя представляют слои, понимать и визуализировать и процесс разработки? Понимать "физику" работы блоков на страницы, как и почему они влияют на остальные? Предугадывать на будущее как потянется страница/блок в случае наполнении его контентом. Уметь за считанные секунды в голове разложить огромный сайт на слои? Достичь понимания вёрстки как некой сущности, которая является единым целым с тобой. Другими словами -- ты желаешь женится на прекрасной девушке, со своим темпераментом, безграничными возможностями, уникальным подходом. Она способна подстраиваться под тебя так как ты этого хочешь, когда только пожелаешь. Она согласна выполнять твои прихоти, она не переборчива и соглашаеться на любые твои даже самые безумны идеи. И не смотря на это у неё свой уникальный неповторимый характер. Она бывает упёртая и неприступная, но всегда можно найти с ней общий язык. Если ты знаешь как с ней общаться, понимаешь как она думает, чувствуешь её, чувствуешь то что чувствует она, видишь то что видит она. Если ты слышишь и понимаешь её, то невозможно будет представить цели, которую вы вместе не смогли бы достичь. Ты хочешь женится на самой прекрасной девушке, но спать с ней будет твой наставник! Я не говорю что ты не сможешь стать специалистом без него. Большинство разработчиков, которые поддерживают этот форум, не имели никаких учителей. Все чего они добивались -- все делали сами. Для того что бы достичь тех же высот тебе надо повторить успех людей которые это уже сделали! Это не просто, но это реально! Никто за тебя этого не сделает, никому кроме тебя это не надо. Далее по списку: 1. Перед тем как открыть свою тему в поисках Наставника, пройдись по темам которые создали раньше. 2. Ты ищешь классного специалиста, который будет тебе помогать тебе, обучать, давать советы, делится опытом и знаниями. Ты этого хочешь? А ты можешь ответить на вопрос - зачем вообще кому-то это делать? Зачем, для чего, почему кто-то должен согласится тратить на тебя время? Ведь тебе нужен не новичек как ты, а тот, у кого за плечами багаж опыта, ведь так? Так вот чем ты отличаешься от других таких же жаждущих что бы вкладывать в тебя время и делится нажитым опытом? Пойми правильно, дело то не в деньгах, тут важна идея. 3. Теперь по теме. 3.1. Зачем тебе вообще это направление? Что оно тебе даст? Что ты нашел в вёрстке? 3.2. Если ты считаешь что вместо тебя будет гуглить наставник -- ты ошибаешься. Гугл -- лучший твой помошник. Умеешь правильно составить запрос - умеешь решать задачи. Очень часто бывает так, что поиск решения намного приоритетнее, нежели знания. 3.3. Если ты считаешь что наставник будет тебе давать задания -- ты сильно ошибаешься. Тебе надо -- ты ищи макет, а наставник тебе может написать ТЗ, а потом сказать какая ты бестолочь, указав на твои ошибки в результате -- а это бесценно! 3.4. Любой опыт забирает много времени. Ты не станешь специалистом через год-два! Ты уверен что у тебя вообще хватит сил на то что бы потратить ~5 лет своей жизни в интенсиве и "выкарабкатся" на уровень, когда ты сможешь сверстать страницу (предположим сайта новостей с огромным кол-во блоков) в уме за считаные секунды? Ты уверен что ты хочешь потратить часть своей жизни на изучение вёрстки? ps: нет ничего невозможного, было бы желание

Персонаж из мультика ) http://codepen.io/amelice/full/vNEpyJ/

Вот что получилось наваять) http://jsfiddle.net/j0puz083/

Социальный онанизм.

{ Москва : было; Frontend Union Conf : по-настоящему; 29.08.2015: здорово; } Как вы уже догадались, вчера мне удалось побывать на очень жаркой, позитивной и нереально крутой конференции. Но она не была бы такой яркой без одного важного гостя, которого мы с вами все прекрасно знаем и любим. Да, вы правильно подумали - это Илья (SelenIT). И мне наконец посчастливилось вдоволь насладиться его обществом. Ну, и конечно же, не обошлось без фотографий, коих получилось предостаточно, но здесь я выложу самые лучшие на наш взгляд (жмякайте на фотки, если хотите увидеть их в полный рост): А после конференции было афтерпати в кафе "Флакон", до которого мы целой толпой шли пешком полчаса Илья, спасибо тебе огромное, надеюсь что теперь будем встречаться намного чаще! p.s. Да, и стоит ли упоминать, что во время конфы мы умудрились отредактировать одну статью, а вторую дописать и запостить на css-live.ru?))

Друзья, представляю вам новый проект - webreference.ru, доступен также по короткому адресу http://webref.ru Сайт пока не закончен в том виде каком мне это хотелось бы, поэтому это не официальный анонс, а бета-версия для получения советов и выявления ошибок. webref.ru - это сайт, на котором будут справочники и руководства по темам, не обязательно связанным с вёрсткой, как сейчас на htmlbook. К тому же работать над ним будет не один человек, а несколько. С htmlbook же постепенно уберу справочники и переделаю сайт. Как, ещё не знаю, речь не об этом. Итак, что хотелось бы услышать. - найденные баги, ошибки в отображении материалов; - общее впечатление; - удобство использования; - что убрать, что добавить. Ещё мне нужна небольшая помощь по вёрстке под мобильные версии. Есть небольшие проблемы с отображением на мобильных устройствах. Надо спрятать меню на маленьких экранах. Кто готов помочь, за деньги или бесплатно, пишите в личку.

Привет тебе читатель, эт снова я, снова выдалась свободная минутка и я спешу поделиться с тобой интересным рецептом, который позволит создать у потенциального клиента так называемый вау-эффект. Не секрет, что сейчас очень популярны лендинг пейджи (лендинги, посадочные страницы, называйте как хотите). Нужны они для того, чтобы по-быстрому привлечь внимание у посетителя к вашему проекту. На какие только ухищрения не идут дизайнеры таких страниц: это и, ставший очень популярным в последнее время, параллакс-эффект, и красочные картинки из фотобанка, и сумасшедшего вида карусели изображений... И вот в последнее время редко-редко можно увидеть видео на фоне. Собственно видео я и заинтересовался. Я долго думал как бы мне это повторить, может я плохо гуглил, но туториала в сети я так и не нашел. Поэтому взял да и сделал всё сам Сперва думал написать сюда развернутый туториал, но потом подумал и решил просто дать ссылку на своё решение. Уж слишком простым оно оказалось, нет смысла тут много расписывать. В общем глядите чо я умею: http://codepen.io/GreatRash/pen/MYVjVE А вот чего можно замутить в дикой природе, используя эту технику: раз два А то привязались, понимаешь к параллаксу... Творите и удивляйте, товарищи!

Я открыл для себя вёрстку лет 13 назад, с тех пор она тонкой нитью проходит сквозь мою жизнь всё это время. Последние 3-4 года я занимаюсь фронтендом профессионально, т.е. зарабатывая на жизнь. Живу в Магадане, безлимитом здесь не пахнет, на интернеты при моей работе уходит около 4-5 тысяч в месяц. Ещё раз уточню: это не безлимит. Есть, конечно, говёненький, к тому же ночной. Хватает, чтобы просыпаться в полпятого утра и качать видео с конференций и ещё что-нибудь нужное и громоздкое. Сайты здесь практически никому нахрен не упали, поэтому только фриланс. Короче, к чему я это всё. При всех этих условиях, как мне кажется, заниматься тем, чем я занимаюсь, можно только при большой любви к своему делу. Поэтому — да, мне нравится моя работа Прям ежедневно нового мало чего происходит, но, с другой стороны, область фронтенда настолько обширная (особенно сейчас, с бумом яваскрипта), что при желании можно и каждый день учиться новому и открывать для себя кучу интересного. Мешают, правда, многие факторы: лень, нехватка времени, возраст (неотвратимо начинаю замечать, что мозг уже не так резво обрабатывает и усваивает новую информацию, нежели лет 10 назад, например). Но часто бывают задачи, в которых становишься перед фактом: либо ты осваиваешь новую штуку, либо теряешь проект, а с ним опыт и деньги. Именно так я подружился с гитом, автоматизаторами, шаблонизаторами, виртуальными машинами с Убунтой и разворачиванием проекта на Питоне. Короче, всё равно весёлого хватает, чтобы не терять интерес к своей работе. Монотонная рутина была, когда только начинал зарабатывать на жизнь вёрсткой. Да, великие и беспощадные русские лэндинги по продаже огурцов и матрёшек. В какой-то момент просто перестал этим заниматься, либо сознательно устанавливал цену с условной прибавкой «за вредность» Интересные задачи тоже бывают не каждый день и не каждый месяц, но мы и не в сериале каком-нибудь детективном, чтобы в каждой серии какое-нибудь дико интересное дело попадалось) Но я убеждён, что каждый человек — кузнец своего счастья, и в состоянии делать свою жизнь и работу интересной постоянно, было бы желание. Но сейчас вот, например, я активно занят заработками, чтобы уехать, наконец, в более прогрессивные районы страны, поэтому выбор особый делать не приходится: сгодится любой заказ, рутинный он или захватывающий, который сможет принести доход, ибо каждый такой заказ — маленький шажок к большой цели. В общем, я люблю то, чем занимаюсь, даже несмотря на все те трудности, которые в этом мешают. Похоже, это всерьёз и надолго. Чего и всем желаю. Извините за простыню

Птичка с синенькой рожицей http://jsfiddle.net/Lbcu90bc/2/

Дайвер ) https://jsfiddle.net/mrnobody/97bhryg7/2/embedded/result/ Зомби https://jsfiddle.net/mrnobody/4vvwt9mt/1/embedded/result/

Сразу оговорюсь, что всё, что будет здесь описано, будет описано максимально упрощённо и многие вещи лично у меня настроены иначе (разбивка диска, nginx на фронте...), но главное донести суть, а там уже тонкости. Для начала нам понадобится домашний интернет с выделенным «белым» IP. Да, есть аозможность сделать и без этого, но я считаю этот вариант плохим и недостойным рассмотрения. Теперь нам нужен сервер. Понятно, что всё зависит от предполагаемой нагрузки, но я не вижу смысла держать дома нагруженные (а, значит, важные) проекты — для этого лучше подойдёт хороший ЦОД. Я выбрал себе девайс под названием DNS Porto — это такой типа неттоп российской сборки http://ekaterinburg.dns-shop.ru/catalog/176/128891/ Скоро, вероятно, такие продавать перестанут, так как пошла новая линейка, но советую тоже брать что-то типа того. Тот который у меня отличается от того, который по ссылке, тем, что у моего 1 гиг памяти, а не два, процессор вроде бы на 1,66 ГГц, а не 1,8 и диск на 160 гигов, а не 250 — моей модели, видимо, уже нет в продаже. Выбрал я этот девайс потому что он маленький, тихий и электричества потребляет мало. Далее надо сделать так, чтобы кроме сервера, вашим домашним интернетом могли пользоваться и другие компьютеры в вашем доме. Самый простой путь — купить маршрутизатор. Хватит самого простого D-Link DIR-300, например. Если вай-фай не нужен, то можно такой же только без вай-фая — не помню как модель называется, но найдёте. Как настраивать маршрутизатор я рассказывать не буду — у д-линков там всё проще простого и вообще есть мануалы. Единственное, что нам надо будет — перебросить на наш сервер порты 21 (FTP), 22 (SSH) и 80 (HTTP). Можно добавить 3306 (MySQL), 443 (HTTPS) и вообще какие угодно, но это уже исходя из потребностей, мне не нужно, например. Теперь система. Мне по нраву Ubuntu Linux, так как устанавливается легко, ПО достаточно свежее и работать с ней приятно. Итак, идём на страницу загрузки http://www.ubuntu.com/download/server/download и грузим себе образ. Предпочесть стоит, думаю, последний LTS — сегодня это 10.04. У меня в сервере нет CD-привода и потому я делал себе загрузочную USB-флэшку — в десктопной убунте для этого есть специальная приблуда, как это делать в других системах я не знаю, но, думаю, на сайте это описано. В конце концов, можно постпрашивать на форумах, если что-то не будет получаться. Итак, подключаем к компьютеру монитор, клавиатуру и загружаемся с диска/флэшки. Для начала мы увидим экран выбора языка. Я считаю, что нужно всё ставить на английском, чтобы не было непоняток в случае косяков локализации. Выбираем «Install Ubuntu Server». То есть начнём устанавливать. Выберем язык для системы. Опять же я советую английский. Выберем наше местоположение. Other -> Europe -> Russian Federation. Понятно, что надо выбирать своё местоположение. Я в России, потому и выбрал её. Определить раскладку клавиатуры? Я думаю, что не стоит. Вручную укажем. Russia -> Russia -> Alt+Shift. Можно и другой комбинацией, но, по сути, это нам даже и не нужно. Далее пойдут какие-то загрузки, операции, будут какие-то прогрессбары — система будет готовиться к установке. Тут система спросит как её назвать. Я назвал, как видно на картинке, testserver. Можете сами выдумать что захотите — это непринципиально. Почему-то система решила, что я в Красноярске. А я не там. Выбираю «No» и далее «Yekaterinburg», поскольку я в Екатеринбурге. Если система правильно всё определила, то жмите «Yes», если нет, то выберите ваш часовой пояс. Формируем файловую систему. По-хорошему, надо в отдельные разделы выносить /home, /tmp, можно отказаться от свопа, но у нас не «настройка и кстановка линукса», а «как хоститься дома», так что доверимся всемогущему усановщику и выберем «Guided — use entire disk». Выберем на какой хард ставить систему. Как видно из картинки, у меня диск всего один и это виртуальный диск виртуальной машины. Вы выберите свой, если будет из чего выбирать. Если диск один, то, понятное дело, жмём Enter без лишних раздумий Предупреждение, что ВСЕ ДАННЫЕ БУДУТ УДАЛЕНЫ. Оно верное — действительно всё, что было на диске будет удалено. Соглашаемся. Начинается форматирование диска и установка системы. Это самый долгий процесс. Создаём пользователя. Он получит доступ к sudo и именно «под ним» мы будем всё делать. Введём и повторим пароль. Зашифровать домашнюю директорию? Я выбрал «нет». Далее снова идут некоторые настройки. Вы подключены через прокси? Нет. Оставляем поле пустым. Нужны автоматические обновления? Нет, не нужны. Какое ПО будем ставить? Выбираем только OpenSSH для удалённого управления сервером. Остальное поставим вручную. Поставить загрузчик GRUB? Да, поставить. Всё готово. Компьютер будет перезагружен. Надо будет после перезагрузки достать диск или флэшку, с которой всё ставилось Итак, система установлена. Можно отцепить от сервера монитор и клаву и поставить его подальше, чтобы не мешал. Подключаемся к серверу через SSH. Через консоль, если она у вас есть в системе, или через Putty, если у вас винда. Теперь обновим систему. Для начала получим список доступных для загрузки пакетов. sudo apt-get update обновим ПО sudo apt-get upgrade обновим систему sudo apt-get dist-upgrade Перезагрузим сервер. Теперь можно поставить полезные какие-нибудь утилиты. Мне полезен файломенеджер midnight commander, чтобы рулить файлами и системный монитор htop, который показывает как у нас в данный момент с нагрузкой дела обстоят. sudo apt-get install mc htop Теперь создадим папку, в которой будут храниться наши сайты. sudo mkdir /webs Создадим специального пользователя из-под которого всё будет испольняться при работе с сайтами sudo groupadd webs sudo useradd -g webs -s /bin/bash -d /webs webs поставим пользователю пароль passwd webs И поставим владельцем папки созданного нами пользователя sudo chown webs /webs sudo chgrp webs /webs Установим apache sudo apt-get install apache2 apache2-doc apache2-mpm-prefork apache2-utils libexpat1 ssl-cert Установим PHP sudo apt-get install php5-common php5 libapache2-mod-php5 php5-cli php5-cgi php5-mysql php5-curl php5-dev php5-gd php5-idn php-pear php5-imagick php5-imap php5-mcrypt php5-memcache php5-mhash php5-ming php5-ps php5-pspell php5-recode php5-snmp php5-sqlite php5-tidy php5-xmlrpc php5-xsl libapache2-mod-fcgid libapache2-mod-fastcgi Установим MySQL sudo apt-get install mysql-client mysql-server libmysqlclient15-dev в процессе установки у нас будет спрошен пароль для рутового пользователя mysql, который надо будет придумать и ввести. Установим Phpmyadmin sudo apt-get install phpmyadmin Выберем в качестве веб-сервера установленный у нас apache. Далее нажмём «Да» на вопрос системы «сконфигурировать ли phpmyadmin», введём недавно придуманный нами рутовый пароль mysql, а так же придумаем и введём два раза пароль юзера phpmyadmin. Включим модуль rewrite в апаче sudo a2enmod rewrite Перезапустим апач sudo /etc/init.d/apache2 restart Теперь, если зайти на ваш сервер через http по IP-адресу, то увидим сообщение «It works!», которая нам скажет, что всё установилось удачно. http://ваш_ip/phpmyadmin — тут мы увидим phpmyadmin. Теперь привяжем к нашему серверу доменное имя. Зарегистрируем имя для начала. Допустим зарегистрировали example.com Я делаю это на сайте 2domains.ru — там дёшево и нормально. Ещё там можно использовать DNS-серверы reg.ru — они-то нам и нужны. Итак, зарегистрировали имя, нажали галочку «использовать DNS-серверы регистратора», потом в редакторе зон DNS добавляем A-запись: «пустое поле» IN A ваш_ip Через какое-то время ваш сервер будет доступен по доменному имени. Теперь создадим сайт на этом домене. для начала в файле /etc/apache2/envvars заменим строки export APACHE_RUN_USER=www-data export APACHE_RUN_GROUP=www-data следующими export APACHE_RUN_USER=webs export APACHE_RUN_GROUP=webs и сделаем sudo chown -R webs /var/lib/apache2 перезапустим апач. Создадим папки, в которых будут жить файлы, связанные с этим сайтом mkdir /webs/example.com mkdir /webs/example.com/www mkdir /webs/example.com/logs echo "Hello world!" > /webs/example.com/www/index.html Создадим файл /etc/apache2/sites-available/example.com следующего содержания <VirtualHost *> ServerName example.com ServerAdmin admin@example.com DocumentRoot /webs/example.com/www <Directory /> Options FollowSymLinks AllowOverride All </Directory> <Directory /webs/example.com/www/> Options FollowSymLinks MultiViews AllowOverride All Order allow,deny allow from all </Directory> ErrorLog /webs/example.com/logs/error.log. LogLevel warn CustomLog /webs/example.com/logs/access.log combined </VirtualHost> Добавим его sudo a2ensite example.com перезагрузим конфиг апача sudo /etc/init.d/apache2 reload Готово! Теперь (если DNS уже успели распостраниться) по адресу example.com будет доступен ваш сайт, который приветствует мир. Можно как на обычном хостинге создавать php-скрипты, которые будут нормально работать. Чтобы работала функция mail() в PHP, нам нужен почтовый сервер. sudo apt-get install postfix Добавим к этому FTP. sudo apt-get install proftpd Теперь отредактируем файл конфига /etc/proftpd/proftpd.conf — отредактируем там некоторые строки ListOptions "-la" DefaultRoot ~ перезапустим FTP-сервер /etc/init.d/proftpd restart Всё, теперь можно логиниться под юзером webs на ваш сервер через FTP. Вот и всё. Ещё раз повторюсь, что это только некоторые основы — сервер будет работать, но надо будет ещё озаботиться его безопасностью. Ещё можно будет оптимизировать серверное ПО, чтобы ресурсы нормально распределялись... Если ещё выберу время, то напишу что для этого надо и как это делается. Если кто-то заметил какие-то ошибки или есть какие-то вопросы — задавайте.

На всем известный мотив, по мотивам давних и недавних событий...

Web Standards Days (24.11.2012) Берт Бос Патрик Лауке Очень рад, что мне повезло пожать руку таким людям и сделать с ними пару кадров. Делюсь своей радостью и надеюсь, что это подстегнёт вас приехать в Москву на следующий год. Ведь это ещё не весь список гостей и докладчиков. И это только начало

Техническое задание. Базовые требования Платформы: 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

Тебе бы не курить ту дрянь что ты куришь =)))

https://jsfiddle.net/Jack_V_V/q6gksdv6/embedded/result/ Смотрим в хроме на 150%, старался, душу вкладывал.

пдыщ https://jsfiddle.net/vinnywww/8kqk251p/2/embedded/result/

Вертикальное выравнивание. Часть 1. - для тех кто не в курсе. Только что пришла в голову еще одна идея, которая, на мой взгляд проще в реализации и опять же кроссбраузерна. <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> html, body { margin: 0; padding: 0; height: 100%; } .text { display: table; height: 100%; width: 100%; background: pink; } .inner { display: table-cell; text-align: center; vertical-align: middle; } </style> <!--[if lte IE 7]> <style type="text/css"> .text { writing-mode: tb-rl; text-align: center; } .inner { display: inline-block; width: 100%; writing-mode: lr-tb; } </style> <![endif]--> </head> <body> <div class="text"> <span class="inner">Я по центру</span> </div> </body> </html> Проверял в: ИЕ 9 ИЕ 9 (режим ИЕ 8) ИЕ 9 (режим ИЕ 7) Opera 11.11 Firefox 5 Chrome (последний) Safari 5.0.5

Очень понравилось видео про профессию верстальщика... Рекомендую к просмотру. Видео

Всем привет! Сегодня, в знаменательный для себя день, хочу отдать должное нашему форуму. Именно 28 апреля три года назад я зарегистрировался здесь, чтобы решить свою проблему в верстке. На момент регистрации у меня был слегка прокачан навык верстки таблицами. И с тех пор понеслось. Следующие один за другим споры на тему таблица\дивы, разбор интересных решений, несколько заходов в раздел обсуждений работ и участие в огромном количестве тем с проблемами участников сделали свое дело. Хочу поблагодарить всех участников форума за создание постоянной движухи, админсостав за адекватный контроль всего этого и персонально Влада - как создателя этой кузницы кадров. Спасибо всем! В силу занятости сейчас сложно поддерживать тот же темп в участии жизни форума, а всем новичкам определенно советую держаться за этот форум и участвовать в обсуждениях. Помогая другим - учитесь сами! p.s. в первой проблеме мне так и не смогли помочь, пришлось переверстывать

Итак, хочу известить общественность об успешном завершении Первой Петербургской конференции htmlbook. Спасибо Radiocity, Sedoj, keltanas за участие! Прошло всё, на мой взгляд, достаточно неформально. В первую очередь интересно было пообщаться в живую с коллегами. Стоит так же признать, что до киевских коллег в плане организованности и количества участников нам расти и расти. По существу полноценных доклада было два: keltanas — о библиотеке RequireJS Radiocity — про то как скроллить на смартфонах (поправь если я не верно тебя понял) Ваш покорный слуга ограничился пространными разглагольствованиями об издательском деле, т.к. закончить доклад времени так и не нашёл Надеюсь исправить эту ошибку к следующей конфиренции (а может тему возьму не столь глобальную ) Дружище Sedoj раскрыл пару магических сео-тайн)) В этой теме предлагаю поделиться материалами. Radiocity что-то там снимал, кажется Я могу приложить скан протокола встречи с калькуляцией счёта съеденно-выпитого PS: не останется ли первая конференция единственной — вопрос открытый. Хотелось бы привлечь большее количество людей. И тогда, надеюсь, количество перейдёт в качество. Место конечно стоит выбирать менее шумное, имхо. Ну а так, пробный камень брошен

Большое спасибо всем собравшимся. Конференция стала гораздо взрослее и организованнее. Не знаю, стала она интереснее или нет, не мне судить. Хотелось бы выслушать критику в адрес выступавших и тем выступления. К сожалению и на удивление, времени на обсуждения не хватило, поэтому предлагаю перенести обсуждения на форум. Ссылки на презентации Управление потоком (flow) в CSS3 Структурно-событийная архитектура веб-приложений

По-моему, форумчан снова хотят провести…

Дорогие, уважаемые создатели, модераторы и активные участники htmlbook.ru! Спасибо вам ОГРОМНЕЙШЕЕ за тот титанический труд, который вы вкладываете в развитие данного ресурса! Спасибо за все-все ответы на самые наши тупые вопросы и пинки в нужном направлении! Спасибо за то, что всегда готовы помочь и поделиться своими знаниями, в любое время дня и ночи Без ваших ответов и дискуссий нам, новичкам, бывает очень тяжело разобраться в том потоке информации, которым изобилует интернет. Вы даете нам силы, знания и надежду на то, что когда-нибудь мы тоже, возможно, сможем достигнуть хоть сотой части вашего уровня. Ни один мой корректный вопрос не остался без ответа. Каждый день я узнаю для себя что-то новое и интересное. Спасибо вам за это. Желаю вам сил, удачи, терпения и процветания! Так держать!!!

brendmaster, нельзя брать деньги с заказчика и предлагать услуги того, чего в принципе не умеешь делать, а потом выискивать тех, кто сделает за тебя эту работу, еще и, по возможности, бесплатно. Должно же у компании быть какое-то лицо Я готова один-два раза сделать за гроши или "за спасибо", но только либо для повышения профессиональных навыков при наличии интересного некоммерческого проекта, либо при наличии свободного времени и желании кому-то помочь (но это мое личное право). И не путайте раба с фрилансером. Если Вы берете деньги за проект (как указано в прайсе, например, индивидуальная верстка страницы сайта 4000р/1 стр.), то извольте достойно оплатить и труд исполнителя, тогда люди к Вам сами за добавкой потянутся. Профессионал не хочет и не будет работать за копейки. С каждым выполненным проектом материальная ценность исполнителя повышается, а у Вас выходит, один и тот же фрилансер за одни и те же копейки каждый раз должен выполнять проекты, и с каждым разом все сложнее и разнообразнее. Ничего удивительного в том, что люди стали от Вас бежать после нескольких, как Вы выразились, "успешно сданных" проектов. Вы с помощью данного ресурса реализовали себе бесплатную верстку сайта компании, занимающейся созданием сайтов, получили бесплатную верстку еще нескольких проектов, и потом утверждаете, что нет доверия фрилансерам. Начните с себя, потому что к Вам, лично у меня, доверия еще меньше, как и к студии BRENDmaster, расположенной в Дзержинске. И скажите спасибо администрации данного форума, которая позволяла Вам раз за разом давать объявления и получать услуги без копейки денег с Вашей стороны. Карма показывает общий настрой среднестатистического потенциального исполнителя по отношению к Вам, а не "злые закомплексованные дяди и тети минуса наставили". Вы себя показали не с лучшей стороны, и я даже не представляю, как можно исправить ситуацию. Но если ничего не делать, то рано или поздно та же ситуация повторится с Вами и на других ресурсах, и будете раз за разом создавать новую студию, новый ник, пока не надоест придумывать логотипы и названия.

Добрый день. Данный пост расскажет о том, как правильно оформить вопрос, что бы получить на него ответ. Пожалуйста, выдели 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. Я искренне надеюсь на твоё понимание и отзывчивость к этим рекомендациям.

И снова мы на Web Standards Days в Москве, но теперь уже 28-го января 2017 в офисе Яндекса. И на этот раз не просто на конференции, а на днюхе Ильи! А ещё к нам присоединилась Оксана (sigma77), чему мы были дико рады! И по традиции выкладываю несколько фотографий с конференции... и не только Илья, Оксана и ещё какой-то чувак)) Я и Илья у меня дома И снова у меня дома) А теперь ещё и с моей дорогой хозяюшкой, которая накрыла нам стол и заготовила праздничный торт со свечками И как обычно, чтобы посмотреть фоты в лучшем качестве, жми на каждое из них)

Собственно, вот, написал плагин для поля ввода input[type=number] Опции плагина: wrap - класс для обвертки, так же есть возможность указания нескольких классов через пробел, по-умолчанию 'insWrap' btnU - класс кнопки инкремента (▲) значение поля, по-умолчанию 'ins-btnU' btnD - класс кнопки декремента (▼) значение поля, по-умолчанию 'ins-btnD' com - опция устанавливает по какому data-атрибуту будет осуществляться синхронизация нескольких полей, по-умолчанию 'com' tmpl - параметр позволяющий выбрать структуру html кода, по-умолчанию 'ab'. Возможный аббревиатуры: 'ab', 'ba', 'aa', 'bb', а так же вольный html-шаблон. 'ab' : устанавливает кнопки (▲) и (▼), после и перед (соответственно) полем. 'ba' : устанавливает кнопки (▲) и (▼), перед и после (соответственно) поля. 'aa' : устанавливает обе кнопки после поля. 'bb' : устанавливает обе кнопки перед полем. html-шаблон : позволяет записать html-структуру в виде строки. Например: tmpl : '<div class="test">|<div class="up"></div><div class="down"></div></div>' Символ вертикальной черты "|" указывает в какую позицию будет установлено поле ввода. Черта должна быть одна и только одна! Так же следует явно указать классы, которые будут являтся оберткой и кнопками! [*]tch - булевый параметр вкл\откл принудительную инициализацию события change на поле ввода при изменении его значения под средством функциональных клавиш, по-умолчанию true [*]wheel - булевый параметр вкл\откл событие mousewheel (требует подключения плагина jquery.mousewheel), по-умолчанию false UPD: Перенес, теперь на GitHub! Скачать Страничка с примерами

В Петербурге наступила осень. На улицах города становиться темно, сыро и холодно... А не пора ли жителям северной столицы и окрестностей собраться в каком-нибудь уютном кабачке, обсудить проблемы сайтопроизводства за кружечкой-другой любимых напитков? В общем, предлагаю в данной теме высказаться тех кто за то, чтобы познакомиться с новыми людьми, ну и себя показать. Место и время сбора: 1. 3 ноября 2012 (суббота) собираемся в 16.50 в вестибюле ст. метро Лиговский пр. около салона МТС. 2. ломимся в Кофейню Зеленая Комната «Этажей» (Лиговский проспект 74) 3. Если заблудились, сломался GPS-модуль головного мозга и не можем найти "Этажи", телефонируем Radiocity: +7(931)257-39-39 Список резидентов: Быколай Radiocity keltanas Sedoj ??? ShumNo Оглашайте ваши пожелания: чтобы хотелось услышать/увидеть, рассказать/показать, предлагайте темы для будущей беседы!

За дураков-то не держите: http://clip2net.com/s/1RmaB , http://clip2net.com/s/1Rma9 http://ipgeobase.ru/?address=109.184.194.7 Некрасиво так делать.

Я отвечу на понятном языке.

http://pmsrv.ru/ Вот я сделал новую пробную версию сайта для компании, в которой я работаю. Что вы об этом думаете? Чего ещё не хватает?

Большинство запросов на рецензию верстки, в разделе Обсуждение работ, в результате имеют одни и теже ответы. Более 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 Придерживаться или нет данных рекомендаций ложится на плечи разработчика. Если есть чем дополнить - предлагайте, так как список не окончен.

https://jsfiddle.net/kattiperk/gxbpwrw8/embedded/result/ что-то наводилось и нажималось на морде

Когда юноши пишут "я разочарована и выстрадала" меня тоже смешит =)))

Пусть Овечка в этот год Много счастья принесет! Сколько снега за окном, Столько теплоты в ваш дом! Сколько лампочек в гирлянде, Столько радости во взгляде! Сколько пузырьков в фужере, Столько же удачи в деле! Сколько за столом гостей, Столько радостных вестей! Сколько праздничных одежд, Столько сбывшихся надежд! Вернее с Наступающим НГ

Привет. Скажу сразу -- в тексте будут опечатки так как задание писалось на планшете. Я не заморачивался поверкой текста и писал все ниже изложенное на коленке. Все написано, так скзать, на одном дыхании. Но если ты найдешь ошибку и укажешь на нее я с внесу правки. Для чего это я написал это задание? Большинство заданий тут представленных направлены на самых что ни есть новичков. Ну или тех разработчиков которые познали хотя бы азы в верстке. В итоге сверстав пару макетов новоиспеченный верстальщик идет или на фриланс или в мелкую компанию и верстает такие же по уровню сложности сайты. Как правило это хомяки, не большие промо сайты, ну или в крайнем случае что-то похожее на каталоги/интернет магазины. Имхо, рост в сфере верстальщика это сложный и тернистый путь. Он возможен только при условии когда ты берешся за работу, которая выше уровнем твоих знаний. Так вот, данное задание направленно тем, кто не знает как его реализовать -- для того что бы его выполнение подняло уровень знаний. Небольшое отступление. В кратце -- что из себя будет представлять задание. Я постараюсь изложить все в форме ТЗ но, с уточнениями по организации дерева папок, описанием работы тех или иных блоков и/или элементов, подскажу не очевидные проблемы которые могут возникнуть в будущем, и наверно много чего о чем в данный момент не вспомню. Или другими словами -- ТЗ от разработчика с рекомандициями. Да бы не превращать топик в простыню я спрячу все в спойлер.

Просто ТС-у не следовало создать тему на форуме где все хотя бы минимально разбираются в верстке) Может тетя/девушка сидящая за столом в какой нибудь фирме не поймет ошибок, им подавай чтоб было в топе и заходили за день стотыщ.. Имхо, вам с такими навыками прямиком в биржу поиска работы, иногда там встречаются такие тети/девушки. Им можно втюхать свободно, а тут навряд ли получится)

Мне давно было интересно как устроен всеми любимый jQuery и вот я решил засесть за него (благо что исходники у него открытые). И вот, по просьбе камрада mishka2 я рассказываю, что я выяснил, как работает этот фреймворк и как написать свой такой же. Прежде всего пара фишек яваскрипта, про которые не все начинающие знают: 1) Имена функций: В яваскрипте валидными считаются любые имена функций, которые начинаются с буквы, со знака доллара ($) и со знака подчеркивания (_). Так что когда вы используете ваш любимый jQuery, вызывая к примеру $(document), знайте, что вы вызываете функцию у которой имя $ и передаете ей в качестве аргумента document. 2) Вызов функций: Обычно все пишут какую-нибудь функцию, к примеру: function myFunc() { alert(1); } // или так var myFunc = function() { alert(1); } а потом вызывают ее, но многие не знают, что в яваскрипте можно вызвать функцию сразу при создании вот таким методом: (function() { // создаем функцию alert(1); })(); // и тут же вызываем ее 3) Переменные и функции: Яваскрипт - это объектно ориентированный язык программирования. В нем все является либо объектами, либо свойствами объектов. Даже если вы используете процедурный подход к программированию (создаете отдельные функции и оперируете ими), вы все равно создаете объекты, т.к. в яваскипте любая функция - это объект. Т.е. вы можете вызвать ее через оператор new и рабоать с ней как с объектом. Когда вы создаете переменную в глобальной области видимости, то она записывается как свойство глобального объекта window. Т.е.var a = 1; и window.a = 1 эквивалентны. Ну вот теперь многие вещи в jQuery станут понятны. Самое интересное в jQuery то, что как только вы поздключили его на страницу он у вас сразу инициализирован. Давайте посмотрим как это сделано. 1) Для начала давайте создадим наш объект, назовем его Helper, у него будет пока единственный метод init(), который должен будет инициализировать его. А делать наш объект будет всего одну вещь - находить по ID элемент на странице или получать уже найденный элемент как ноду и возвращать его: var Helper = { init: function(elem) { elem = typeof elem == 'string' ? document.getElementById(elem) : elem; return elem; } } Фишка в том, что нам надо будет обязательно инициализировать наш объект, для того чтобы он заработал, т.е. нам нужно будет где-либо на странице вызвать метод init(): alert(Helper.init('id_элемента')); Но нам то нужно получить что-то вроде такого: alert(Helper('id_элемента')); Тут то нам и приходит на помощь вызов функции сразу при создании, единственное, что нам потребуется это анонимная функция (т.е. функция без имени), которая будет вызываться сразу же после создания и вспомогательная функция, которая будет инициализировать наш объект и возвращать его: (function() { // анонимная функция var Helper = function(elem) { // вспомогательная функция return new Helper.foo.init(elem); // которая возвращает нам уже проинициализированный объект } Helper.foo = { // наш основной объект init: function(elem) { // метод, где происходит инициализация elem = typeof elem == 'string' ? document.getElementById(elem) : elem; return elem; // метод возвращает нам ссылку на ноду } } })(); // сразу же вызываем анонимную функцию У внимательного читателя должен возникнуть вопрос: "Откуда взялся Helper.foo? И почему именно так?". Все дело в наследовании прототипов. Вообще, прототипы в яваскрипте это довольно сложная для понимания штука. В конце я дам ссылки на ресурсы где про это можно почитать. Признаюсь, сам перечитывал раз 10, но все равно не понял до конца как они работают. Скажу лишь, что когда мы пишем new Helper.foo.init(elem);, то не создаем новый объект с именем Helper.foo как вы могли подумать, а создаем новый объект с именем Helper.foo.init (т.к. init() - тоже функция), у которого нет ни одного метода. И чтобы использовать все методы которые мы будем добавлять в Helper.foo в дальнейшем на понадобится переопределить прототип Helper.foo.init. Пока все это звучит очень запутанно, но я надеюсь, что когда вы увидите дальнейший код, то все поймете. Итак, теперь у нас есть проинициализированный объект и казалось бы мы можем его начать вызывать, но (как вы должны знать) переменная Helper у нас получилась не глобальной, т.к. она находится внутри анонимной функции. Чтобы начать использовать наш Helper нам надо передать его в глобальную область видимости, вот так это сделано в jQuery: (function() { // анонимная функция var Helper = function(elem) { // вспомогательная функция return new Helper.foo.init(elem); // которая возвращает нам уже проинициализированный объект } Helper.foo = { // наш основной объект init: function(elem) { // метод, где происходит инициализация elem = typeof elem == 'string' ? document.getElementById(elem) : elem; return elem; // метод возвращает нам ссылку на ноду } } // передаем переменную Helper в глобальную область видимости window.Helper = Helper; })(); // сразу же вызываем анонимную функцию Все, теперь вы можете использовать проинициализированный объект: <body> <div id="test"></div> <script type="text/javascript"> alert(Helper('test')); </script> </body> Но позвольте, откуда же в jQuery берется доллар? Все очень просто - пусть у нас будет два доллара: (function() { var Helper = function(elem) { return new Helper.foo.init(elem); } Helper.foo = { init: function(elem) { elem = typeof elem == 'string' ? document.getElementById(elem) : elem; return elem; } } // создаем два доллара window.Helper = window.$$ = Helper; })(); И вызываем: <body> <div id="test"></div> <script type="text/javascript"> alert($$('test')); </script> </body> Однако, если в jQuery вызвать $('#test'), то он вернет не ссылку на ноду а сам себя, т.е. объект jQuery и чтобы получить ссылку на ноду в jQuery нам придется сделать что-то вроде этого: <body> <!-- Используем jQuery --> <div id="test"></div> <script type="text/javascript"> alert($('#test')); // выведет [object Object] (сам себя) alert($('#test')[0]); // выведет [object HTMLDivElement] </script> </body> Все это потому, что все найденные элементы jQuery цепляет к себе. Ничто не мешает нам сделать так же: (function() { var Helper = function(elem) { return new Helper.foo.init(elem); } Helper.foo = { init: function(elem) { elem = typeof elem == 'string' ? document.getElementById(elem) : elem; this[0] = elem // цепляем элемент к объекту return this; // возвращаем не элемент, а наш объект } } window.Helper = window.$$ = Helper; })(); Вот у нас и получится тоже самое: <body> <!-- Используем наш фреймворк --> <div id="test"></div> <script type="text/javascript"> alert($$('test')); // выведет [object Object] (сам себя) alert($$('test')[0]); // выведет [object HTMLDivElement] </script> </body> Теперь давайте добавим в наш фреймворк какой-нибудь метод, например пусть у него будет имя getNodeName(), а возвращать он будет имя ноды: (function() { var Helper = function(elem) { return new Helper.foo.init(elem); } Helper.foo = { init: function(elem) { elem = typeof elem == 'string' ? document.getElementById(elem) : elem; this[0] = elem return this; }, getNodeName: function() { // наш новый метод // возвращает имя ноды найденного объекта в верхнем регистре return this[0].nodeName.toUpperCase(); } } window.Helper = window.$$ = Helper; })(); Давайте попробуем при помощи нашего нового метода узнать имя ноды: <body> <div id="test"></div> <script type="text/javascript"> alert($$('test').getNodeName()); // Ошибка !!! </script> </body> Почему же это не работает? Как я уже говорил выше, вспомогательная функция Helper создает новый объект с именем Helper.foo.init, а внутри нашего метода init() нет никаких других методов. Поэтому нам надо переопределить прототип для Helper.foo.init, т.е. указать скрипту явно, что шаблоном нашего объекта является не Helper.foo.init, а Helper.foo. Причем наш объект foo должен храниться обязательно как свойство объекта Helper иначе (если я правильно понял, прочитав кучу статей про прототипы) переопределить прототип не получится. (function() { var Helper = function(elem) { return new Helper.foo.init(elem); } Helper.foo = { init: function(elem) { elem = typeof elem == 'string' ? document.getElementById(elem) : elem; this[0] = elem return this; }, getNodeName: function() { return this[0].nodeName.toUpperCase(); } } Helper.foo.init.prototype = Helper.foo; window.Helper = window.$$ = Helper; })(); Вот теперь все заработает: <body> <div id="test"></div> <script type="text/javascript"> alert($$('test').getNodeName()); // выведет DIV </script> </body> Ну вот и все, теперь вы можете расширять свой фреймворк, добавляя туда новые методы и использовать его так же как и jQuery. Теперь вы представляете как устроен этот фреймворк. Конечно то что я тут описал - это очень сильно упрощенная версия jQuery. Она умеет находить ноду только по ID и в ней нет кучи полезных фишек jQuery. Но я не волшебник, я только учусь. Многое еще остается в jQuery для меня не ясным, но надеюсь со временем я его таки доковыряю P.S. Что я читал: http://javascript.ru/ecma/part8#_Prototype_ http://javascript.ru/tutorial/object/inher...type-i-prototip http://code.jquery.com/jquery-1.4.2.js http://dklab.ru/chicken/nablas/40.html

Поздравляю всех форумчан с наступающим Новым Годом. Желаю всем творческих успехов, огромного трафика и всего того, чего Вам хочется, и побольше, и побыстрее.

Огромное спасибо дружище тебе (а так же SelenIT'у и Грит Рашу) за эту статью http://css-live.ru/f...stalshhika.html. Благодаря ей, я вдохновился стать верстальщиком. Прошёл ровно год как я её прочёл, за год я вырос профессионально, зарплата выросла выше средней статистической по Украине. Позволил себе выучиться на права и купить старенькую иномарочку. Если бы не эта статья, я наврятли решился бы серьёзно заниматься данной профессией. Всех благ тебе дружище, твоя статья кардинально перевернула мою жизнь Нашёл себя и получаю одно удовольствие от работы.

Ты красивая ) Прости меня за мою откровенность =))

После Caps Lock и кучи восклицательных и вопросительных знаков все вопросы отпали сам собой. Что и требовалось доказать. Договор не значит в этом бизнесе ничего, фрилансер бесправен. К тому же, заключив договор, вы будете обязаны оплатить налог с суммы сделки. Если не 100%, то 50/50. Дизайнер показывает вам немного уменьшеный (60-70% от оригинала) макет в формате jpg, если заказчик принимает, то высылает исходники и получает остальные 50%. Причем рекомендую исполнителям не вестись на договоры (о чем я написал выше), а требовать расписку с указанием полной суммы сделки, сумму половины которую вам выдадут за макет и оставшуюся сумму. Причем расписка пишется от частного лица частному лицу, как обязательство. В суде за неисполнение долга могут не просто обязать выплатить долг, но и мошенничество пришить. Обязательно переслать самому себе на мыло исходники и ни в коем случае не читать это письмо. В суде это одно из решающих доказательств и всегда учитывается судьей. Все это проверено на личном опыте. А договором можете подтереться, ООО отвечает только своим уставным капиталом в 10.000 рублей, тогда как частное лицо или ИП всем своим имуществом. Еще вопросы есть?