Синтаксис CSS несложен, и для понимания его совсем не нужно иметь степень доктора в области IT. Однако, это один из немногих популярных языков, который не является логичным в самом прямом смысле этого слова. В отличие от других языков веб-программирования, таких как JavaScript и PHP, в CSS проблемы не решаются с помощью обычной логики. Алгоритмы типа «если X, то сделать Y, в противном случае сделать Z» или «выбрать все Y, затем сделать с ними X» не могут быть осуществлены в таком языке, как CSS. Проще говоря, это язык, созданный для оформления, язык для дизайнеров, а не девелоперов. Некоторые из опытных программистов, с которыми я работал, именно по этой причине тратили много усилий на то, чтобы освоить CSS.

Обучение CSS начинается с классов и ID, а также с использования . и # для непосредственного обозначения элементов. Этого достаточно чтобы построить полнофункциональный веб-сайт, но это не достаточно гибкое решение в случае полной смены дизайна. Давайте взглянем на альтернативный подход к управлению такими труднодоступными элементами.

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

В начале августа удалось побывать на четвёртой, ежегодной онлайн конференции CSS Summit. Конференция проходила 3 дня подряд с разбитием докладов по следующим направлениям: CSS3 training, Advanced CSS, Preprocessors. Все доклады на английском языке.

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

Записи докладов как со всей конференции, так и за отдельные дни, можно купить на официальном сайте. Промо код, со скидкой 20% — “20SNOOK”.

Под катом пару слов об организации мероприятия, ссылки на презентации и небольшой конспект интересных тезисов и мыслей о веб разработке.

Одна из постоянных проблем верстальщиков адаптивных сайтов — это задача удобно представить обычные таблицы на мобильных устройствах. Вот как выглядят такие таблицы чаще всего:


Не очень удобно, правда? К счастью уже существует несколько хитрых способов решить такую проблему.

Эта статья является коллекцией некоторых мощных каруселей изображений и текстовых материалов, готовых к использованию в ваших Web-проектах. Она включает в себя Agile Carousel, YUI Carousel, JCarousel, iCarousel (jQuery + MooTools) и учебное пособие о том, как реализовать простую карусель наподобие карусели во Flickr, используя Prototype-UI.

Подавляющее большинство сайтов создано с использованием сеточных макетов. Они могут не использовать их в явном виде, но если на сайте присутствует блок с основным контентом, расположенный справа, и боковой блок (сайдбар), расположенный слева, то это и есть простейшая сетка.

Если требуется реализовать более сложные сетки, то люди прибегают к помощи фреймворков. Они считают, что сетки это сверх сложная вещь, которую лучше доверить настоящим знатокам CSS. Уверенность в этом укрепляется тем фактом, что большинство сеточных фреймворков, с которыми они имеют дело, являются очень сложными.

В этой статье я расскажу вам, как я верстаю сеточный макет. Это не так уж и сложно. И даже сделать резиновые сетки не составит большого труда.

meDveD_spb:

Самое печальное, что Win8 уже RTM и такой она и выйдет.

Управляем питанием

Если же отсутствие нормального пуска уже привычно, но не хватает возможности быстро выключить или перезагрузить компьютер, то вам поможет бесплатная программа Switch Off. Ее аскетичный интерфейс, хорошо сочетающийся с вертикальным расположением таскбара, предоставляет абсолютно все опции управления питанием, плюс несколько вариантов установки таймера.

С тех пор, как вышли книги «Adaptive Web Design» Аарона Густафсона и «Responsive Web Design» Итана Маркотта (русское издание называется «Отзывчивый веб-дизайн»), в сообществе веб-дизайнеров и разработчиков ведутся споры о том, чем отличаются эти 2 подхода. Одни считают, что эти 2 понятия являются синонимами, а другие, что это совершенно разные понятия. Но, как известно, истина всегда где-то посередине, поэтому предлагаю вашему вниманию перевод статьи финского веб-дизайнера и разработчика Вильями Салминена (Viljami Salminen) «Adaptive vs. Responsive, what’s the difference?»:

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

В справочнике jquery.page2page.ru появилась документация jQuery UI. Помимо подробного описания каждого плагина, она содержит статьи о фабрике виджетов, с помощью которой можно создавать собственные подобные плагины, правилах темизации (оформления) виджетов UI, собственной системе позиционирования UI, а так же о расширенных анимационных эффектах, доступных при подключении jQuery UI к сайту. Ну и конечно же есть вводная статья с которой можно начать изучение jQuery UI.

Кроме этого, обновлена карта функций, в которую были добавлены методы с двух последних обновлений jQuery, а так же все плагины jQuery UI.

Польза, которую человек приносит обществу, с одной стороны, крайне субъективна, с другой — по ней оценивается зарплата, вклад в историю, авторитет и многие другие «аспекты» жизни человека. Причём, конечность времени жизни заставляет нас за то же время делать больше или делать то же за меньшее время. Переходя от философии к практике, я хочу представить несколько идей, которые я попробовал, и которые помогли мне повысить свою продуктивность.

