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

Website development

Чтобы было понятно о чем речь, прикладываю 3 скринкаста, второй и третий под катом.

Tags:

скринкасты

+111
10.5k
107

pomeo

User

Audio over Bluetooth: most detailed information about profiles, codecs, and devices
22 54.1k 6 7
Glean Insights About 18 Best Java Frameworks To Use in 2020
2 625 2 0
Smart house with Xiaomi on the example of a sauna
4 462 1 0
VVVVVV??? VVVVVV!!! :)
1 1.2k 2 0

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

More

Ads

Comments 107

demis December 1, 2010 at 09:27 AM
+8
Качественные видео — приятно слушать и смотреть.
paco December 1, 2010 at 10:06 AM
0
Класс! А что это за плагин, с помощью которого так быстро рыба пишется?
Он только к emacs подключается?
- invite December 1, 2010 at 10:17 AM
  +4
  Это zen-coding ( code.google.com/p/zen-coding/ ), автор указал ссылку на него в видео, подключается очень много к чему, я с VIM его использую.
- Stepanow December 1, 2010 at 07:48 PM
  0
  habrahabr.ru/blogs/webdev/76069/
sitehound December 1, 2010 at 10:07 AM
+2
Мне в этом всем особенно интересно было ваше использование emacs. Впечатлило.
paco December 1, 2010 at 10:12 AM
+1
Как виртуозно Вы в emacs работаете — прям захотелось освоить! Маастер мастер.

P.S. Color scheme тоже приятная
lllypyn December 1, 2010 at 10:24 AM
+3
Мне одному показалось, что окончания предложений голос девушки говорит тише чем всё остальное? наверно стоит микрофон поставить подальше, а говорить громче.
- antonzaycev December 1, 2010 at 10:30 AM
  +5
  придираетесь
  - lllypyn December 1, 2010 at 11:46 AM
    
    +1
    Возможно, но слушая её мне приходилось увеличивать громкость на концах предложений. Они явно выбиваются из общего уровня громкости.
    
    Всё остальное мне понравилось.
- TonyClifton December 2, 2010 at 01:39 PM
  0
  А мне показалось, что она в некоторых местах сдерживается, чтобы не рассмеяться.
- almazmusic December 4, 2010 at 02:57 PM
  0
  Проще будет после записи воспользоваться компрессором для голоса. И никому ничего двигать не надо будет.
romanoza December 1, 2010 at 10:37 AM
0
почему png-24? png-8 подойдет
- romanoza December 1, 2010 at 10:39 AM
  +1
  поперематывал рандомно, вроде, все ок, но есть недочеты, например, зачем разделитель в футере резать из картинки? можно сделать бордером
  - NYMEZIDE December 1, 2010 at 10:41 AM
    
    0
    кроссбраузерность (точнее чтобы выглядело везде одинаково) бордером? надежнее картинкой. Она не сильно много весит по сравнению с текстом описания этого бордера.
    - romanoza December 1, 2010 at 10:46 AM
      
      +1
      
      в чем проблема кроссбраузерности бордера? :)
      - NYMEZIDE December 1, 2010 at 10:54 AM
        
        +1
        
        В том что border dotted выглядит по разному в IE и Хроме к примеру.
        
        romanoza December 1, 2010 at 10:58 AM
        
        0
        
        вы, конечно, простите, но схуяли dotted?
        
        NYMEZIDE December 1, 2010 at 12:36 PM
        
        –1
        
        Я привел пример.
        
        А продемонстрируйте код бордера из скринкаста, чтобы оценить его внешний вид в различных браузерах.
        
        romanoza December 1, 2010 at 12:40 PM
        
        +1
        
        вы смеётесь? cssdesk.com/srReg
        
        NYMEZIDE December 1, 2010 at 12:50 PM
        
        –1
        
        Прежде чем матом писать, посмотрите скринкаст внимательнее. Там не сплошная линия.
        
        romanoza December 1, 2010 at 12:57 PM
        
        0
        
        вы утомили, честное слово
        
        NYMEZIDE December 1, 2010 at 01:00 PM
        
        0
        
        Я про меню в папке вообще то говорю. А не про низ страницы. )
        
        NYMEZIDE December 1, 2010 at 01:00 PM
        
        0
        
        шапке*
        
        romanoza December 1, 2010 at 01:02 PM
        
        +1
        
        очень утомили
        > зачем разделитель в футере резать из картинки
        
        firstbyte December 1, 2010 at 07:59 PM
        
        0
        
        лечится комбинацией двух zoom.
