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 [email protected] 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/ Вот я сделал новую пробную версию сайта для компании, в которой я работаю. Что вы об этом думаете? Чего ещё не хватает?

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

Боже, меня жутко бесит, то что ты написал, но в данном контексте ты очень прав. Потому что js не нужен для типичного фронт-энда вот и всё блин, и большинство фронт-эндов не знают его и им не надо его знать. Это нереально мощный язык если говорить о например прикладной защите информации, где раскрывается весь его потенциал. Для веба надо уметь создать функцию/цикл/переменную на js и не больше, остальное это то как ты владеешь библиотеками и другие твои знания которые ты свяжешь с этим, книги здесь действительно тупо балласт. Бл**, сори вырвалось. Расскажите мне пожалуйста с какого времени книги стали по JS говном? Flanagan - ерунда? Вы прикалываетесь? Надоели новые "скрипткидесы", которые просто не знают фундаментальные вещи. Frontend не нужен для типичного говнокодера по вашему описанию. Что?! JS и прикладная защита информации? В общем тут все понятно. Дополню, возможно язык и можно изучить альтернативными методами получениями информации и даже нужно для диверсификации источника, но утверждать, что книги ерунда это кощунство.

Недавно видела девушку, одетую в черные сапоги, голубые колготы, черную юбку и такую же голубую кофту. Я для неё баба, которая пялится, а она для меня всего лишь repeating-linear-gradient.

1 телефонный номер автоматически на мобаил сафари оборачивается в ссылку. 2 а у вас есть такие замечательные строки в цсс .head a { width:180px; height:52px; background:url("../img/logo.jpg") 0% 0% no-repeat; display:block; top:116px; right:40px;}Соотв создается просто ссылка, которая у вас застаилена глобально от .head, что и вызывает баг. Поменяйте .head a на .head .logo или просто .logo Отключить такое поведение можно так <meta name="format-detection" content="telephone=no">

Встреча верстальщиков 1 декабря 2013 года. В этот знаменательный день мы собрались, чтобы отпраздновать День Рождения культового среди верстальщиков ресурса HTMLBOOK.RU. Ведь каждый из нас приходил сюда не просто так. Кто-то из праздного интереса, кто-то за помощью, а кто-то и для того, чтобы найти работу. Мне очень прискорбно и обидно видеть на форуме огромное количество тем с заголовком - "Как учить верстку", "Ищу наставника", "С чего начать". Люди приходят на ресурс, не для того чтобы научиться, а найти ключ успеха подобно пестрящим заголовкам на книжных бестселлерах - "Путь миллионера ", "Как работать на себя", где каждый ищет способ "Здесь и сейчас". Такого не бывает, каждый человек сначала работает над собой, а только потом приходит понимание. Наставник на самом деле ближе, чем вы думаете. Он здесь. И он всегда был здесь, просто стоит немного остановится и подумать, что вам действительно надо. Терять время на поиски волшебного Грааля или задать правильно вопрос и сделать первый шаг к своему успеху? Дело ваше. А тем временем мы отметили и поздравили теплой дружной атмосферой и бокалом пива день рождения ресурса. Ведь он объединяет многих людей по цеху. Мы очень рады были, что к этому событию к нам присоединилась мастер своего дела из России - IxChel (Оксана), а по совместительству модератор сего ресурса и очень замечательный человек. Стоит заметить, на предыдущей встрече нас радовал своим присутствием другой человек (SelenIT). Низкий вам поклон, что нашли время и к нам присоединились. Alexriz, я знаю, что ты читаешь эти строки,...ждем короче ...тебе ехать ближе. Спасибо ресурсу за то, что он есть. За то, что собрал под своей крышей людей, которые нередко становятся друзьями, люди, которые всегда помогут друг другу советом. HTMLBOOK.RU желаем, чтобы ты продолжал развиваться, счастья и долголетия. Влад проделал колоссальную работу, задал ритм благодаря которому веб становится действительно лучше. В общем во благо дальнейшему развитию и благополучию, мы принесли в жертву ритуальный торт. Небольшой фотоотчет: (сознательно не подписывал who is who, приходите познакомимся) Я надеюсь встреча не последняя, кому интересно, следите за темой и присоединяйтесь. Успехов.

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

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

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

Одного желания и наличия команды недостаточно. Если проводить аналогии, то вы должны быть дирижёром, перед которым лежит партитура музыкального произведения. Только дирижёр знает и понимает, как должно звучать музыкальное произведение и лишь отдаёт команды исполнителям в какой момент им вступать, в какой останавливаться, где нужен акцент, где крещендо. Также можно сравнить эту работу с режиссёром, который вначале визуально представляет картину в мыслях, а затем воплощает её в виде видеоряда. Но режиссёру также нужны художники, операторы, костюмеры, гримёры, которые не знают ничего о замысле режиссёра, и он должен простыми словами донести до них свою задумку, установить чёткие сроки, следить за выполнением работы, утверждать её, давать комментарии, хвалить людей, поддерживать в них мотивацию и следить за тем, чтобы к указанной дате всё было воплощено в жизнь. Вы хотите сделать проект, но в реальности у вас сейчас нет ни концепции, ни грамотного описания что вы хотите получить. Без этого ничего у вас не получится. Никто к вам не пойдёт, потому что нет стимула, нет понимания, что получится нечто действительно стоящее. К тому же вам постоянно придётся работать с разношёрстной командой специалистов. Хватит ли у вас сил координировать их работу, давать им правильные задания, контролировать сроки выполнения?

ctpz,

Вступление Что мы будем делать: бесконечную карусель картинок (infinite image carousel - это для тех, кто хочет погуглить на тему). Используем для этого небезызвестный фреймворк jQuery. Но мы не будем писать просто код, а напишем полноценный легко настраиваемый плагин. Вообще говоря, на сайте http://www.jquery.com/ есть туториал как писать плагины для jQuery, но для тех кто не знает английского, я опишу важные моменты. Т.к. у меня нет хостинга, то я не могу показать вам что получится у нас в итоге, но примерный результат вы можете посмотреть на этой странице http://jqueryfordesigners.com/demo/infinite-carousel.html. Конечно же мы не будем полностью клонировать эту карусель, а напишем свою, которая будет во многом лучше и удобней для конкретного применения. Итак, приступим... Базовая верстка Наша каруселька будет состоять из нескольких элементов, вложенных друг в друга. Обычно (если кто гуглил, то заметил) это <div>, в который вложен неупорядоченный список (<ul>). Но я не хочу привязываться к определенному HTML, поэтому остановимся на таком обязательном условии: на странице должен быть блок-контейнер, в него должен быть вложен блок-карусель, в который могут быть вложены любые элементы с display: block; или display: inline-block; Но для простоты будем работать с версткой как у всех (хотя это не важно): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ru"> <head> <title>jQuery Карусель</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <style type="text/css"> .container { border: red 1px solid; } .carousel { margin: 0; padding: 0; list-style: none; } .carousel li { float: left; width: 88px; height: 88px; padding: 5px; background: lightblue; border: blue 1px solid; } </style> <!-- Тут подключаем фреймворк jQuery. Лучше конечно скачать его себе в проект, а не использовать ссылку на сторонний ресурс (как у меня). --> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script> <!-- Подключаем наш плагин, который будет расположен по адресу js/myCarousel.js (ну или куда вы там его положите) --> <script type="text/javascript" src="js/myCarousel.js"></script> <script type="text/javascript"> $(document).ready(function() { // ...тут будет вызываться наш плагин }); </script> </head> <body> <div class="container"> <!-- Вместо <ul> может быть любой блочный элемент, в который могут быть вложены любые блочные элементы --> <ul class="carousel"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> </div> <!-- Кнопки навигации могут располагаться где угодно на странице --> <button class="prev"><</button> <button class="next">></button> </body> </html> Вот и вся тестовая страничка, над которой мы будем экспериментировать. Больше к HTML мы возвращаться не будем, начнем писать скрипт... Как пишутся плагины для jQuery Прежде всего, рекомендую вам пройти по этой ссылке - http://docs.jquery.com/Plugins/Authoring где написан подробный туториал по созданию плагинов для jQuery. Я не буду полностью переводить его, а остановлюсь лишь на моментах, которые важны для нашего проекта. Приступая Итак, чтобы написать плагин для jQuery нужно добавить новый метод к объекту jQuery.fn: // создаем новый метод объекта jQuery.fn jQuery.fn.myCarousel = function() { // Тут пишем код нашего плагина }; "Но где же знак доллара ($)?", спросите вы. Не волнуйтесь, он все еще тут. Однако, чтобы удостовериться, что наш плагин не пересекается с другими библиотеками, которые тоже используют знак доллара, лучше всего передать объект jQuery в самовыполняющуюся функцию (замыкание), которая свяжет его со знаком доллара так, что его нельзя будет переназначить: // создаем функцию-замыкание... (function($){ // создаем новый метод объекта jQuery.fn $.fn.myCarousel = function() { // Тут пишем код нашего плагина }; })(jQuery); // ...которую тут же вызываем, передавая ей в качестве аргумента объект jQuery Таким образом мы сможем использовать знак доллара внутри нашего плагина, не боясь, что он (доллар) может быть переназначен другим скриптом. Контекст Для тех кто не знает что такое контекст (<b>this</b>) рекомендую почитать эту статью. В области видимости (scope) плагина ключевое слово this ссылается на сам объект jQuery, по этому его нет необходимости оборачивать таким образом - $(this);, что является распростаненной ошибкой среди начинающих разработчиков плагинов. Смотрим код: (function($){ $.fn.myCarousel = function() { // нет необходимости писать $(this) т.к. // "this" уже ссылается на объект jQuery // запись $(this) будет означать то же самое, что и $($('#element')); this.fadeIn('normal', function() { // здесь же this будет ссылаться на конкретный DOM-элемент }); }; })(jQuery); Цепь вызовов Почти каждый метод фреймворка jQuery возвращает собственно сам объект jQuery. Это сделано для того, чтобы обеспечить возможность цепочки вызовов. Давайте рассмотрим такой код: $('div').children().css('background', 'red'); Методы .children() и .css() оба являются методами объекта jQuery, но в коде они вызываются последовательно (по цепочке), это возможно благодаря тому, что каждый метод возвращает нам объект jQuery. Это и называется цепь вызовов. Чтобы наш плагин обеспечивал эту возможность, нам нужно из ближайшей области видимости (immediate scope) вернуть ссылку на объект-конструктор, т.е на jQuery. Так же. чтобы наш плагин работал со всеми найденными элементами нам надо использовать метод .each(): (function($){ // создаем новый метод объекта jQuery.fn $.fn.myCarousel = function() { // возвращаем ссылку на объект jQuery return this.each(function() { // сохраняем контекст ($this будет ссылаться на объект jQuery) var $this = $(this); // ...далее идет код плагина }); }; })(jQuery); Опции и значения по умолчанию Для того чтобы плагин можно было легко настраивать можно сделать настройки по умолчанию, которые можно изменять или расширять при помощи метода .extend(). Таким образом нам не придется задавать кучу параметров для нашего плагина, вмето этого можно передать всего один, который будет объектным литералом (JSON): (function($){ /* * создаем новый метод объекта jQuery.fn, * в который передаем параметр options */ $.fn.myCarousel = function(options) { // дефолтные настройки var settings = { a: 1, b: 'text' }; // возвращаем ссылку на объект jQuery return this.each(function() { if (options) { // если в функцию передали опции /* * метод .extend() сливает два объекта, * заменяя совпадающие свойства, * которые есть в объекте settings * новыми свойствами из объекта options * и возвращает измененный settings */ $.extend(settings, options); } // сохраняем контекст ($this будет ссылаться на объект jQuery) var $this = $(this); alert(settings.a); alert(settings.; }); }; })(jQuery); // пример вызова плагина $(document).ready(function() { $('div').myCarousel({ a: 42, b: 'новый текст' }); }); В принципе это все что понадобится нам для создания нашего плагина, поэтому я не буду описывать остальные параграфы из туториала. Кому интересно прочитает о них самостоятельно. Начинаем писать плагин Итак, приступаем к написанию собственно нашего плагина-карусели. Для начала давайте определимся, что нам надо от нашей карусели: 1) она должна быть бесконечной, т.е. когда мы домотаем до последнего элемента все начнется по кругу; 2) кнопки управления могут находится в любом месте на странице (чтобы мы могли подстраивать её под любой дизайн); 3) мы должны сами выбирать по сколько элементов за раз будет проматываться; 4) мы болжны сами выбирать с какой скоростью будут перематываться элементы; 5) мы должны сами выбирать сколько элементов будет отображаться в обласи видимости, а сколько будет "за кадром"; 6) должна быть возможность автоматической перемотки если юзер не нажал на стрелки сам. Вооружившись знаниями о написании плагинов, приступим к реализации задуманного: (function($){ $.fn.myCarousel = function(options) { // дефолтные настройки var settings = { visible: 3, // видимых элементов - 3 rotateBy: 1, // мотать по одному элементу speed: 500, // скорость перемотки (в миллисекундах) btnNext: null, // кнопка перемотки к следующему элементу btnPrev: null, // кнопка перемотки к предыдущему элементу auto: null, // время задержки (в миллисекундах) при автоматической перемотке backSlide: false // будет ли карусель крутиться в обратную сторону при автоматической перемотке }; return this.each(function() { if (options) { $.extend(settings, options); } var $this = $(this); // сохраняем контекст }); }; })(jQuery); Тут надеюсь все понятно. Теперь нам необходимо определить, так сказать, "глобальные" переменные (конечно они не глобальные во всем документе, а "глобальные" для нашего плагина): (function($){ $.fn.myCarousel = function(options) { // дефолтные настройки var settings = { visible: 3, rotateBy: 1, speed: 500, btnNext: null, btnPrev: null, auto: null, backSlide: false }; return this.each(function() { if (options) { $.extend(settings, options); } // определяем "глобальные" переменные var $this = $(this); // сохраняем контекст var $carousel = $this.children(':first'); // находим первого потомка в нашем контейнере (.container), т.е. <ul> var itemWidth = $carousel.children().outerWidth(); // находим ширину одного элемента внутри нашего контейнера var itemsTotal = $carousel.children().length; // определяем сколько всего элементов у нашей карусели var running = false; // флаг, который хранит информацию о том проигрывается ли анимация на данный момент var intID = null; // ID интервала (нужен для сброса интервала) }); }; })(jQuery); Обратите внимание на то что я специально взял слово "глобальные" в кавычки, чтобы у вас не возникло путаницы. Эти переменные не являются глобальными на самом деле, т.е. они не видны за пределами функции. Возможно лучше было бы обозвать их "статическими", но мне больше понравился первый вариант. Далее нам необходимо присвоить такие стили для нашей карусели без которых она не будет работать. Юзер может забыть их присвоить, поэтому нам необходимо задавать эти стили скриптом: (function($){ $.fn.myCarousel = function(options) { // дефолтные настройки var settings = { visible: 3, rotateBy: 1, speed: 500, btnNext: null, btnPrev: null, auto: null, backSlide: false }; return this.each(function() { if (options) { $.extend(settings, options); } // определяем "глобальные" переменные var $this = $(this); var $carousel = $this.children(':first'); var itemWidth = $carousel.children().outerWidth(); var itemsTotal = $carousel.children().length; var running = false; var intID = null; // присваиваем необходимые стили для элементов карусели // сначала для контейнера $this.css({ 'position': 'relative', // необходимо для нормального отображения в ИЕ6(7) 'overflow': 'hidden', // прячем все, что не влезает в контейнер 'width': settings.visible * itemWidth + 'px' // ширину контейнера ставим равной ширине всех видимых элементов }); // потом для внутреннего элемента (в нашем случае <ul>) $carousel.css({ 'position': 'relative', // относительное позиционирование нужно для того, чтобы можно было использовать сдвиг влево 'width': 9999 + 'px', // ставим ширину побольше, чтобы точно влезли все элементы 'left': 0 // устанавливаем нулевой девый сдвиг }); }); }; })(jQuery); Теперь, после всех приготовлений, пришло время заняться написанием нашей главной функции - функции "скольжения", которая будет прокручивать карусель. Я не буду расписывать на словах как она работает, а лучше покажу схему, из которой вам будет больше понятен принцип работы бесконечной карусели: На картинке описана прокрутка к предыдущему элементу. Такая же последовательность действий у нас будет при прокрутке к следующему элементу. Остальное, надеюсь, будет понятно из кода: (function($){ $.fn.myCarousel = function(options) { // дефолтные настройки var settings = { visible: 3, rotateBy: 1, speed: 500, btnNext: null, btnPrev: null, auto: null, backSlide: false }; return this.each(function() { if (options) { $.extend(settings, options); } // определяем "глобальные" переменные var $this = $(this); var $carousel = $this.children(':first'); var itemWidth = $carousel.children().outerWidth(); var itemsTotal = $carousel.children().length; var running = false; var intID = null; // присваиваем необходимые стили для элементов карусели // сначала для контейнера $this.css({ 'position': 'relative', // необходимо для нормального отображения в ИЕ6(7) 'overflow': 'hidden', // прячем все, что не влезает в контейнер 'width': settings.visible * itemWidth + 'px' // ширину контейнера ставим равной ширине всех видимых элементов }); // потом для внутреннего элемента (в нашем случае <ul>) $carousel.css({ 'position': 'relative', // относительное позиционирование нужно для того, чтобы можно было использовать сдвиг влево 'width': 9999 + 'px', // ставим ширину побольше, чтобы точно влезли все элементы 'left': 0 // устанавливаем нулевой девый сдвиг }); // параметр dir(boolean) - false(сдедующий), true(предыдущий) function slide(dir) { var direction = !dir ? -1 : 1; // выбираем направление в зависимости от переданного параметра (влево или вправо) var leftIndent = 0; // левое смещение (для <ul>) if (!running) { // если анимация завершена (или еще не запущена) running = true; // ставим флажок, что анимация в процессе if (intID) { // если запущен интервал window.clearInterval(intID); // очищаем интервал } if (!dir) { // если мы мотаем к следующему элементу (так по умолчанию) /* * вставляем после последнего элемента карусели * клоны стольких элементов, сколько задано * в параметре rotateBy (по умолчанию задан один элемент) */ $carousel.children(':last').after($carousel.children().slice(0, settings.rotateBy).clone(true)); } else { // если мотаем к предыдущему элементу /* * вставляем перед первым элементом карусели * клоны стольких элементов, сколько задано * в параметре rotateBy (по умолчанию задан один элемент) */ $carousel.children(':first').before($carousel.children().slice(itemsTotal - settings.rotateBy, itemsTotal).clone(true)); /* * сдвигаем карусель (<ul>) влево на ширину элемента, * умноженную на количество элементов, заданных * в параметре rotateBy (по умолчанию задан один элемент) */ $carousel.css('left', -itemWidth * settings.rotateBy + 'px'); } /* * расчитываем левое смещение * текущее значение left + ширина одного элемента * количество проматываемых элементов * на направление перемещения (1 или -1) */ leftIndent = parseInt($carousel.css('left')) + (itemWidth * settings.rotateBy * direction); // запускаем анимацию $carousel.animate({'left': leftIndent}, {queue: false, duration: settings.speed, complete: function() { // когда анимация закончена if (!dir) { // если мы мотаем к следующему элементу (так по умолчанию) // удаляем столько первых элементов, сколько задано в rotateBy $carousel.children().slice(0, settings.rotateBy).remove(); // устанавливаем сдвиг в ноль $carousel.css('left', 0); } else { // если мотаем к предыдущему элементу // удаляем столько последних элементов, сколько задано в rotateBy $carousel.children().slice(itemsTotal, itemsTotal + settings.rotateBy).remove(); } if (settings.auto) { // если карусель должна проматываться автоматически // запускаем вызов функции через интервал времени (auto) intID = window.setInterval(function() { slide(settings.backslide); }, settings.auto); } running = false; // отмечаем, что анимация завершена }}); } return false; // возвращаем false для того, чтобы не было перехода по ссылке } // назначаем обработчик на событие click для кнопки next $(settings.btnNext).click(function() { return slide(false); }); // назначаем обработчик на событие click для кнопки previous $(settings.btnPrev).click(function() { return slide(true); }); if (settings.auto) { // если карусель должна проматываться автоматически // запускаем вызов функции через временной интервал intID = window.setInterval(function() { slide(settings.backslide); }, settings.auto); } }); }; })(jQuery); Вот и готов наш плагин Сохраните его в файле my_carousel.js, подключите на страницу, а затем, между тегами <head></head> напишите такой вызов: <script type="text/javascript"> $(document).ready(function() { $('.container').myCarousel({ btnNext: '.next', btnPrev: '.prev', visible: 4, rotateBy: 2 }); }); </script> Итак, опишем настройки для нашей карусели: btnNext - строка, выражение в формате jQuery (по умолчанию null) btnPrev - строка, выражение в формате jQuery visible - целое число, количество видимых элементов (по умолчанию 1) rotateBy - целое число, по сколько элементов мотать за раз (по умолчанию 1) speed - целое число, скорость прокрутки элементов в миллисекундах (чем больше тем медленней, по умолчанию 500 миллисекунд) auto - целое число, задержка автоматической прокрутки элементов в миллисекундах (если назначена, по умолчанию null) backSlide - булево значение true/false, направление прокрутки: false - к следующему элементу, true - к предыдущему элементу (по умолчанию false) И на последок полный код нашего плагина без комментариев. my_carousel.js (function($){ $.fn.myCarousel = function(options) { var settings = { visible: 3, rotateBy: 1, speed: 500, btnNext: null, btnPrev: null, auto: null, backSlide: false }; return this.each(function() { if (options) { $.extend(settings, options); } var $this = $(this); var $carousel = $this.children(':first'); var itemWidth = $carousel.children().outerWidth(); var itemsTotal = $carousel.children().length; var running = false; var intID = null; $this.css({ 'position': 'relative', 'overflow': 'hidden', 'width': settings.visible * itemWidth + 'px' }); $carousel.css({ 'position': 'relative', 'width': 9999 + 'px', 'left': 0 }); function slide(dir) { var direction = !dir ? -1 : 1; var leftIndent = 0; if (!running) { running = true; if (intID) { window.clearInterval(intID); } if (!dir) { $carousel.children(':last').after($carousel.children().slice(0, settings.rotateBy).clone(true)); } else { $carousel.children(':first').before($carousel.children().slice(itemsTotal - settings.rotateBy, itemsTotal).clone(true)); $carousel.css('left', -itemWidth * settings.rotateBy + 'px'); } leftIndent = parseInt($carousel.css('left')) + (itemWidth * settings.rotateBy * direction); $carousel.animate({'left': leftIndent}, {queue: false, duration: settings.speed, complete: function() { if (!dir) { $carousel.children().slice(0, settings.rotateBy).remove(); $carousel.css('left', 0); } else { $carousel.children().slice(itemsTotal, itemsTotal + settings.rotateBy).remove(); } if (settings.auto) { intID = window.setInterval(function() { slide(settings.backslide); }, settings.auto); } running = false; }}); } return false; } $(settings.btnNext).click(function() { return slide(false); }); $(settings.btnPrev).click(function() { return slide(true); }); if (settings.auto) { intID = window.setInterval(function() { slide(settings.backslide); }, settings.auto); } }); }; })(jQuery); Предложения, критику и прочее в приват. Всем спасибо за внимание.