Данные идеи я применял как веб-разработчик, но некоторые из них будут полезны и в других областях — дизайне, работе с данными и т.д.

Привет уважаемое хабрасообщество, этот пост служит продолжением еще недавно активно обсуждаемой темы о социальных иконках [1] [2]. Мысль, которая пришла ко мне в голову после прочтения этих статей, привела к появлению нового вектора развития этой темы. Кстати о векторе, например бывает так, что дизайн разрабатываемого сайта или приложения имеет свою специфику и интегрировать стандартные иконки социальных сервисов без адаптации не представляется возможным. В таком случае мы берем в руки гугл и принимаемся за поиск нужных логотипов, для того чтобы создать подходящий набор иконок. Ах да я немного отвлекся, продолжим о векторе, чтобы не проделывать такие скучные действия, я собрал воедино несколько популярных иконок в векторе и теперь каждый желающий может сэкономить немного времени воспользовавшись им.

Верстая очередной проект (или ещё только проектируя макетную сетку) многие сталкивались с дилеммой — использовать фиксированную ширину макета или «резиновую» сетку, адаптируемую под размер окна браузера.

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

Фиксированная ширина макетной сетки

Вёрстку загоняют в горизонтальный габарит 960—980 пикселей (чтобы на большинстве устройств в большинстве разрешений всё входило), что при больших горизонтальных размерах окна выглядит как-то зябко — тонкая вертикальная полоса полезного содержимого страницы и огромные бесполезные поля неиспользуемого пространства по бокам.

«Резиновая» макетная сетка по ширине окна

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

Не секрет, что писать CSS для многих стандартных кнопок, макетов, etc. бывает весьма лениво. Ниже представлена подборка генераторов CSS (и не только), которая, возможно, в некоторых случаях сможет упростить кому-то жизнь. Многими генераторами можно успешно пользоваться даже без глубоких познаний CSS.

(Осторожно! Много картинок)

Итак здравствуйте!

На данный момент много (больше 30) наших клиентов заказали себе сайт на популярной CMS WordPress, и остались на поддержке.
Это значит порядка 30 сайтов к которым надо иметь пароли, проверять на наличие обновлений, устанавливать нужные плагины, наполнять материалом и делать хорошо клиенту и его сайту.
И совсем недавно у меня возник вопрос, а что если все это упростить? Собрать все в одном месте?

Сказано — сделано. Искал — нашел.

Зайдя на домашнюю страницу браузера Firefox about:home (автономная, в самом браузере), обнаружил там неплохую реализацию пылающего огня, сделанную на не очень тяжёлых анимированных спрайтах, под лицензией LGPL (по крайней мере, в стартовом about-home-Fx.js). Не каждый день встретишь качественный огонь на скриптах в браузере. При ближайшем рассмотрении оказалось, что это даже не скрипты, а целиком анимированный CSS. Небольшой скрипт используется только для старта и останова. Используя эту идею и формат, дизайнеры смогут создать свою реализацию огня, дыма или текущей воды.

Поиск по ключевым словам из кода в интернете результата не дал, поэтому, как и с машиной Тьюринга (Гитхаб), тут же возникло желание освободить скрипт и стили от оков случайности и таинственности. То есть, положить его в читаемом и рабочем виде в открытый стабильный источник. Иначе, закончится Олимпиада — и будут все шансы исчезнуть ему из поля зрения. И вот результат:
github.com/spmbt/flame-animate-css-mozilla

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

Для затравки начнем с простого.

В очередной раз открыв код коллег и ужаснувшись, я решил написать эту статью. Надеюсь для кого-нибудь это будет полезным, заодно и мне будет проще новичкам объяснять что у них в коде не так, просто кинув ссылку на эту статью.
Безусловно количество таких вещей очень и очень велико, поэтому в статье ограничусь лишь некоторыми.

Введение

На своем сайте на php для авторизации пользователей я в последнее время пользовался сервисом Loginza. Все было очень круто и удобно, но в голове начала зарождаться идея отказа от этого замечательного сервиса и вот почему:

1. Авторизация пользователей в случае закрытия Loginza или отказа от нее — в этом случае мы потеряем пользователей, в привязанных профилях которых не указан email;
2. Дополнительная информация, например, ВКонтакте умеет отдавать фото пользователя в нескольких видах, в том числе квадратный аватар. С Логинзой получить эти данные не представляется возможным, сервис сам решает какие данные запрашивать и какие отдавать;
3. С момента продажи Яндексу Логинза начала умирать: на запросы пользователей никто не отвечает, сервис не развивается, а находится в том виде, в котором был 1-2 года назад.

