JavaScript → Самый короткий аплоадер картинок!
В этой статье раскрыто, как можно сделать очень простой аплоадер, с кодом только на клиенте, используя API хостинга картинок. Если вас интересует более продвинутый аплоадер с такими штуками, как ресайз, кроп, рисование и т.п. — читайте статью How to develop a HTML5 Image Uploader. Содержимое статьи примечательно использованием FormData() и Cross-Domain XHR.
Блог компании Mail.Ru Group → Загрузка файлов с помощью html5 File API, с преферансом и танцовщицами
Предисловие
Загрузка файлов всегда занимала особое место в веб-разработке.О трудности оформления стилями <input type=file/> уже сказано немало, почитать об этом можно, например, по ссылкам раз, два, три, четыре, пять, шесть.
Но и сам процесс загрузки файлов нетривиален, есть много разных способов – и ни одного идеального.
Я уже писал о внедрении на нашем проекте Файлы@Mail.Ru silverlight-загрузчика полгода назад. На тот момент у нас подерживались iframe, flash, silverlight и обычная загрузка файлов. Но прогресс не стоит на месте, и вот уже последние бета-версии всеми горячо любимых браузеров в полной мере поддерживают html5 FileAPI (справедливости ради, стоит заметить, что, как обычно, некоторые поддерживают своеобразно, но об этом — ниже).
Пока писалась статья, Chrome 9 был объявлен stable и форсировано обновился уже на 75% установок 8 версии. Так, что празднуем поддержку File API первым стабильным браузером, ура!
Мы подумали, что не использовать такую технологию было бы преступлением против
Подумали — и внедрили html5 загрузку в дополнение к уже существующим вариантам.
В итоге наши пользователи получили множество плюшек:
— прозрачная дозагрузка после обрыва соединения (и даже рестарта браузера!);
— очередь загрузки;
— прогресс-бар (пользователи MacOS и Safari наконец могут видеть прогресс без всяких инородных плагинов), возможность удаления файлов из очереди, если передумал.
Блог компании Mail.Ru Group → Новый интерфейс написания писем
За годы своего существования, почтовые сервисы прошли путь от plain text до красочно оформленных html-писем с мультимедийными вложениями. Чтобы идти в ногу со временем, Почта@Mail.Ru недавно обновила интерфейс написания писем. Что же изменилось? И, главное, что дали эти изменения?
Во-первых, html-режим написания писем теперь установлен по-умолчанию для всех пользователей. Чтобы добиться безболезненного перехода, нам пришлось многое изменить «внутри» — мы не только заново спроектировали интерфейс, но и переделали всю реализацию.
Во вторых, мы вернули на страницу написания письма список папок — теперь, отвечая на письмо, пользователь не выпадает из привычного контекста.
Изменилась и область написания письма. На Mail.Ru (как и в среднем по Рунету) более 20% пользователей приходят с разрешением 1024x768.
Во-первых, html-режим написания писем теперь установлен по-умолчанию для всех пользователей. Чтобы добиться безболезненного перехода, нам пришлось многое изменить «внутри» — мы не только заново спроектировали интерфейс, но и переделали всю реализацию.
Во вторых, мы вернули на страницу написания письма список папок — теперь, отвечая на письмо, пользователь не выпадает из привычного контекста.
Изменилась и область написания письма. На Mail.Ru (как и в среднем по Рунету) более 20% пользователей приходят с разрешением 1024x768.
Яндекс → Tcl/Tk: Загрузчик на Яндекс.Фотки из контекстного меню (preβ)
На относительно скорую руку сделал аплоадер картинок. Выкладываю его в таком состоянии, чтобы узнать, куда и как следует дорабатывать скрипт.
Adobe → Загрузчик фотографий как vkontakte на Flex
Неделю назад мои знания action script ограничивались тем, как добавить событие onclick на баннер перед загрузкой в баннерную сеть. В качестве загрузчика файлов я использовал swfupload, и очень не хотел влезать внутрь swf-ника и разбираться в коде. Мне не нравится flash, я ни разу не дизайнер и теряюсь, когда вижу все эти слои, кадры, инструменты для рисования звездочек и motion guides.
Потом я наткнулся на эту эту потрясающе-красивую штуку, и узнал, что есть flex. И что flex — это круто, потому что даже такой супер-начинающий как я, с нуля за несколько дней смог написать загрузчик фотографий с предпросмотром, ресайзом на клиенте и upload-баром, примерно такой, какой используется на сайте vkontakte.ru.
Есть три причины, из-за которых я решил использовать flash для загрузки фотографий. Это FileReference, FileReferenceList и flash.display.Bitmap. В 10-й версии флеш плеера у FileReference появилась функция load(), с помощью которой можно просматривать выбранные фотографии в ролике локально без загрузки на сервер. FileReferenceList позволяет в файловом диалоге с помощью shift-а выбрать сразу несколько фотографий. Bitmap делает ресайз картинок перед отправкой на сервер. Все это нельзя сделать на чистом javascript-е.
Итак, пишем загрузчик фотографий как vkontakte на flex (пошаговое пособие для совсем начинающих).
Потом я наткнулся на эту эту потрясающе-красивую штуку, и узнал, что есть flex. И что flex — это круто, потому что даже такой супер-начинающий как я, с нуля за несколько дней смог написать загрузчик фотографий с предпросмотром, ресайзом на клиенте и upload-баром, примерно такой, какой используется на сайте vkontakte.ru.
Есть три причины, из-за которых я решил использовать flash для загрузки фотографий. Это FileReference, FileReferenceList и flash.display.Bitmap. В 10-й версии флеш плеера у FileReference появилась функция load(), с помощью которой можно просматривать выбранные фотографии в ролике локально без загрузки на сервер. FileReferenceList позволяет в файловом диалоге с помощью shift-а выбрать сразу несколько фотографий. Bitmap делает ресайз картинок перед отправкой на сервер. Все это нельзя сделать на чистом javascript-е.
Итак, пишем загрузчик фотографий как vkontakte на flex (пошаговое пособие для совсем начинающих).
Веб-разработка → Как сделать двигающийся аплоадер минимального размера и красиво
Хочу поделиться небольшим трюком для создания анимированной полосы загрузки как в флеш проигрывателях или в операционной системе.
Имеем в наличии просто картинку:
Как заставить её двигаться? А очень просто! Нужно двигать бекграунд в интервале попиксельно.
Смотрим демо
Имеем в наличии просто картинку:
Как заставить её двигаться? А очень просто! Нужно двигать бекграунд в интервале попиксельно.
Смотрим демо