NYMEZIDE December 1, 2010 at 10:40 AM
+3
Захотелось поставить Ubuntu, emacs и постигать дао верстки ;)
- stel December 1, 2010 at 10:55 AM
  +2
  Для этого вам необязательно ставить Ubuntu и emacs. Я более чем уверен, вы сможете постигать дао верстки и в той операционной системе, в которой работаете ;)
  - NYMEZIDE December 1, 2010 at 11:28 AM
    
    0
    Я никогда не видел emacs. Поэтому подумал что он только под Linux.
n0ne December 1, 2010 at 10:45 AM
+4
А где фотка обладательницы этого сказочного голоса???
- paco December 1, 2010 at 10:59 AM
  +2
  голос и правда чудесен
- MAD_Kolia December 1, 2010 at 12:04 PM
  –17
  Какая тебе разница? Дрочи на эту, к примеру bimg.mynet.com/S/Sasha-Grey/8.jpg
  Как же заебали инернет-дрочеры.
  - n0ne December 1, 2010 at 12:22 PM
    
    +7
    Я старше Вас минимум лет на 10, поэтому не надо мне рассказывать, что делать, и я не скажу Вам, куда идти. Если Вы занимаетесь самоудовлетворением, а Вы им точно занимаетесь, судя по комментарию и сквозящему хроническому неудовлетворению, то не надо проецировать свои собственные проблемы на окружающих, не надо обобщать — это дурной тон.
    
    Пройдут всё те же 10-15 лет и Вы поймёте, хотя не исключено, что Вам этого не дано, что в человеке, а особенно в Женщине, может быть прекрасен и голос, а не только «сиськи». Поэтому и вопрос был риторический, абсолютно не требующий ответа. Но Вам и этого не понять.
    - MAD_Kolia December 1, 2010 at 01:08 PM
      
      –15
      
      Какая тебе разница, как она выглядит? Мало, на кого любоваться? А если она страшная, как атомная война, то сразу станет хуже ее верстка? Я этого не пойму — пристрастия посмотреть на фото женщины. Если она некрасивая, то ей будет еще обиднее, что она не сможет показать себя, ты ее этим только унизишь. И почему у мужиков не просишь фотки?
      И какая мне разница, сколько тебе лет? Маньяков не двадцатилетних ловят, а постарше, лет сорока.
      - n0ne December 1, 2010 at 01:58 PM
        
        +1
        
        Прочтите предпоследнее предложение моего предыдущего комментария. Желательного читать его до момента понимания-просветления.
        
        Ну а для тех, кто в глухом танке, всё же объясню: мой первый пост — это был завуалированный комплимент обладательнице замечательного, по моему мнению, голоса. Не думал, что столь банальные вещи необходимо разъяснять.
        
        MAD_Kolia December 1, 2010 at 02:08 PM
        
        –15
        
        Ну ты и лизало.
        
        n0ne December 1, 2010 at 02:27 PM
        
        +3
        
        Ну не всем же быть невоспитанным, малограмотным хамлом. Должны же существовать в этом мире и интеллигентные, воспитанные люди, способные искренне восхититься чем-либо/кем-любо. В данном случае голосом девушки.
        
        2 all: прощу прощения… я уже перестал кормить тролля.
        
        demis December 1, 2010 at 02:39 PM
        
        +5
        
        Странно, каждое ваше сообщение должно начинаться с «Какая тебе разница».
        
        MAD_Kolia December 1, 2010 at 06:23 PM
        
        –5
        
        Какая тебе разница?
        За ошибку выше извиняюсь.
        n0ne.habrahabr.ru/ — бггг, интеллигент…
    - TNK December 4, 2010 at 07:09 PM
      
      0
      
      Простите, а чем вас обидели сиськи, что вы их аж в кавычки взяли?
  - UFO just landed and posted this here
