Sign up
December 1, 2010 at 08:58 AM

Скринкасты о том, как резать и натягивать

    Чтобы было понятно о чем речь, прикладываю 3 скринкаста, второй и третий под катом.
    1. Знакомство с макетом #1
    2. Режем шапку макета #1
    3. Режем футер макета #1
    4. Режем сайдбар макета #1
    5. Режем область контента макета #1
    6. Сверяем верстку с макетом #1
    7. Знакомство с макетом #2
    8. Режем шапку макета #2
    9. Режем футер макета #2
    10. Режем сайдбар макета #2
    11. Режем область контента макета #2
    12. Сверяем верстку с макетом #2
    13. Кроссбраузерность
    14. Устанавливаем систему управления MODx на хостинг
    15. Натягиваем макет #2 на MODx
    16. Переводим действующий сайт на html5
    Tags:
    Hubs:
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 107

      +8
      Качественные видео — приятно слушать и смотреть.
        0
        Класс! А что это за плагин, с помощью которого так быстро рыба пишется?
        Он только к emacs подключается?
        +2
        Мне в этом всем особенно интересно было ваше использование emacs. Впечатлило.
          +1
          Как виртуозно Вы в emacs работаете — прям захотелось освоить! Маастер мастер.

          P.S. Color scheme тоже приятная
            +3
            Мне одному показалось, что окончания предложений голос девушки говорит тише чем всё остальное? наверно стоит микрофон поставить подальше, а говорить громче.
              +5
              придираетесь
                +1
                Возможно, но слушая её мне приходилось увеличивать громкость на концах предложений. Они явно выбиваются из общего уровня громкости.

                Всё остальное мне понравилось.
                0
                А мне показалось, что она в некоторых местах сдерживается, чтобы не рассмеяться.
                  0
                  Проще будет после записи воспользоваться компрессором для голоса. И никому ничего двигать не надо будет.
                  0
                  почему png-24? png-8 подойдет
                    +1
                    поперематывал рандомно, вроде, все ок, но есть недочеты, например, зачем разделитель в футере резать из картинки? можно сделать бордером
                      0
                      кроссбраузерность (точнее чтобы выглядело везде одинаково) бордером? надежнее картинкой. Она не сильно много весит по сравнению с текстом описания этого бордера.
                        +1
                        в чем проблема кроссбраузерности бордера? :)
                          +1
                          В том что border dotted выглядит по разному в IE и Хроме к примеру.
                            0
                            вы, конечно, простите, но схуяли dotted?
                              –1
                              Я привел пример.

                              А продемонстрируйте код бордера из скринкаста, чтобы оценить его внешний вид в различных браузерах.
                                +1
                                вы смеётесь? cssdesk.com/srReg
                                  –1
                                  Прежде чем матом писать, посмотрите скринкаст внимательнее. Там не сплошная линия.
                                    0
                                    вы утомили, честное слово
                                      0
                                      Я про меню в папке вообще то говорю. А не про низ страницы. )
                                        0
                                        шапке*
                                          +1
                                          очень утомили
                                          > зачем разделитель в футере резать из картинки
                              0
                              лечится комбинацией двух zoom.
                      +3
                      Захотелось поставить Ubuntu, emacs и постигать дао верстки ;)
                        +2
                        Для этого вам необязательно ставить Ubuntu и emacs. Я более чем уверен, вы сможете постигать дао верстки и в той операционной системе, в которой работаете ;)
                          0
                          Я никогда не видел emacs. Поэтому подумал что он только под Linux.
                        +4
                        А где фотка обладательницы этого сказочного голоса???
                          +2
                          голос и правда чудесен
                            –17
                            Какая тебе разница? Дрочи на эту, к примеру bimg.mynet.com/S/Sasha-Grey/8.jpg
                            Как же заебали инернет-дрочеры.
                              +7
                              Я старше Вас минимум лет на 10, поэтому не надо мне рассказывать, что делать, и я не скажу Вам, куда идти. Если Вы занимаетесь самоудовлетворением, а Вы им точно занимаетесь, судя по комментарию и сквозящему хроническому неудовлетворению, то не надо проецировать свои собственные проблемы на окружающих, не надо обобщать — это дурной тон.

                              Пройдут всё те же 10-15 лет и Вы поймёте, хотя не исключено, что Вам этого не дано, что в человеке, а особенно в Женщине, может быть прекрасен и голос, а не только «сиськи». Поэтому и вопрос был риторический, абсолютно не требующий ответа. Но Вам и этого не понять.
                                –15
                                Какая тебе разница, как она выглядит? Мало, на кого любоваться? А если она страшная, как атомная война, то сразу станет хуже ее верстка? Я этого не пойму — пристрастия посмотреть на фото женщины. Если она некрасивая, то ей будет еще обиднее, что она не сможет показать себя, ты ее этим только унизишь. И почему у мужиков не просишь фотки?
                                И какая мне разница, сколько тебе лет? Маньяков не двадцатилетних ловят, а постарше, лет сорока.
                                  +1
                                  Прочтите предпоследнее предложение моего предыдущего комментария. Желательного читать его до момента понимания-просветления.

                                  Ну а для тех, кто в глухом танке, всё же объясню: мой первый пост — это был завуалированный комплимент обладательнице замечательного, по моему мнению, голоса. Не думал, что столь банальные вещи необходимо разъяснять.
                                    –15
                                    Ну ты и лизало.
                                      +3
                                      Ну не всем же быть невоспитанным, малограмотным хамлом. Должны же существовать в этом мире и интеллигентные, воспитанные люди, способные искренне восхититься чем-либо/кем-любо. В данном случае голосом девушки.

                                      2 all: прощу прощения… я уже перестал кормить тролля.
                                        +5
                                        Странно, каждое ваше сообщение должно начинаться с «Какая тебе разница».
                                          –5
                                          Какая тебе разница?
                                          За ошибку выше извиняюсь.
                                          n0ne.habrahabr.ru/ — бггг, интеллигент…
                                    0
                                    Простите, а чем вас обидели сиськи, что вы их аж в кавычки взяли?
                                  • UFO just landed and posted this here
                                  0
                                  Спасибо! А html, css будут даны в текстовом виде?
                                    –1
                                    Подскажите, где взять такую же color scheme для notepad++? ) Уж больно симпотична
                                      0
                                      я её из gedit взял, там она называется Oblivion
                                        0
                                        прошу прощения, а как вы ее экспортировали из gedit'а в npp? :)
                                      0
                                      да впечатлил emacs :) точнее человек который им так владеет… и верстка хорошая и понятная :-) вот бы так научится :))))
                                        +1
                                        Отличное видео узнал много способов как ускорить работу
                                        Хочется пораньше получить описание инструментов
                                          0
                                          Да-да, ждать семнадцатой части как-то долго :)
                                          0
                                          Сейчас попробуй настройть notepad++ под такую же работу.
                                            +2
                                            А почему поля в форме авторизации обёрнуты в label?
                                                0
                                                Спасибо, но всё равно не понимаю, зачем. Там вместо label'а описание поля помещается в его value, соответственно необходимость в подписи пропадает.
                                                Или это с расчётом на будущие возможные изменения?
                                              +2
                                              очень приятный голос у девушки, заслушался
                                                +1
                                                И для рекламы хорошо и для людей полезно, особенно для новичков, хорошо преподнесено.
                                                  –1
                                                  modx? Почему не php Nuke сразу?
                                                    +2
                                                    знаете что то лучше?
                                                    По гибкости и возможностям одна из лучших цмс.
                                                    Проблемы со скоростью легко решить прямыми руками
                                                      +2
                                                      Я бы предложил Drupal, к примеру :)
                                                      Его очень легко и приятно темизировать\переодевать.
                                                      Всё это имхо, конечно же…
                                                        0
                                                        Я не к тому что нет других Хороших CMS, а к тому что ее сравнивают мягко говоря не с лучшей cms по современным стандартом.
                                                    +1
                                                    У девушки голос приятный :) Расслабляет :)
                                                      0
                                                      Здорово, спасибо. Буду ждать продолжения.

                                                      И можно вопрос не по теме?
                                                      Сколько примерно может стоить верстка этого макета? Просто есть проблема ценообразования, хотелось бы её решить)
                                                        0
                                                        у всех разные способы подсчета, стоимость часа своего времени умножайте на количество часов которые вы затратите на вёрстку этого макета
                                                        0
                                                        Ждать 12 недель нет сил, скажите, пожалуйста, а какой инструментарий для записи и постпродакшена такого скринкаста используете?
                                                          +5
                                                          В 17 скринкасте не будет ничего про создание скринкастов, всё-таки вся серия не о том.
                                                          Для записи использовался bash скриптик в основе которого ffmpeg -f x11grab. Нужна была запись mpeg2 пока не кончится место. Все что есть либо падает через час, не синхронизирует аудио с видео дорожкой или не умеет mpeg2 на выходе давать. Исходники скринкастов в среднем у меня 2-3 часа, а вся папка для каждого скринкаста ~15гб.
                                                          Дальше Avidemux для вырезания всего лишнего и Openshot для соединения всех дорожек вместе. Заставку делал в Ease, да это обычная штука для презентации, но даже в openshot только примитивная анимация которой не хватает. Девушку писал отдельно с помощью Audacity
                                                          Хотел попозже отдельную статью написать, возможно сэкономлю кому-то время, кто решится делать длинные скринкасты под линуксом.
                                                          +4
                                                          Немного маниакально-пошловатый заголовок. Или просто я хочу его таким видеть.
                                                            0
                                                            Photoshop в Ubuntu — как? Пытался запустить Photosohop CS3 в Ubuntu 10.04 — ни чего не получилось.
                                                              0
                                                              Photoshop
                                                                0
                                                                CS1 работала всегда без единой проблемы, ей и пользуюсь
                                                                  0
                                                                  CS5 тоже отлично запускается ;) (wine 1.3.8)
                                                                    0
                                                                    достаточно wine 1.2.1
                                                                    у меня иногда только с текстом проблемы, перезапуск помогает.
                                                                    0
                                                                    CS4 Portable под вайном — вообще без проблем. А вот CS3 у меня почему-то подтормаживал изрядно… Пятый не пробовала.
                                                                    +2
                                                                    для избежания лишних телодвижений, при большом количестве графических элементов, желательно пользоваться инструментом Photoshop — Slice tool (при этом, конечно, не избежать создания дополнительных файлов-фонов для поведения hover, но количество кликов мышью уменьшится по-любому).
                                                                      0
                                                                      несколько критических замечаний все же :)
                                                                      Emacs хорошо сконфигурирован для верстки это +, а вот лишние телодвижения с мышкой по поводу скопировать выделенное содержимое выглядит странно при таком уровне владения emacs, да и переключение между активными приложениями мышкой тоже как то не очень.
                                                                        0
                                                                        Для наглядности? Скринкаст же.
                                                                          0
                                                                          Возможно это сделано ради наглядности, да и девушке не приходится озвучивать хитрую комбинацию клавиш, в результате которой всё так резко изменилось на экране. ИМХО
                                                                          0
                                                                          Спасибо огромное. Как раз то что нужно сейчас!
                                                                            +1
                                                                            неплохие скринкасты, голос девушки было слышать неожиданно))
                                                                            +
                                                                            поскольку церковь emacs открывает дверь не каждому, для развития mad skillz рекомендую попробовать TextMate под мак или его клон www.e-texteditor.com/ под винду…

                                                                              0
                                                                              Отличная статья. Теперь немного иначе начну смотреть на подход к верстке сайта + очень было бы интересно посмотреть про переход на HTML5.
                                                                                +1
                                                                                Не режу сайт на кусочки. Требую от дизайнера PSDшник =) и как обычно его дают.

                                                                                Но перед заданием, я всегда предупреждаю, что нужен именно PSD без клееных слоев
                                                                                  0
                                                                                  А как делается группировка окн? Найти не могу…
                                                                                    +1
                                                                                    с помощью Compiz
                                                                                      0
                                                                                      Прочитал, все должно работать, но не работает.
                                                                                      Моя система Ubuntu 9.10 — Karmic Koala.
                                                                                      У меня установлены следующие плагины compiz (из репозитария):
                                                                                      compiz-fusion-plugins-extra
                                                                                        0
                                                                                        Сори не дописал (ctrl+enter подвел)…
                                                                                        compiz-fusion-plugins-extra
                                                                                        compiz-fusion-plugins-main

                                                                                        Действую согласно документации:
                                                                                        Выбираю окно жму <super (win)> + s (ничего не происходит)
                                                                                        Выбираю второе окно жму <super (win)> + s (ничего не происходит)
                                                                                        Жму <super (win)> + g (ничего не происходит)

                                                                                        Пробовал всяко разно — результат один. Компиз включен на максимум (окна плющит при перетаскивании).
                                                                                          0
                                                                                          в CompizConfig Settings Manager включен Group?
                                                                                            0
                                                                                            Спасибо теперь работает!
                                                                                    +1
                                                                                    Спасибо, было очень интересно! Сам не верстаю, я больше по архитектурам, но когда кто-то что-то создаёт, это всегда интересно. =) И да, голос у девушки очень приятный. Жду продолжения, жаль, что только раз в неделю.
                                                                                      0
                                                                                      Заведите твиттер чтобы проще было следить за обновлениями, ну и фидбек через него получать можно.
                                                                                        0
                                                                                        Эх, не было таких «туториалов», когда вёрстать учился.

                                                                                        А emacs впечатлил, попробовать что ли для разработки
                                                                                          0
                                                                                          если не секрет, чем продиктован выбор префиксов цсс-классов?
                                                                                          все эти b- g- l-?
                                                                                          0
                                                                                          Хочу, чтобы мне таким голосом читали сказки на ночь :)
                                                                                            –1
                                                                                            После обнуления в css через * отпало желание что либо смотреть дальше
                                                                                              0
                                                                                              а вы браузер все время перегружаете или у вас выставлено это автоматом? если да, то с помощью какого аддона(это ж вроде FF)?
                                                                                                0
                                                                                                MozRepl
                                                                                                  0
                                                                                                  скажите, а вы mozrepl ‘main.css’ по крону выставили или есть еще какие то ухищрения?
                                                                                                    0
                                                                                                    изначально он умеет сразу в реалтайме добавлять содержимое в браузер, т.е. вы пишите код, каждый символ и тег сразу появляется в браузере, но из-за этого есть некоторые проблемы. У меня посылается «обновление страницы» браузеру после сохранения файла и все.
                                                                                                    (defun auto-reload-firefox-on-after-save-hook ()         
          (add-hook 'after-save-hook
                       '(lambda ()
                          (interactive)
                          (comint-send-string (inferior-moz-process)
                                              "setTimeout(BrowserReload(), \"1000\");"))
                       'append 'local)) ; buffer-local