Встал вопрос замены и использовать альтернативные сервисы желания уже не возникало — никто не представлял возможности «общаться» с соц. сетью напрямую, а расширенные поля профиля обычно включались в платные услуги. Хотелось автономного решения с возможностью гибкой настройки запрашиваемых полей и в итоге я остановился на php библиотеке HybridAuth.

Доброго всем времени суток!

Те, кому часто приходится поднимать сайты на Drupal, имеют в загашнике постоянный набор модулей и тем, которые так или иначе могут использоваться на поднимаемом ресурсе.
При отсутствии данного набора приходится вспоминать и скачивать модули для воплощения на сайте того или иного функционала.
Поскольку актуальной на данный момент версией является седьмая, о ней и пойдёт речь.

_{Предисловие переводчика.  «Костыль» PIE, позволяющий легко и уверенно обеспечить поддержку целого ряда свойств CSS3 во браузерах IE6, IE7 и IE8 (которые в этом смысле без «костыля» оказываются «хромыми» до убожества), давно заслужил горячую, страстную приязнь со стороны многих передовых сайтооформителей, и в этом качестве не раз на Хабрахабре упоминался (последний раз — 13 января 2011 г.). Я решил перевести нижеследующее, пускай и не новое, объявление (выход PIE 1.0 beta 3 состоялся 6 декабря 2010 г.) для того, чтобы в явном виде лишний раз донести до всех заинтересованных читателей весть о том, что в этот год PIE вступает обновлённым и улучшенным. Всем тем, кто впервые начал использовать PIE прошлой осенью или летом, настало время крепко призадуматься, во-первых, об апгрейде PIE (во имя ускорения работы сайтов), а во-вторых, об освоении новых, декабрьских свойств и возможностей PIE.}

Она подготавливалась долгое время, но вот третья бета PIE 1.0 наконец вышла! Этот выпуск содержит множество изменений; вот некоторые из крупных улучшений в нём:

• Скорость! — Крупнейшим и легкозаметнейшим улучшением в этом выпуске стала скорость. По итогам обширного профилирования были найдены наиболее медленные участки исполнения кода PIE, и многие из них подверглись оптимизации. Результаты ошеломляют: скорость PIE выросла до четырёх раз в сравнении со второй бетою, особенно заметно — в IE8. И это принесёт ускорение обработки страниц и вам, и читателям ваших сайтов!
   
• Ленивая инициализация — Даже с учётом всех улучшений скорости, если ваша страница весьма длинна, она может содержать сотни PIEфицированных элементов, которые суммарно приведут к заметной задержке. Однако есть шанс, что лишь немногие из них видны в окне просмотра изначально (после загрузки страницы), чего же тогда тратить время на обработку остальных элементов, прямо сейчас не видимых? Теперь вы можете задавать специальное свойство -pie-lazy-init: true в CSS, и тем самым откладывать инициализацию всех PIEфицированных элементов за пределами видимой области загруженной страницы. Они будут проинициализированы и отображены после того, как читатель до них допрокручивает страницу.
   
• PIE.js: отдельная версия на джаваскрипте — Теперь есть два способа использования PIE: традиционный (PIE.htc и behavior) и новый (отдельный джаваскриптовый файл PIE.js). Хотя указание файла .htc и свойства behavior останется рекомендуемым подходом, JS-версия позволяет употреблять PIE в некоторых таких ситуациях, в которых behavior не в состоянии сработать. Поглядите в документации по PIE.js подробности о том, когда и как вы можете пожелать прибегнуть к JS-версии.
   
• Работает с табличными элементами — Теперь применение PIE к элементам <table>, <th> и <td> приводит к корректной обработке и впредь не грозит бесконечным циклом.
   
• Работает с изображениями — Теперь вы можете использовать PIE для закругления уголков элементов <img>.
   
• -pie-png-fix — Теперь вы можете использовать PIE в качестве общего исправления альфа-прозрачности PNG для IE6, используя новое специальное CSS-свойство -pie-png-fix: true. Подробности изложены в документации по -pie-png-fix. Эту функциональность обеспечил Felix Gnass.
   
• Отключено в IE9 — Так как IE9 самостоятельно поддерживает множество тех же свойств и значений CSS3, что и PIE, и так как ещё не ясно, что IE9 будет поддерживать в окончательной версии, то на время PIE будет отключаться при работе в IE9; это временное решение будет пересмотрено по мере дальнейшего развития событий.
   
• position:fixed — Теперь PIE располагает свои элементы отображения корректно, когда применяется к элементам со свойством position:fixed (это никак не касается IE6, поскольку IE6 не поддерживает свойство position:fixed самостоятельно).
   
• Печать — Теперь PIE самостоятельно устраняет все свои элементы во время печати страницы. Помимо исключения целого ряда проблем с отображением, такое самоустранение также не пренебрегает пользовательскими настройками о непечатании фонов и обеспечивает экономию чернил.
   
• Множество других исправлений и улучшений — см. логи правок кода.

Скачайте PIE 1.0 beta 3 прямо сейчас!