Подкаст SitePoint № 24: Эти кадры ироничны

Так что Firebug определенно тот, который каждый хотел бы использовать, а другой, который мне очень нравится, это Window Resizer, и, по сути, это позволяет легко изменять размер окна вашего браузера до разных разрешений, будь то 800 × 600, 1024 × 768, что бы это ни было. Вы можете быстро щелкнуть по кнопке, и ваш браузер изменит свой размер, чтобы вы могли точно видеть, как выглядит это разрешение, без фактического изменения разрешения, что экономит немало времени при разработке.

Кевин: Да. Патрик, ты использовал один из них, не так ли?

Патрик: Да, я имею в виду, на самом деле Window Resizer звучит круто. Я должен проверить это. Я имею в виду, что я тоже использую Firebug, но здесь я должен выделить Screengrab . Когда я использую его, это делает меня счастливым — я думаю, это самый простой способ сказать это — потому что вы можете сделать один снимок экрана с полным окном, именно этим я и пользуюсь большую часть времени. Я использую его как медиа-комплект, когда мне нужно было сделать скриншот всей страницы, чтобы показать, где будет размещаться реклама. Это действительно просто, это работает. Вы можете делать скриншоты только одной прокруткой, верхней прокруткой или всей страницей, просто видимым битом, перетаскиваемым выделением или чем-то еще, это просто работает и работает хорошо, поэтому мне это нравится.

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

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

Если вы дизайнер или у вас есть дизайнер, который хотел бы улучшить свой опыт работы с Firefox, ознакомьтесь со списком из 19 дополнений. Да, действительно дешевое Рождество.

Последняя история, которую мы расскажем на сегодняшнем шоу — это HTML 5 Drag & Drop. Есть замечательный пост в блоге, который я заметил Франциско Райана Толмаски (извинения за то, что я только что сделал с твоим именем, Франциско), и это своего рода рассылка новой встроенной в Drag & Drop поддержки HTML 5. Этот парень является одним из разработчиков проекта Cappuccino , который занимается созданием настольных приложений в Интернете с использованием тех же методов кодирования, которые используются при создании настольных Mac-приложений, и опытные разработчики скажут вам, что это довольно хороший API работать на. Они создали проект под названием 280 Slides для капучино, и он является конкурентом PowerPoint или Keynote на Mac, который работает в браузере. В этом посте он начинается с демонстрационного видео, которое действительно поразило меня.

Брэд, ты видел это видео?

Брэд: Да, я сделал. Это действительно потрясающе. Если вы этого не видели … и я впервые услышал о Drag & Drop с HTML 5. Если вы еще этого не видели, обязательно посмотрите видео. Как только это началось, видео запускается, и это короткое 20 секунд — и он начинает перетаскивать элементы вокруг. Я думаю, хорошо, это похоже на jQuery, а затем он перетаскивает его из одного браузера в другой и бросает. Я думаю, вау, это довольно удивительно и дико одновременно, поэтому я определенно хочу кое-что исследовать, но на самом деле это действительно может изменить способ создания веб-приложений и их взаимодействие друг с другом. ,

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

Посмотрев далее в статье, он объясняет, как это работает, как, когда что-то начинает перетаскивать в HTML 5, как разработчик JavaScript, у вас есть возможность установить данные, которые перетаскиваются в нескольких форматах, чтобы вы могли сказать, что этот слайд перетаскивается Я могу представить его в виде файла PNG или в виде слайд-объекта JavaScript или в виде URL-адреса. Вы объединяете эти несколько форматов, а затем на принимающей стороне решаете, какой вам нужен.

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

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