(add-hook 'nxhtml-mode-hook 'auto-reload-firefox-on-after-save-hook)
(add-hook 'css-mode-hook 'auto-reload-firefox-on-after-save-hook)
                                                                                                0
                                                                                                Очень классно, большое спасибо!

                                                                                                А голос, конечно же, надо было обработать получше компрессором, осбенно де-эссером.
                                                                                                  0
                                                                                                  Кстати, модульную вёрстку не практикуете?
                                                                                                    0
                                                                                                    нет, пару раз пробовал не пошло
                                                                                                    0
                                                                                                    Скажите, а в чём соль использования в формах элемента вместо?
                                                                                                      0
                                                                                                      Ресет очень брутальный, учитывая то, что вы используете АНБ.
                                                                                                        0
                                                                                                        — фотошоп без хоткеев это, конечно, зло в чистом виде. Куча времени тратится ни на что. Да и скилы автора в целом в фотошопе очень слабы. Например, чтобы развернуть скруглённую часть активного пункта в навигации в шапке, достаточно выделить это место, предварительно выбрав этот слой, нажать Ctrl+J (из стандартного набора хоткеев) и в меню Edit > Transformation сделать поворот на нужное кол-во градусов, либо инвертировать горизонтально. Ну а учитывая несложный хоткей на последнюю операцию всё преобразование левого края в правый занимает примерно 3-5 секунд. И не надо никаких новых документов создавать.
                                                                                                        — почему стили набираются без помощи ZC?
                                                                                                        0
                                                                                                        а чем вы делаете прозрачность в браузере, когда накладываете его на макет?
                                                                                                          0
                                                                                                          compiz, название плагина не помню, alt+колесо мыши меняет прозрачность окна. Вроде это уже все операционки такое умеют.
                                                                                                          0
                                                                                                          Блин, за zen-coding спасибо!!!
                                                                                                            0
                                                                                                            аффтар, ты бог!
                                                                                                              0
                                                                                                              За проделанный труд спасибо!
                                                                                                              Посмотрел первых 5 роликов очень давно, сейчас буду досматривать остальные.

                                                                                                              PS
                                                                                                              На сервере отсутствуют 7. Знакомство с макетом #2
                                                                                                              video.psd2cms.ru/07-1280x800-high.mp4
                                                                                                              Но посмотреть можно через youtube.
                                                                                                                0
                                                                                                                там просто ссылки поменялись psd2cms.ru/d/07-1280x800-high.mp4, похоже пропустил одно видео когда менял, сейчас исправлю
                                                                                                                  0
                                                                                                                  точно! мог бы по формату остальных догадаться. не глянул.

                                                                                                              Only users with full accounts can post comments. Log in, please.

                                                                                                              Top discussions

                                                                                                              Top posts

                                                                                                              Your account

                                                                                                              Sections

                                                                                                              Info

                                                                                                              Services

                                                                                                              © 2006 – 2020 «Habr»
                                                                                                              Language settings
                                                                                                              About
                                                                                                              Support
                                                                                                              Mobile version