Springa December 1, 2010 at 10:51 AM
0
Спасибо! А html, css будут даны в текстовом виде?
paco December 1, 2010 at 11:00 AM
–1
Подскажите, где взять такую же color scheme для notepad++? ) Уж больно симпотична
- pomeo December 1, 2010 at 02:37 PM
  0
  я её из gedit взял, там она называется Oblivion
  - Gordeev January 20, 2011 at 06:30 PM
    
    0
    прошу прощения, а как вы ее экспортировали из gedit'а в npp? :)
devosx December 1, 2010 at 11:03 AM
0
да впечатлил emacs :) точнее человек который им так владеет… и верстка хорошая и понятная :-) вот бы так научится :))))
fobazzz December 1, 2010 at 11:07 AM
+1
Отличное видео узнал много способов как ускорить работу
Хочется пораньше получить описание инструментов
- TiGR December 1, 2010 at 03:11 PM
  0
  Да-да, ждать семнадцатой части как-то долго :)
fobazzz December 1, 2010 at 11:10 AM
0
Сейчас попробуй настройть notepad++ под такую же работу.
kirsan_vlz December 1, 2010 at 11:11 AM
+2
А почему поля в форме авторизации обёрнуты в label?
- aubt December 1, 2010 at 11:27 AM
  +1
  www.w3.org/TR/html401/interact/forms.html#h-17.9
  - kirsan_vlz December 1, 2010 at 11:38 AM
    
    0
    Спасибо, но всё равно не понимаю, зачем. Там вместо label'а описание поля помещается в его value, соответственно необходимость в подписи пропадает.
    Или это с расчётом на будущие возможные изменения?
timo4ey December 1, 2010 at 11:17 AM
+2
очень приятный голос у девушки, заслушался
ringo December 1, 2010 at 11:43 AM
+1
И для рекламы хорошо и для людей полезно, особенно для новичков, хорошо преподнесено.
z0r December 1, 2010 at 11:50 AM
–1
modx? Почему не php Nuke сразу?
- fobazzz December 1, 2010 at 12:01 PM
  +2
  знаете что то лучше?
  По гибкости и возможностям одна из лучших цмс.
  Проблемы со скоростью легко решить прямыми руками
  - set December 1, 2010 at 12:41 PM
    
    +2
    Я бы предложил Drupal, к примеру :)
    Его очень легко и приятно темизировать\переодевать.
    Всё это имхо, конечно же…
    - fobazzz December 1, 2010 at 12:46 PM
      
      0
      
      Я не к тому что нет других Хороших CMS, а к тому что ее сравнивают мягко говоря не с лучшей cms по современным стандартом.
aliev December 1, 2010 at 12:25 PM
+1
У девушки голос приятный :) Расслабляет :)
toptalo December 1, 2010 at 01:11 PM
0
Здорово, спасибо. Буду ждать продолжения.

И можно вопрос не по теме?
Сколько примерно может стоить верстка этого макета? Просто есть проблема ценообразования, хотелось бы её решить)
- pomeo December 1, 2010 at 02:39 PM
  0
  у всех разные способы подсчета, стоимость часа своего времени умножайте на количество часов которые вы затратите на вёрстку этого макета
artemlebsak December 1, 2010 at 01:40 PM
0
Ждать 12 недель нет сил, скажите, пожалуйста, а какой инструментарий для записи и постпродакшена такого скринкаста используете?
- pomeo December 1, 2010 at 02:58 PM
  +5
  В 17 скринкасте не будет ничего про создание скринкастов, всё-таки вся серия не о том.
  Для записи использовался bash скриптик в основе которого ffmpeg -f x11grab. Нужна была запись mpeg2 пока не кончится место. Все что есть либо падает через час, не синхронизирует аудио с видео дорожкой или не умеет mpeg2 на выходе давать. Исходники скринкастов в среднем у меня 2-3 часа, а вся папка для каждого скринкаста ~15гб.
  Дальше Avidemux для вырезания всего лишнего и Openshot для соединения всех дорожек вместе. Заставку делал в Ease, да это обычная штука для презентации, но даже в openshot только примитивная анимация которой не хватает. Девушку писал отдельно с помощью Audacity
  Хотел попозже отдельную статью написать, возможно сэкономлю кому-то время, кто решится делать длинные скринкасты под линуксом.
zaka December 1, 2010 at 02:21 PM
+4
Немного маниакально-пошловатый заголовок. Или просто я хочу его таким видеть.
pashamesh December 1, 2010 at 02:22 PM
0
Photoshop в Ubuntu — как? Пытался запустить Photosohop CS3 в Ubuntu 10.04 — ни чего не получилось.
- pashamesh December 1, 2010 at 02:23 PM
  0
  Photoshop
- pomeo December 1, 2010 at 02:40 PM
  0
  CS1 работала всегда без единой проблемы, ей и пользуюсь
- 3ds December 1, 2010 at 08:22 PM
  0
  CS5 тоже отлично запускается ;) (wine 1.3.8)
  - Jman December 2, 2010 at 05:10 PM
    
    0
    достаточно wine 1.2.1
    у меня иногда только с текстом проблемы, перезапуск помогает.
- bigdogsru December 1, 2010 at 09:17 PM
  0
  CS4 Portable под вайном — вообще без проблем. А вот CS3 у меня почему-то подтормаживал изрядно… Пятый не пробовала.
NecroHill December 1, 2010 at 02:36 PM
+2
для избежания лишних телодвижений, при большом количестве графических элементов, желательно пользоваться инструментом Photoshop — Slice tool (при этом, конечно, не избежать создания дополнительных файлов-фонов для поведения hover, но количество кликов мышью уменьшится по-любому).
feligz December 1, 2010 at 03:32 PM
0
несколько критических замечаний все же :)
Emacs хорошо сконфигурирован для верстки это +, а вот лишние телодвижения с мышкой по поводу скопировать выделенное содержимое выглядит странно при таком уровне владения emacs, да и переключение между активными приложениями мышкой тоже как то не очень.
- TKing December 1, 2010 at 07:27 PM
  0
  Для наглядности? Скринкаст же.
- Stepanow December 1, 2010 at 07:31 PM
  0
  Возможно это сделано ради наглядности, да и девушке не приходится озвучивать хитрую комбинацию клавиш, в результате которой всё так резко изменилось на экране. ИМХО
eklektikos December 1, 2010 at 03:58 PM
0
Спасибо огромное. Как раз то что нужно сейчас!
Neonailol December 1, 2010 at 05:12 PM
+1
неплохие скринкасты, голос девушки было слышать неожиданно))
+
поскольку церковь emacs открывает дверь не каждому, для развития mad skillz рекомендую попробовать TextMate под мак или его клон www.e-texteditor.com/ под винду…
DiMoNTD December 1, 2010 at 06:09 PM
0
Отличная статья. Теперь немного иначе начну смотреть на подход к верстке сайта + очень было бы интересно посмотреть про переход на HTML5.
Zerstoren December 1, 2010 at 07:11 PM
+1
Не режу сайт на кусочки. Требую от дизайнера PSDшник =) и как обычно его дают.

Но перед заданием, я всегда предупреждаю, что нужен именно PSD без клееных слоев
Caiiiycuk December 1, 2010 at 07:15 PM
0
А как делается группировка окн? Найти не могу…
- pomeo December 1, 2010 at 07:41 PM
  +1
  с помощью Compiz
  - Caiiiycuk December 2, 2010 at 05:33 AM
    
    0
    Прочитал, все должно работать, но не работает.
    Моя система Ubuntu 9.10 — Karmic Koala.
    У меня установлены следующие плагины compiz (из репозитария):
    compiz-fusion-plugins-extra
    - Caiiiycuk December 2, 2010 at 05:36 AM
      
      0
      
      Сори не дописал (ctrl+enter подвел)…
      compiz-fusion-plugins-extra
      compiz-fusion-plugins-main
      
      Действую согласно документации:
      Выбираю окно жму <super (win)> + s (ничего не происходит)
      Выбираю второе окно жму <super (win)> + s (ничего не происходит)
      Жму <super (win)> + g (ничего не происходит)
      
      Пробовал всяко разно — результат один. Компиз включен на максимум (окна плющит при перетаскивании).
      - pomeo December 2, 2010 at 07:45 AM
        
        0
        
        в CompizConfig Settings Manager включен Group?
        
        Caiiiycuk December 2, 2010 at 05:26 PM
        
        0
        
        Спасибо теперь работает!
