Веб-разработка → Загрузка картинок на сервер с использованием HTML5+jQuery+PHP
Доброго времени суток!
Наверняка многие видели в движке WP функцию переноса файлов с рабочего стола в окно браузера и их дальнейшую загрузку на сервер. Когда я увидел такое, мне стало интересно как же это организовано. Тогда я полез в дебри, чуть было не заблудился, но всё таки решение нашел. Оказывается все очень просто.
Всего лишь небольшие знания HTML5+jQuery+PHP.
Наверняка многие видели в движке WP функцию переноса файлов с рабочего стола в окно браузера и их дальнейшую загрузку на сервер. Когда я увидел такое, мне стало интересно как же это организовано. Тогда я полез в дебри, чуть было не заблудился, но всё таки решение нашел. Оказывается все очень просто.
Что нам понадобится?
Всего лишь небольшие знания HTML5+jQuery+PHP.
HTML5 → Делаем управляемый закат с помощью CSS3 и javascript
Небольшая демонстрация возможностей CSS3 на примере. Данный пример затрагивает свойства border-radius, box-shadow и linear-gradient.
head
Прошу расценивать предлагаемый код не в качестве готового решения, которое требуется использовать в своем проекте, а лишь как демонстрация. Хотя, при должной доработке, вполне возможно подойдет для какой-нибудь задачи.
Для тех, кому лень читать весь текст статьи я сразу прилагаю ссылку на рабочий пример. Солнце можно двигать по экрану, при его приближении к горизонту создается имитация заката. После полного ухода солнца за линию горизонта на небе выплывают звезды.
Пример тестировался в последних версиях современных браузеров — IE9, Chrome 16, Opera 11.60 и Firefox 8. Как ни странно, но шустрее всего на моей машине пример работал в браузере IE9, чуть похуже обстояли дела в браузере Firefox. В Chrome и Opera заметны некоторые фризы при движении.
GMail → Drag-and-drop аттачментов на десктоп
Gmail становится всё больше похож на десктопный клиент. Не так давно они внедрили drag-and-drop для присоединения файлов к письму, а теперь реализовали и обратную операцию — перенос аттачментов в папку или на десктоп.
Чтобы перенести файл, нужно ухватиться за его значок или за ссылку «Download». Также можно взять ссылку «Download all attachments» — и перетащить все аттачменты сразу.
Фича работает пока только в Google Chrome 5+, но автоматически заработает и в других браузерах, как только они реализуют поддержку HTML5 File APIs.
via Official Gmail Blog
Чтобы перенести файл, нужно ухватиться за его значок или за ссылку «Download». Также можно взять ссылку «Download all attachments» — и перетащить все аттачменты сразу.
Фича работает пока только в Google Chrome 5+, но автоматически заработает и в других браузерах, как только они реализуют поддержку HTML5 File APIs.
via Official Gmail Blog
Персональные блоги → Drag&Drop CMS версия альфа
По причине начавшегося беспредела, повторяю выкладывание поста, но теперь с прикрепленными скринами внизу страницы.
Проанализировав текущих лидеров на рынке готовых систем управления сайтом, я обнаружил, что нет ни одного продукта, который бы «просто работал». Почему для создания компьютерных программ уже есть среды, которые позволяют практически не задумываться о системной составляющей, а для создания сайтов — нет? Точнее есть, но на их основе сайты получаются шаблонными и однотипными.
Именно такие размышления натолкнули меня на разработку нового типа интерфейсов, которые бы позволяли создавать сайты без помощи технического специалиста. Своеобразной соской(единственный интуитивно понятный интерфейс) для юзера является метод drag-and-drop, поэтому именно на него я и сделал упор.
На данный момент готов первый прототип,
Проанализировав текущих лидеров на рынке готовых систем управления сайтом, я обнаружил, что нет ни одного продукта, который бы «просто работал». Почему для создания компьютерных программ уже есть среды, которые позволяют практически не задумываться о системной составляющей, а для создания сайтов — нет? Точнее есть, но на их основе сайты получаются шаблонными и однотипными.
Именно такие размышления натолкнули меня на разработку нового типа интерфейсов, которые бы позволяли создавать сайты без помощи технического специалиста. Своеобразной соской(единственный интуитивно понятный интерфейс) для юзера является метод drag-and-drop, поэтому именно на него я и сделал упор.
На данный момент готов первый прототип,
Блог компании Бюро Пирогова → Удобное заполнение расписаний с JQuery
Эта история произошла с Дмитрием Дубовицким — программистом «Бюро Пирогова».
Однажды случилось мне заниматься одним весьма интересным проектом. По ТЗ нужно было заполнить расписаниие занятий фитнес-клуба в неком XML. В принципе, ничего сложного — прочитал XML, заполнил данными таблицу на экране, но… Как же клиент будет редактировать расписание и править xml-файл? руками?
Выход прост — это можно сделать мышью!
Однажды случилось мне заниматься одним весьма интересным проектом. По ТЗ нужно было заполнить расписаниие занятий фитнес-клуба в неком XML. В принципе, ничего сложного — прочитал XML, заполнил данными таблицу на экране, но… Как же клиент будет редактировать расписание и править xml-файл? руками?
Выход прост — это можно сделать мышью!
GMail → Drag and Drop для вставки картинок
Не так давно был анонсирован функционал прикладывания файлов к письму через Drag'n'drop. На днях команда GMail расширила эту функцию, добавив возможность прикладывать картинки прямо в тело письма перетаскиванием файлов.
Раньше тоже можно было добавлять картинки, включив в Labs соответствующую функцию. Однако опыт показывает, что многим удобнее перетаскивание.
Раньше тоже можно было добавлять картинки, включив в Labs соответствующую функцию. Однако опыт показывает, что многим удобнее перетаскивание.
JavaScript → Пертаскиваем элементы DOM, standalone script
Уважаемые, доброго времени суток и спасибо за инвайт! :)
Если я правильно понял, то что было в песочнице можно опубликовать в блоге… и так, начнем.
Сейчас повсеместно пользуемся JS фреймворками, благо их развелось превеликое множество, на все потребности и вкусы жизни, но бывает (у меня так бывает, не знаю как у вас :) ) что или проект не большой или нет надобности все хозяйство фреймворков подключать и пишем весь JS функционал сами. Ну а хочется его приукрасить, фишечки и фенечки прикрутить… вот одна из них и есть — перетаскивание диалоговых окошек.
Да, за стартап идеи спасибо Mike Hall, а также всему JS-коддинг сообществу :)
Если я правильно понял, то что было в песочнице можно опубликовать в блоге… и так, начнем.
Сейчас повсеместно пользуемся JS фреймворками, благо их развелось превеликое множество, на все потребности и вкусы жизни, но бывает (у меня так бывает, не знаю как у вас :) ) что или проект не большой или нет надобности все хозяйство фреймворков подключать и пишем весь JS функционал сами. Ну а хочется его приукрасить, фишечки и фенечки прикрутить… вот одна из них и есть — перетаскивание диалоговых окошек.
Да, за стартап идеи спасибо Mike Hall, а также всему JS-коддинг сообществу :)
Персональные блоги → Drag Me to PoSH
Перетаскиваем файлы в PowerShell-скрипты:
[HKEY_CLASSES_ROOT\Microsoft.PowerShellscript.1\Shell\Open\Command]
@="C:\\Windows\\system32\\WINDOW~1\\v1.0\\POWERS~1.EXE -f \"%1\" %*"
[HKEY_CLASSES_ROOT\Microsoft.PowerShellscript.1\shellex\DropHandler]
@="{86C86720-42A0-1069-A2E8-08002B30309D}"
Веб-разработка → Position fixed IE6 + Drag-and-Drop
Много было про то написано, да не суть…
Озадачился следующей задумкой: перетаскиваемый слой с фиксированным положением на экране, страница скролица — слой остаётся на месте. Как известно данная задумка на ура воплощается в FF, Opera, Google Chrome, но вот IE интеллигентно послал мою задумку в свою мусорную корзинку — при скролинге передвинутый слой сползал вместе со страницей.
Озадачился следующей задумкой: перетаскиваемый слой с фиксированным положением на экране, страница скролица — слой остаётся на месте. Как известно данная задумка на ура воплощается в FF, Opera, Google Chrome, но вот IE интеллигентно послал мою задумку в свою мусорную корзинку — при скролинге передвинутый слой сползал вместе со страницей.
JavaScript → Crop & Resize на страницах ваших сайтов
Пройдясь по хабра-поиску выяснил, что готового решения для кропа-ресайза изображений, на движке Javascript/HTML/CSS еще не предлагалось. Поэтому, позвольте представить вашему вниманию модуль для ваших сайтов, частично реализуюший функционал редактирования, распространенный на фото-хостингах.
К делу
Внешне задумка выглядит так: