• Большие изображения на сайте для пользователей с Retina Display — retina.js

    Новый iPad уже появился в магазинах, не говоря уже про братьев iPhone 4S и iPhone 4, которыми многие давно и успешно пользуются, а вот сайтов, учитывающих возможности отображения дисплеями этих устройств картинок в высоком разрешении, пока не так много. Но есть простой вариант, как сделать свой сайт соответственно тренду «отзывчивым», или на их манер: responsive.

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

    И вот пришёл большой iPad!
    Счастливая девочка Карли держит ГрушеПад

    Show me your boobs
    • +16
    • 1,5k
    • 5
  • Браузерный зоопарк

      image

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

      Hello world! Меня зовут Слава, я работаю верстальщиком в агентстве Coalla. Эта статья не о разжигании холивара и рассуждения о том, какой браузер лучше, как бы всем легко жилось без Internet Explorer’a, а мой недавний полезный опыт по установке всех необходимых браузеров и их версий на одну операционную систему, а именно на Microsoft Windows 7 Ultimate x64.
      Читать дальше →
    • Собираем среду разработки сайтов на Маке

        Хотелось бы дать небольшую наводку маководам, как установить себе окружение для локальной разработки сайтов. В данном примере рассматривается установка с MacPorts набора Apache+PHP+MySQL+phpMyAdmin. Сразу скажу, что я данный топик не является детальным и отлаженным руководством по установке и у кого-то что-то может не получиться, поэтому сделаю ссылку на готовые и отработанные решения — продукт MAMP и руководство по установке, на которое ссылается php.net.
        Среда в которой выполнялась установка: Mac Mini, OS X 10.4.
        Итак, ставим среду разработки на Мак:
        1. Устанавливаем MacPorts.
        2. Устанавливаем Apache.
          Вводим в терминале:
          sudo port install apache2
          Пароль, который спросят — ваш маковский пароль
          Первоначально я хотел поставить апач 1.3, но связать его с php5 с ходу не получилось, поэтому поставил второй.
          Запускаем:
          sudo /opt/local/apache2/bin/apachectl start
          Проверка: смотрим в браузере localhost
        3. Устанавливаем PHP с поддержкой MySQL:
          sudo port install php5 +mysql5
          sudo cp /opt/local/etc/php.ini-dist /opt/local/etc/php.ini
        4. Добавляем модуль PHP в Apache
          sudo /opt/local/apache2/bin/apxs -a -e -n «php5» /opt/local/apache2/modules/libphp5.so
          Вставляем содержание /apache2/conf/extras-conf/mod_php.conf в /apache2/conf/httpd.conf ручками или инклудом в том же httpd.conf.
          Добавляем index.php в индексные файлы.
          Перезапускаем апач:
          sudo /opt/local/apache2/bin/apachectl restart
          Проверка: создаём test.php в /opt/local/apache2/htdocs/ с содержанием <?php phpinfo() ?> и проверяем его по адресу localhost/test.php
        5. Устанавливаем MySQL:
          sudo port install mysql5 +server
          Даём права пользователю mysql на /opt/local/var/db/ и вложения в неё. Я делал через Finder, наверное можно и через терминал.
          Устанавливаем БД:
          sudo /opt/local/bin/mysql_install_db5 -user root
          Запусаем демона:
          sudo /opt/local/libexec/mysqld -u root
        6. Устанавливаем phpmyadmin:
          sudo port install phpmyadmin
          Заходим на localhost/pma/setup/index.php
          Устанавливаем новый сервер localhost без пароля
          Заходим в phpmyadmin под root


        К сожалению автоматический запуск MySQL и Apache, как это обещал MacPorts у меня не заработал, поэтому запускаю ручками:
        $ sudo /opt/local/apache2/bin/apachectl start
        $ sudo /opt/local/libexec/mysqld -u root
        Данная проблема с MacPorts уже описывалась на Хабре и были найдены какие-то решения.
      • Простая техника Parallax Scrolling

        • Tutorial
        Доброго времени суток уважаемые хабраюзеры. На сегодняшний день Parallax Scrolling является неким трендом и я хочу рассказать о простой реализации данного эффекта. Техника основана на скорости изменения свойства background-position. Эффект Parallax Scrolling заключается в том, что фон движется медленнее чем содержимое

        HTML разметка


        Создаем два блока с атрибутами "data-type" и "data-speed":
        <section id="home" data-type="background" data-speed="10" class="pages">
                 <article>Простая техника Parallax Scrolling</article>
        </section>
        <section id="about" data-type="background" data-speed="10" class="pages">
                 <article>Простая техника Parallax Scrolling</article>
        </section>
        

        Для управления значениями скорости и позиции в JavaScript, data-type используются как ключевые атрибуты при передачи необходимых параметров.

        Читать дальше →
      • Знакомство с Parallax Scrolling

        • Перевод
        Любой, кто играл или наблюдал за игрой друзей, либо в принципе видел игры, которые были выпущены в 80-90-х годах, должны быть знакомы с техникой параллакс-скроллинга.

        Вспомните такие игры, как Mario Bros, Streets of Rage, Mortal Kombat, Turtles in Time или оригинальную игру Moon Patrol. В этих играх техника параллакса наблюдается в тот момент, когда несколько фоновых слоев с различными текстурами двигаются с разной скоростью, что создает эффект трехмерного пространства.

        Почему я начал говорить о ретро-играх в статье о веб-разработке? Самым простым ответом мог бы быть «потому что они клевые», но нет. Параллакс-скроллинг является классным дизайнерским концептом, который прокладывает свой путь в мир веб-дизайна. Nike были одними из первых, кто использовал эту технику с большим успехом, когда они наняли маркетинговых гигантов Weiden and Kennedy для разработки их оригинального сайта Nike Better World. Сайт Nike Better World с того времени был обновлен и заменен на новый, однако есть другой сайт, довольно похожий на то, как выглядел первый параллакс-дизайн от Nike — сайт о спортивных напитках Activate.


        Читать дальше →
      • Адаптивные email'ы

        • Tutorial
        image


        Сегодня пользователи все чаще читают электронные письма на мобильных устройствах. Каково бывает просмотр большого HTML-email'а на телефоне? Приходится много масштабировать и скроллить, в целом читать становится очень неудобно. Поэтому и письма электронной почты следует делать адаптивными.
        Читать дальше →
      • 20 вопросов про веб-шрифты


          Привет, Хабр!

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

          Много текста и картинок
        • Закрепляем jQuery — 25 отличных советов

          • Перевод
          Перевод отличной статейки. Думаю, будет полезна как новичкам, которые только приступили к использованию jQuery, так и тем, кто уже какое-то время с ним работает. А кого-то, возможно, заставит глянуть эту чудесную библиотечку. Многие советы имеют отношение не только к jQuery, но и к JavaScript в целом. Лично для меня была весьма и весьма познавательной, посему и захотелось донести это «до масс». Перевод не дословный, но передающий смысл и максимально адаптированный к русскому языку.

          Далее все написано от имени автора оригинальной статьи.

          Введение


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

          Я не эксперт в jQuery. И даже не претендую, поэтому, если встретите ошибки, смело поправляйте меня и вносите предложения по улучшению (поправлять и присылать поправки нужно автору статьи, а не перевода — зам. пер.).

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

          Содержание


          1. Загружайте фреймворк с Google Code
          2. Используйте «шпаргалку» (cheat sheet)
          3. Соединяйте все ваши скрипты и уменьшайте размер файла
          4. Используйте возможности Firebug для ведения логов
          5. Минимизируйте операции выборки в пользу кэширования
          6. Сводите манипуляции с DOM-деревом к минимуму
          7. Оборачивайте все в единый элемент, когда речь идет о любой вставке в DOM
          8. Используйте «id» вместо классов, где это возможно
          9. Задайте контекст своим селекторам
          10. Используйте последовательности вызовов методов с умом
          11. Научитесь правильно использовать анимацию
          12. Научитесь назначать и делегировать события
          13. Используйте классы для сохранения состояния
          14. Еще лучше — используйте встроенный в jQuery метод data() для сохранения состояния
          15. Пишите собственные селекторы
          16. Подготавливайте HTML и модифицируйте его, когда страница загружена
          17. Используйте «отложенную загрузку» (lazy loading) для определенного контента для выигрыша в общей скорости и преимуществ для SEO
          18. Используйте служебные функции jQuery
          19. Используйте «noconflict» для переименования глобального объекта «jquery», когда используете его с другими фреймворками
          20. Как узнать что картинки загружены?
          21. Всегда используйте последнюю версию
          22. Как проверить, что элемент существует?
          23. Добавляйте класс «JS» в элемент «html»
          24. Возвращайте «false» для отмены поведения по-умолчанию
          25. Короткая запись для события готовности документа


          Rock'n'Roll!
        • Всплывающая фиксированная навигация jQuery

          Всплывающая фиксированная навигация



          Я хотел бы показать вам навигационную панель, которая появляется при прокрутке содержания страницы в низ, и остается на своем месте.
          Буду использовать для реализации jQuery, чтобы была совместимость в том числе IE.
          Читать дальше →
          • –11
          • 2,8k
          • 9
        • tFormer.js — велосипед для валидации форм

            tFormer.js — empower your HTML forms



            Предисловие:


            Вам приходилось верстать формы? Приходилось писать скрипт для валидации этих форм на клиенте? Доводилось ли использовать уже существующие плагины/надстройки для валидации форм?
            Мне приходилось, но я не был на 100% удовлетворен ни от подхода решения задачи в лоб (собственный скрипт валидации для каждого проекта под его формы), ни от того, как работают существующие сторонние плагины.

            Проблема:


            Основными проблемами собственных скриптов и плагинов всегда были — гибкость, удобство и простота.
            Большое количество data-attributes, необходимых для конфигурации скриптов (как это в Parsley.js) делают и код менее читабельным, и никогда не помнишь, как все они пишутся. Не просто…
            Не все плагины хорошо подходили под желаемые HTML-формы, а постоянно писать свои скрипты под разные формы не всегда удобно и разумно.

            Задача:


            Создать нечто гибкое, удобно настраиваемое, полностью подконтрольное, с интуитивным синтаксисом и чтоб валидировало.

            Решение:


            Решение вылилось в небольшой опенсорсный плагин, который получил название tFormer.js.
            Подробности
          • Дайджест интересных новостей и материалов из мира айти за последнюю неделю №50 (23 — 29 марта 2013)

              Предлагаем вашему вниманию очередную подборку с ссылками на новости, интересные материалы и полезные ресурсы.


              Читать дальше →
            • Дайджест интересных новостей и материалов из мира айти за последнюю неделю №47 (2 — 8 марта 2013)

                Предлагаем вашему вниманию очередную подборку с ссылками на новости, интересные материалы и полезные ресурсы.


                Читать дальше →
                • +28
                • 25,9k
                • 6
              • Полезные техники HTML, CSS и JavaScript

                Техника – это способ справиться с заданием, и у нас, разработчиков и дизайнеров фронтэнда, этих способов бывает достаточно много. При это, будучи погруженными в рутинную работу, мы порой не всегда замечаем как стремительно меняется окружающая нас сфера. В период с 2002 по 2010 годы сообщество фронтэнд-разработчиков буквально покрывалось язвами избыточного кода и ресурсов, от которых страдали и работа сайтов, и удобство их использования. Чтобы с этим справиться, мы придумали уйму хаков, трюков и уловок под кодовым названием «техника». Мы по-прежнему продолжаем выполнять поставленные перед нами задания, просто используем не самые эффективные способы.



                Оборачиваясь назад, отметим, что в последние несколько лет установились новые, лучшие, стандарты и способы их применения, позволяя нам создавать более продвинутые «техники». Этот новый мир, открытый перед нами, называется «modern web». Web 2.0, которым восхищались в свое время, сегодня для нас стал запутанным и застойным. С одной стороны нет сомнений в том, что подобная судьба постигнет и то, что мы называем «modern web». С другой — пока что мы можем использовать этот термин и злоупотреблять им сколько угодно, пока понимаем, что он означает.

                

В 2010 появился стандарт HTML5, обеспечивающий совершенно новую, полустандартизованную веб-среду. Такие браузеры, как Opera, Firefox, Chrome и Safari приняли нововведения, и их разработчики вышли за пределы реализации стандартов и изучения интерфейса программирования приложений. Чтобы представить себе, насколько автономны эти браузеры, можно ознакомиться с отличной наглядной демонстрацией поддержки HTML5 на www.html5readiness.com.
                Читать дальше →
              • Кроссбраузерная кастомизация системного скроллбара



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

                  Под катом можно узнать, как в ближайшее время будет работать скролл в 2ГИС Онлайн.
                  Подробности
                • Дайджест интересных новостей и материалов из мира айти за последнюю неделю №44 (9 — 15 февраля 2013)

                    Предлагаем вашему вниманию очередную подборку с ссылками на новости, интересные материалы и полезные ресурсы.


                    Читать дальше →
                    • +41
                    • 27,3k
                    • 7
                  • Как на самом деле работает mod_rewrite. Пособие для продолжающих

                      image
                      Эта статья выросла из идеи продвинутого обучения наших сотрудников технической поддержки работе с mod_rewrite. Практика показала, что после изучения имеющихся в большом количестве учебников на русском языке саппортам хорошо дается решение шаблонных задач, но вот самостоятельное составление правил происходит методом проб и большого количества ошибок. Проблема заключается в том, что для хорошего понимания работы mod_rewrite требуется изучение оригинальной англоязычной документации, после чего — либо дополнительные разъяснения, либо часы экспериментов с RewriteLog.

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

                      Я предполагаю, что читатель уже знаком с тем, что такое mod_rewrite, и не буду описывать его основы, которые легко найти в интернете. Также нужно отметить, что в статье освещается работа mod_rewrite при использовании его директив в файле .htaccess. Отличия при работе в контексте <VirtualHost> изложены в конце статьи.

                      Итак, вы изучили mod_rewrite, составили несколько RewriteRule и успели столкнуться с бесконечными перенаправлениями, со случаем, когда правило почему-то не ловит ваш запрос, а также с непредсказуемой работой группы правил, когда последующее правило неожиданно изменяет запрос, кропотливо подготовленный правилами предыдущими.

                      Почему так происходит?
                      Читать дальше →
                    • Дайджест интересных новостей и материалов из мира айти за последнюю неделю №43 (2 — 8 февраля 2013)

                        Предлагаем вашему вниманию очередную подборку с ссылками на новости, интересные материалы и полезные ресурсы.


                        Читать дальше →
                        • +26
                        • 24,7k
                        • 8
                      • CSS3-генераторы. Лучшее









                          Доброго времени суток! Сразу объяснюсь по поводу оформления поста: однажды, наткнувшись на статью о CSS-генераторах, меня не сильно порадовало безмерное количество информации и навигационных элементов в представленных генераторах, и еще больше — их пользовательский интерфейс! Возмутило то, что инструменты для работы со стилями — сами не выдержаны в рамках возможностей, которые они представляют… как так?!

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

                          Надеюсь, для многих ноу-хау станет хорошим помощником в процессе веб-разработки.
                          Читать дальше →