huze December 1, 2010 at 08:29 PM
+1
Спасибо, было очень интересно! Сам не верстаю, я больше по архитектурам, но когда кто-то что-то создаёт, это всегда интересно. =) И да, голос у девушки очень приятный. Жду продолжения, жаль, что только раз в неделю.
zeka December 1, 2010 at 10:50 PM
0
Заведите твиттер чтобы проще было следить за обновлениями, ну и фидбек через него получать можно.
VolCh December 1, 2010 at 11:26 PM
0
Эх, не было таких «туториалов», когда вёрстать учился.

А emacs впечатлил, попробовать что ли для разработки
Stalker_RED December 2, 2010 at 07:31 AM
0
если не секрет, чем продиктован выбор префиксов цсс-классов?
все эти b- g- l-?
- pomeo December 2, 2010 at 07:48 AM
  +1
  Виталий Харисов. Вёрстка независимыми блоками
Mystex December 2, 2010 at 07:31 PM
0
Хочу, чтобы мне таким голосом читали сказки на ночь :)
Dr_Death December 2, 2010 at 08:58 PM
–1
После обнуления в css через * отпало желание что либо смотреть дальше
kolebas December 2, 2010 at 11:56 PM
0
а вы браузер все время перегружаете или у вас выставлено это автоматом? если да, то с помощью какого аддона(это ж вроде FF)?
- pomeo December 3, 2010 at 07:54 AM
  0
  MozRepl
  - kolebas December 4, 2010 at 12:54 PM
    
    0
    скажите, а вы mozrepl ‘main.css’ по крону выставили или есть еще какие то ухищрения?
    - pomeo December 4, 2010 at 01:06 PM
      
      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)
Inque December 3, 2010 at 12:30 PM
0
Очень классно, большое спасибо!

А голос, конечно же, надо было обработать получше компрессором, осбенно де-эссером.
huze December 3, 2010 at 11:09 PM
0
Кстати, модульную вёрстку не практикуете?
- pomeo December 4, 2010 at 09:15 AM
  0
  нет, пару раз пробовал не пошло
almazmusic December 4, 2010 at 03:03 PM
0
Скажите, а в чём соль использования в формах элемента вместо?
- almazmusic December 4, 2010 at 03:39 PM
  0
  Ресет очень брутальный, учитывая то, что вы используете АНБ.
- almazmusic December 4, 2010 at 04:28 PM
  0
  — фотошоп без хоткеев это, конечно, зло в чистом виде. Куча времени тратится ни на что. Да и скилы автора в целом в фотошопе очень слабы. Например, чтобы развернуть скруглённую часть активного пункта в навигации в шапке, достаточно выделить это место, предварительно выбрав этот слой, нажать Ctrl+J (из стандартного набора хоткеев) и в меню Edit > Transformation сделать поворот на нужное кол-во градусов, либо инвертировать горизонтально. Ну а учитывая несложный хоткей на последнюю операцию всё преобразование левого края в правый занимает примерно 3-5 секунд. И не надо никаких новых документов создавать.
  — почему стили набираются без помощи ZC?
kolebas December 10, 2010 at 10:46 PM
0
а чем вы делаете прозрачность в браузере, когда накладываете его на макет?
- pomeo December 11, 2010 at 09:44 AM
  0
  compiz, название плагина не помню, alt+колесо мыши меняет прозрачность окна. Вроде это уже все операционки такое умеют.
Mox December 11, 2010 at 10:55 AM
0
Блин, за zen-coding спасибо!!!
Zharskiy December 24, 2010 at 02:46 AM
0
аффтар, ты бог!
tsimox March 15, 2012 at 03:16 PM
0
За проделанный труд спасибо!
Посмотрел первых 5 роликов очень давно, сейчас буду досматривать остальные.

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