Что не является инструментом веб разработчика.
Прежде всего, что подразумевается под такими инструментами? Как по мне, это все, что так или иначе помогает в разработке проекта. Таким образом, инструментом может называться даже простейший блокнот, в котором вы можете писать код. Да, это очень примитивный инструмент, поэтому давайте сегодня рассмотрим другие, более полезные и эффективные.
Инструмент №1 – редактор кода
Прежде всего, это полезный инструмент для тех, кто собирается самостоятельно создавать свой ресурс или вносить какие-то правки в него. Если это так, то вам понадобится написание кода на языках html и css как минимум, а возможно и на некоторых других. Для удобной работы с ними нужно какое-то программное обеспечение, в нашем случае редактор, в котором этот код подсвечивался, а также вылазили различные подсказки по написанию. В любом случае, вы можете их убрать, если являетесь уже опытным разработчиком.
Из таких редакторов можно выделить Notepad++, Brackets, SublimeText и другие. Лично я до сих пор использую первый, так как очень сильно привык к нему, но у каждого редактора есть свои плюсы.
JavaScript. Быстрый старт
Среда разработки
Это что-то вроде того же редактора, но включающее в себя гораздо больше возможностей. Само название говорит об этом. В такой среде есть все необходимое для того, чтобы разработать сайт. Обычно такую программу устанавливают для того, чтобы работать с различными языками программирования. В веб-программировании чаще всего используется PHP, именно для работы с ним ставят среду.
Пожалуй, одним из самых оптимальных вариантов здесь является NetBeans. Это бесплатная программа в различных своих сборках может обеспечить разработчика всем необходимым.
PhotoShop или любой другой редактор, поддерживающий работу со слоями
По-хорошему, реализация интернет-проекта начинается с того, что дизайнер рисует его в программе, вроде Photoshop, чтобы верстальщику не приходилось все придумывать с нуля. Поэтому такой графический редактор, несомненно, тоже является одним из инструментов.
Конструкторы сайтов как упрощенные инструменты
Но выше мы говорили о таких вещах, которые нужны вам, если ресурс создается изначально под серьезные цели, потому что разработка дизайна и его реализация в коде требует немалых знаний, а если их нет, то нужно нанимать людей, которые вам это сделают.
Конструктор позволяет пойти гораздо более простым путем. При работе в такой программе вам, скорее всего, не понадобиться никаких начальных знаний в области сайтостроения (хотя все-таки полезно их иметь), все настройки выполняются в визуальном режиме. Вы можете выбрать один из сотен шаблонов, и ваш сайт будет смотреться хорошо, хотя и не будет обладать уникальным оформлением, но это уже другой вопрос.
Некоторые конструкторы являются крупными веб-площадками, где вы можете также зарегистрировать себе домен, заказать дополнительные услуги и т.д. Все в одном, короче. Например, Wix, Ucoz. Эти площадки работают на собственных движках. А есть просто программы-конструкторы. Например, DreamViewer или полностью визуальный Adobe Muse.
Их называют визуальными или полувизуальными редакторами, где часть кода вы можете писать сами, а часть генерировать с помощью разных кнопок и настроек. Выглядит это примерно так:
Отличие от веб-сервисов в том, что в них вы все-таки выполняете хоть какую-то работу, а также вы получаете в конце лишь файлы будущего сайта, но для реального появления сайта в сети необходимо выполнить все те же операции: зарегистрировать доменное имя, оплатить место на удаленном сервере и разместить нужные файлы.
Веб-конструкторы же берут все это на себя, максимально упрощая для вас дело. Там вы можете создать себе сайт даже полностью бесплатно, но тогда ваши возможности сильно ограничены.
Локальный сервер
Пожалуй, один из важнейших инструментов, который сильно помогает в создании сайта. Вот представьте себе такую ситуацию: разрабатываете вы веб-ресурс. А как проверить результат работы на разных этапах? Пока вы обходитесь только средствами html и css, то вы можете открывать странички просто в браузере, но сегодня любой динамический сайт работает с помощью php или другого языка программирования. А если вы откроете php-файл в браузере, он просто не сможет его интерпретировать, потому что php-скрипт выполняется на СЕРВЕРЕ.
В таком случае нам нужно либо где-то найти реальный удаленный сервер, либо создать локальный у себя на компьютере. Во втором случае огромный плюс в том, что работать будет проще, никто не увидит результат ваших экспериментов, потому что локальный сервер видите только вы, он ведь у вас на компьютере.
Самый известный локальный сервер на windows – это Denwer. Также есть OpenServer. Я думаю, оба хорошо, пока использую первый, так как уже привык к нему. Благодаря локальному серверу на компьютере вы сможете открывать php-файлы и видеть результат их работы, вы даже можете установить на сайт движок, абсолютно любой движок. Что захотите: WordPress, Joomla, Opencart, modx и проводить какие-угодно эксперименты.
Движки
Раз уж заговорили о них, так это ведь тоже инструменты для создания сайта. Причем бесплатные, в большинстве своем, хотя есть и платные cms.
С помощью движков вы можете получить красивый сайт просто так, не потратив ни копейки. Дело в том, что для того же WordPress очень много классных бесплатных шаблонов, так что вы можете получить профессиональный адаптивный шаблон за так, а если купите премиум-тему, то получите еще больше возможностей. Единственная загвоздка – такую тему все равно придется переделывать под себя, если вам нужен полностью уникальный дизайн.
Впрочем, сегодня в премиум-шаблоны встроены страницы, на которых вы можете изменить дизайн с помощью визуальных настроек, без всякого вмешательства в код. Если же у вас есть желание научиться самостоятельно создавать шаблоны для популярных движков и зарабатывать на этом, то предлагаю ознакомиться с нашим курсом по созданию таких шаблонов для , либо для .
На этом можно заканчивать этот небольшой обзор инструментов для создания сайтов. Хотя в этот список вполне можно занести фреймворки и различные библиотеки для упрощения работы с кодом, но о них можно говорить очень долго, сегодня же мы рассмотрели то, что практически всегда необходимо при разработке того или иного ресурса. Оставайтесь с нами, чтобы получать новости из мира сайтостроения и улучшать свои знания.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
От автора: на пути к тому, чтобы стать мастером CSS, вам нужно знать, как делается отладка и оптимизация CSS. Как вы диагностируете и устраняете проблемы с рендерингом? Как вы обеспечиваете, чтобы CSS не вызывал проблем с производительностью для конечных пользователей? И как вы обеспечиваете качество кода?
Знание того, какие инструменты использовать, поможет вам обеспечить, чтобы front-end работал оптимально. В этой статье мы рассмотрим браузерные инструменты для разработчиков Chrome, Safari, Firefox и Microsoft Edge.
Инструменты для разработчиков на базе браузера
Большинство настольных браузеров включают функцию инспекции элементов, которую вы можете использовать для отладки CSS. Активировать эту опцию вы можете, кликнув правой кнопкой мыши и выбрав пункт «Просмотреть элемент». Пользователи Mac также могут инспектировать элемент, кликнув на нем, удерживая клавишу Ctrl. На приведенном ниже рисунке показано, что вы можете видеть в Firefox Developer Edition.
Инструменты для разработчиков Firefox Developer Edition
JavaScript. Быстрый старт
В Firefox, Chrome и Safari вы также можете нажать Ctrl + Shift + I (Windows / Linux) или Cmd + Option + I (macOS), чтобы открыть панель инструментов разработчика. На приведенном ниже рисунке представлены инструменты для разработчиков Chrome.
Инструменты для разработчиков Chrome
В Microsoft Edge вы можете открыть инструменты для разработчиков, нажав клавишу F12, как показано ниже.
Инструменты для разработчиков Microsoft Edge
Вы также можете открыть инструменты для разработчиков каждого браузера, используя меню приложения:
Microsoft Edge: Инструменты > Инструменты для разработчиков
Firefox: Инструменты > Веб-разработчик
Chrome: Вид > Разработчикам
Safari: Разработка > Показать веб-инспектор
В Safari вам может потребоваться сначала включить меню «Разработка», перейдя Safari > Настройки > Дополнительно и установив флажок «Показать меню» в строке меню. Ниже приведено представление для инструментов разработчика Safari.
Инструменты для разработчиков Safari 11
После открытия интерфейса инструментов для разработчиков вам может понадобиться выбрать нужную панель:
Microsoft Edge: Проводник DOM
Firefox: Инспектор
Chrome: Элементы
Safari: Элементы
Вы поймете, что открыли нужную панель, когда вы увидите HTML с одной стороны панели, а правила CSS — с другой.
Примечание. Разметка, которую вы увидите в панели HTML, является представлением DOM. Оно генерируется, когда браузер завершает анализ документа и может отличаться от исходной разметки. Использовав «Просмотр исходного кола» вы можете увидеть исходную разметку, но имейте в виду, что для приложений JavaScript такой исходной разметки может не быть.
Использование панели стилей
Иногда элемент не выглядит так, как ожидалось. Возможно, не применилось типографическое изменение, или отступ вокруг абзаца меньше, чем вы хотели. Вы можете определить, какие правила влияют на элемент, используя панель веб-инспектора «Стили».
Панель «Стили» организована в различных браузерах вполне согласовано. В первую очередь перечисляются стандартные стили, если они есть. Это стили, заданные с помощью атрибута style HTML, будь то автором CSS или программно с помощью скриптов.
Авторские правила стилей предшествуют стилям агента пользователя. Стилями агента пользователя являются стили браузера по умолчанию. Они также оказывают влияние на внешний вид вашего сайта. (В Firefox вам может потребоваться выбрать параметр «Показать параметры браузера», чтобы просмотреть стили агента пользователя. Этот параметр можно найти в панели «Параметры панели инструментов».)
Свойства и значения сгруппированы по селектору. Рядом с каждым свойством установлен флажок, позволяющий включать или отключать определенные правила. Нажав на свойство или значение, вы можете изменить его, чтобы избежать необходимости редактировать, сохранять и перезагружать код.
Определение проблем каскада и наследования
Когда вы проверяете стили, вы можете заметить, что некоторые свойства вычеркнуты. Эти свойства были отменены либо правилом каскада, либо конфликтующим правилом, либо более специфичным селектором, как показано ниже.
Определение пар свойств и значений, которые были заменены другим объявлением
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
На изображении выше цвет фона, границы и размер шрифта блока отображаются перечеркнутыми. Эти объявления были переопределены теми, что находятся в блоке.close, который является приритетным для в нашем CSS.
Определение недействительных свойств и значений
Вы также можете использовать инспектор элементов для обнаружения недействительных или неподдерживаемых свойств и значений свойств. В Chromium-браузерах неверные правила CSS отображаются перечеркнутыми, а рядом выводится иконка предупреждения:
Определение недопустимого значения свойства CSS с помощью Chrome
Firefox также вычеркивает недействительные или неподдерживаемые свойства и значения. Firefox Developer Edition также использует иконку предупреждения, как показано ниже. Стандартный Firefox отображает ошибки аналогично, но не включает значок предупреждения.
Как Firefox Developer Edition отображает недопустимые свойства и значения
На скриншоте ниже в Safari перечеркнуты красной линией и выделены желтым фоном и иконкой предупреждения неподдерживаемые правила.
Недопустимое значение свойства CSS в Safari
Microsoft Edge вместо этого использует для указания неподдерживаемых свойств или значений волнистое подчеркивание.
Неподтвержденное значение свойства CSS в Microsoft Edge
Когда речь идет об основных конфликтах отладки и наследования, какой бы браузер вы ни выбрали, это не имеет значения. Однако рекомендую вам ознакомиться со всеми ними для тех редких случаях, когда вам нужно диагностировать проблему, специфичную для браузера.
Отладка адаптивных макетов
Лучше всего проводить тестирование на устройстве. Однако во время разработки полезно имитировать мобильные устройства с помощью настольного браузера. Все основные настольные браузеры включают режим адаптивной отладки.
Chrome
Chrome в инструментах для разработчиков предлагает функцию панели инструментов устройства. Чтобы использовать ее, кликните иконку устройства (на фото ниже) в верхнем левом углу рядом с иконкой «Выбрать элемент».
Иконка режима адаптивного дизайна Chrome
Режим устройства позволяет имитировать несколько видов устройств Android и iOS, включая более старые устройства, такие как iPhone 5 и Galaxy S5. Режим устройства также включает функцию дросселирования сети для приближения к разным скоростям соединения и возможность имитировать оффлайн режим.
Firefox
В Firefox аналогичный режим называется Режимом адаптивного дизайна. Его иконка напоминает ранние iPod. Вы найдете ее в правой части экрана в панели инструментов для разработчиков, как показано ниже.
Иконка режима адаптивного дизайна Firefox
В адаптивном режиме вы можете переключаться между портретной и альбомной ориентациями, имитировать события касания и делать скриншоты. Подобно Chrome, Firefox также позволяет разработчикам моделировать медленные соединения посредством дросселирования.
Microsoft Edge
Microsoft Edge позволяет имитировать мобильные устройства на Windows, такие как вкладка Surface — для этого используется вкладка «Эмуляция». Выберите «Телефон на Windows» в меню «Профиль браузера», как показано ниже.
SitePoint.com с использованием режима эмуляции устройства Microsoft Edge
В дополнение к выбору ориентации и разрешения режим эмуляции позволяет тестировать функции геолокации. Однако вы не можете использовать режим эмуляции для имитации условий различных сетевых соединений.
Safari
Режим адаптивного дизайна Safari находится в инструментах разработчиков. Он похож на режим эмуляции Firefox, но добавляет возможность имитировать iOS-устройства, как показано ниже.
SitePoint.com при просмотре с использованием режима адаптивного дизайна Safari
Чтобы войти в режим адаптивного дизайна Safari, выберите Разработка > Войти в режим адаптивного дизайна или Cmd + Ctrl + R.
Прогресс не стоит на месте. Практически каждый день мы видим рождение новых сервисов и программ, призванных облегчить работу представителям веб-профессий.
В этой статье я бы хотел рассказать вам о тех инструментах, которые требуются веб-дизайнеру для успешного и эффективного выполнения своей работы. Это особенно важно сегодня, так как технологии стремительно развиваются и на одном Фотошопе далеко не уедешь.
Инструменты и сервисы, о которых я расскажу вам в этой статье будут полезны не только для веб-дизайнеров, но и для онлайн-предпринимателей и рядовых блогеров.
Ну что готовы? Тогда начинаем!
Sketch
Sketch является одним из самых популярных инструментов веб-дизайнера. Он уже давно борется с Фотошоп за пальму первенства в разработке веб-интерфейсов.
По сравнению с детищем Adobe этот продукт обладает некоторыми преимуществами. Например, такими как быстродействие, низкая потребность в ресурсах и ориентация на проектирование веб-интерфейсов.
Единственный его минус заключается в поддержке только MacOS платформ. Продукт стоит $99, но тем не менее по отзывам юзеров Sketch стоит своих денег. Как и полагается с платными сервисами, разработчики предоставляют бесплатную пробную версию.
Macaw
Macaw - это инструмент, созданный дизайнерами для дизайнеров. Его главная особенность состоит в разработке сайтов без необходимости писать код. Как вы знаете, в последнее время границы между разработчиками и веб- дизайнерами сильно размылись. И Macaw дает почувствовать это в реальности.
При помощи Macaw вы сможете с адаптивной версткой без малейшего знания HTML и CSS. От вас лишь требуется работа по составлению внешнего вида, после чего приложение само сгенерирует исходный код.
Несомненным плюсом этого софта является простота в использовании. То есть, всего за полчаса вы сможете научиться создавать адаптивные шаблоны сайтов. И что больше всего удивляет, Macaw - абсолютно бесплатен!
UXPin
UXPin является полноценным инструментом веб-дизайнера. Он довольно универсален и не ограничен каким-то конкретным функционалом.
При помощи UXPin вы можете проектировать как сайты, так и приложения на iOS. Вы можете создавать как просто наброски проекта, так и более детальные шаблоны интерфейсов.
При необходимости есть возможность импортирования проектов с Photoshop и Sketch. Также при создании проекта с нуля вы можете использовать UX паттерны от таких фреймворков, как Bootstrapp, Foundation и др.
Marvel
Marvel - еще один инструмент по созданию эскизов сайтов и мобильных приложений. Главный плюс этого сервиса состоит в простоте использования. Вот что говорит об этом основатель сервиса:
Мы создали Marvel для того, чтобы людям было как можно легче претворять в жизнь свои маркетинговые идеи. Marvel - это гибкий инструмент, с помощью которого вы сделаете из простых картинок и эскизов самый настоящий интерактивный прототип сайта или приложения.
Особенностью Marvel является то, что при регистрации он просит доступ к аккаунту на Dropbox. Это нужно для дальнейшего импорта файлов проекта. Также несомненным плюсом этого инструмента является бесплатный базовый пакет.
Webflow
Webflow - это еще одно потрясающее веб-приложение, с помощью которого можно с легкостью создавать красивые и адаптивные веб-сайты. При этом вам не нужно обладать такими технологиями, как HTML и CSS.
Идея создания Webflow появилась у двух братьев, совместно занимающихся разработкой сайтов. Один из них был программистом, а другой веб-дизайнером. У них появилась идея создания такого приложения, с помощью которого можно составить внешний вид и каркас сайта не зная ничего о программировании. Ну что ж, у них это получилось очень хорошо.
Canva
Canva - это один из лучших платформ по работе с графическим дизайном. При помощи этого инструмента вы сможете создавать практические любые графические элементы.
Canva особенно полезен при создании обложек для электронных книг, инфографик, презентаций и много другого. Примечательно что над Canva работает известный в стартаперской тусовке человек, Гай Кавасаки.
Эта платформа по работе с графикой является условно-бесплатной. Среди тех графических элементов, которые предоставляет Canva есть как платные, так и бесплатные варианты.
Noun Project
The Noun Project может стать отличным источником поиска графических элементов для вашего сайта или блога. Также при помощи этого сервиса дизайнеры могут зарабатывать на своих работах.
Paper
Paper является одним из лучших iOS приложений для дизайнеров. С его помощью можно делать быстрые заметки, наброски, эскизы и многое другое.
Также fifty three, разработчик приложения, дополнительно предоставляет оригинальный и очень функциональный стилус.
Paper будет особенно полезен при создании быстрых набросков проекта, а также в повседневной работе дизайнера.
Astropad
Astropad может стать отличным решением для веб-дизайнеров, работающих на Mac. При помощи этого приложения вы можете сделать из вашего iPad или iPhone чертежную доску, которая будет синхронизирована с Маком.
Таким образом, вы можете проектировать сайты и приложения при помощи вашего стилуса и планшета, который в свою очередь подключен к Маку. Теперь работа будет доставлять намного больше удовольствия, да и ваши запястья отныне будут расслаблены.
Iconfinder
Iconfinder - один из лучших сервисов по предоставлению иконок для сайта. Его база насчитывает более 800 тыс. графических элементов. В ассортименте есть как платные, так и бесплатные варианты.
Можно смело сказать, что Iconfinder способен сэкономить вам кучу денег когда дело касается приобретения иконок для сайта.
365 Psd
365 Psd - один из самых богатых хранилищ бесплатных psd макетов и векторных изображений. Здесь можно найти всё начиная от фирменных логотипов и заканчивая изображениями живой и дикой природы.
Freepik
Freepik является еще одним хорошим источником бесплатных векторов, иконок и изображений. Почти все материалы можно заимствовать бесплатно с условием включения обратной ссылки. Количество предоставляемой графики просто впечатляет.
Adobe Color CC
Adobe Color CC , который в простонародье называют Adobe Kuler, уже давно стал для дизайнеров одним из незаменимых инструментов. Adobe Kuler здорово помогает в выборе цветов и их оттенков при работе над элементами интерфейса.
Особо полезной бывает функция выбора цветовых схем. Всего их насчитывается около семи. При помощи Adobe Kuler вы намного увереннее будете работать с цветами и подбирать их удачные оттенки.
Paletton
Paletton по сути выполняет ту же функцию что и предыдущий сервис - работа с веб-цветами. Paletton является отличной альтернативой Кулеру и имеет некоторые особенности. Новички могут попробовать оба варианта и выбрать понравившийся.
Google fonts
Google fonts является одним из самых любимых мной сервисов. Многие сайтостроители и дизайнеры уже давно оценили по достоинству очередной продукт Гугла.
Как вы знаете, шрифты относятся к интеллектуальной собственности. Это означает, что мы должны либо покупать шрифты для сайта, либо пользоваться бесплатными.
Покупать цифровые продукты у нас не очень любят, так что Google fonts может отлично выручить в этой ситуации. Но это нисколечко не зазорно, так как шрифты от Гугла очень добротные. Сейчас в их коллекции уже более 700 наименований. Да и разработчики со всего мира давно пристрастились к использованию этого сервиса.
В общем, если вам нужны шрифты для сайта, добро пожаловать в Google fonts!
Font Squirrel
На мой взгляд, Font Squirrel является самым крутым сервисом по предоставлению шрифтов. Его преимущество перед Гугл сервисом заключается в большей коллекции шрифтов.
Установка шрифтов на сайт - не самое простое дело, в связи с чем я записал отдельный видеоурок по этой теме. В нем я наглядно показываю, как скачивать и устанавливать шрифты с хранилищ Гугла и Font Squirrel. Для просмотра скринкаста нажмите на изображение внизу:
Tableau Public
Tableau Public - отличный инструмент по визуализации данных. С его помощью вы сможете превратить сухие данные в красочные и наглядные графики и схемы. Попробуйте. Уверен, посетители вашего сайта оценят.
Logopond
Важность логотипа сайта трудно переоценить. Именно при помощи него вы сможете произвести первое и самое устойчивое впечатление на ваших пользователей.
Но как создать логотип в духе вашей компании? Как сделать так, чтобы он был не только приятным и красивым, но и производил правильное впечатление на людей?
При помощи сервиса Logopond вы сможете найти много интересных идей и готовых решений по созданию логотипа для своего сайта или бренда. Logopond представляет собой архив готовых и существующих логотипов. Познакомившись с ними вы сможете почерпнуть много полезного и вдохновится творчеством успешных дизайнеров.
Siteinspire
В продолжение темы вдохновения... Порой веб-дизайнерам не хватает мотивации и свежих мыслей не только при создании логотипов, но и в больших проектах. То ли дело наступает так называемый творческий кризис.
В такие периоды может здорово помочь сервис Siteinspire . Он призван, так сказать, поднимать дух художника, так как наполнен великолепными работами лучших дизайнеров.
Вы сможете найти готовые проекты по тематикам, используемым решениям и многим другим критериям.
Color Hunter
Порой при создании тех или иных элементов интерфейса для своего сайта я часто сталкиваюсь с проблемой выбора правильного цвета или его оттенка. Бывает трудно сообразить, какой именно цвет подойдет лучше всего.
При этом в качестве решения я часто могу найти какое-нибудь удачное фото или изображение. Удачное сочетание цветов в нем я мог бы использовать на своем сайте. Но как добиться этого технически?
В этом вам поможет сервис Color Hunter . Вам достаточно загрузить понравившееся изображение и вуаля! Вы тут же вы получите данные обо всех использованных в ней цветах.
ColorZilla
ColorZilla является реально крутой вещью. Точнее, расширением. С его помощью вы сможете узнать обозначение любого понравившегося вам цвета, который вы встретили на каком-нибудь сайте.
После установки расширения вы увидите у себя в браузере значок пипетки. Нажав на нее вы активируете инструмент. Далее, вам достаточно нажать на ту область экрана, цвет которой вы хотите узнать. После этого обозначение определенного цвета тут же будет скопировано в буфер обмена. И наконец, остается лишь вставить ее в фотошоп, таблицу стилей или любое другое место. Минимум движений - максимум эффективности)
Resizer
В процессе разработки сайта приходится периодически проверять ее отображение на разных разрешениях экрана. Но неужели ради этого нужно задействовать все существующие устройства?
Вовсе нет. При помощи нового сервиса того же Гугла вы сможете увидеть отображение вашего сайта сразу на разных устройствах: ноутбуках, планшетах и смартфонах. Вам достаточно ввести адрес вашего сайта в форму и нажать Enter.
С помощью сервиса Resizer вы можете не бояться упустить из виду ту или иную часть вашей аудитории. Как говорится, все под контролем)
Итак, в этой статье я рассказал вам о 22 весьма полезных для веб-дизайнеров сервисах. Однако, большинство представленных мной инструментов будут также полезны для онлайн-предпринимателей и блогеров.
Буду рад если вы дополните этот список своими "любимцами". Также не стесняйтесь задавать вопросы в комментариях, если таковые имеются.
А на этом у меня все. Надеюсь, данная статья была для вас полезной. Если это так, сделайте репост данного материала в социальных сетях, чтобы больше людей получили от нее пользу.
Что бы вы делали, вдруг оказавшись на необитаемом острове в полной пустоте, имея в своём распоряжении лишь USB-накопитель, коммутируемый доступ в Интернет и простейший компьютер, на котором установлена только операционная система? Естественно, первым делом вы бы вызвали помощь через Интернет, ну, а дальше? Как бы вы наладили там свою работу дизайнера?
Ладно, на примере более правдоподобного сценария, наверное, легче выразить суть. Что, если ваш компьютер сломался, все данные и программы стёрлись, а вам через два дня сдавать проект? Или, может, вам хочется быть лёгким на подъём, сниматься с места в считанные минуты и отправляться в путь без долгих сборов, захватив с собой лишь смену белья и USB-накопитель. Будь при вас перечисленные ниже приложения, ни один из описанных сценариев не стал бы для вас серьёзной проблемой.
Приложения, включённые в этот список, могут пригодиться вам для решения любых задач - от программирования до создания графики, ведения бизнеса онлайн и управления проектами, - всё с помощью одной лишь флешки. И, хотя USB-накопители становятся всё объёмнее (по моим последним наблюдениям, 64-гигабайтная флешка уже стоит не так дорого, а она на 4 Гб вместительнее моей нынешней MacBook), вам по-прежнему нужны, в основном, особые программы для достижения полноценной портативности. Приложения в нашем списке как раз отвечают этим требованиям: переносные и достаточно компактные для USB-накопителя (часто и для совсем небольшого).
01. Программирование
-
Портативное издание Notepad++ (Portable Edition) - приложение для написания программ со всеми необходимыми для этого функциями. Составлено на языке C++, работает в Windows. Находится в свободном доступе, выпущено по лицензии GPL.
Портативная версия сохраняет все функции основной. Среди них: многоканальный просмотр данных, поддержка разнородной языковой среды, WYSIWYG-редактор (с отображением материала в конечном виде по ходу обработки), использование автодополнения, подсветка и свёртывание синтаксиса при кодировке, запоминание и воспроизведение выполненных операций, а также другие действия. Это отличное компактное приложение для написания программ.
-
Nvu Portable - портативное издание Nvu Web Authoring Software. Включает WYSIWYG-редактор и мощную систему управления файлами. Предназначено для не слишком технически грамотных пользователей, имеющих начальные (или нулевые) познания в области HTML и CSS-программирования.
Портативная версия сохраняет все функции и возможности основной. Работает в различных модификациях системы Windows, выпущена по лицензии GPL для свободного доступа.
-
CSS-редактор Oiko - CSS, (X)HTML и XML- редактор портативного формата с полным набором функций. Работает в модификациях Windows от 98 до XP. Вполне надёжный редактор с простым в использовании интерфейсом, отображением свойств и селекторов по группам, структурным деревом вашей CSS-кодировки, а также функцией текущего просмотра в браузерах IE и Mozilla.
02. Графика и мультимедийные проекты
-
Blender Portable - портативная версия программы генерации трёхмерных изображений Blender. Работает на платформе PortableApps.com. Портативный вариант сохраняет все функции основной версии Blender.
У Blender имеется ряд функций для построения скелетной анимации, расчёта математических моделей, создания мультипликации и генерации трёхмерных изображений. Окно приложения - полностью настраиваемое, а элементы его пользовательского интерфейса не перекрывают, не загораживают друг друга. Есть встроенный текстовый редактор для добавления аннотаций и правки Python-программ.
-
GIMP Portable - достойная малоформатная альтернатива Adobe Photoshop. Хотя к пользовательскому интерфейсу GIMP не сразу привыкаешь, в отличие от других программ фотообработки, тем не менее, он вполне удобен в использовании.
Портативная версия GIMP сохраняет все функции основной, в том числе, применение слоёв и фильтров. Может расширяться и дополняться, так же, как полный вариант программы.
-
Lightscreen Portable - портативное приложение для Windows, позволяющее вам делать моментальные снимки рабочего стола любого вашего компьютера. Выполняет пять операций с варьируемыми параметрами (фиксация окна, экрана и т. д.), каждая из которых запускается новым сочетанием клавиш быстрого доступа.
Lightscreen сохраняет изображения в форматах PNG, JPEG и нескольких других, наиболее привычных. Включает функцию замедленной съёмки экранного изображения. Процесс протекает незаметно до его активации с помощью клавиши быстрого доступа или их сочетания.
-
Portable Audacity - портативный звуковой редактор для Mac OS X. У Audacity множество различных функций, в том числе, запись "живого" аудиосигнала, редактирование (включая обработку и сведение неограниченного количества треков), наложение эффектов на звуковые файлы, а также настройка совместимости с различными форматами файлов.
Полная версия Audacity пригодна для компьютеров, на которых установлены Windows, Mac OS X и Linux, а портативная - только для платформ Mac OS X и Windows. С учётом того, что это - ПО свободного доступа, решение о разработке облегчённого варианта программы для Linux при наличии достаточного спроса, кажется разумным.
-
Portable Inkscape - портативный векторно-графический редактор. Набор функций Inkscape подобен оснащению других программ построения векторной графики, в том числе, Illustrator, CorelDraw и Xara X. Графические изображения сохраняются в формате SVG (Scalable Vector Graphics).
Особенности программы Inkscape подробно описаны на веб-сайте её разработчика, что очень пригодится новичкам. Портативная версия доступна только для Mac OS X, хотя полная имеется также для Linux и Windows.
-
FastStone Capture - портативная утилита, снимающая изображение с экрана. Зафиксировать можно что угодно: окна, полноэкранную картинку, участки прямоугольной формы, любые объекты, произвольно очерченные области и даже прокручиваемые окна (серьёзное преимущество перед многими другими программами фиксации экранных снимков, не только портативными).
Среди прочих функций - наложение текстовых пояснений на экранные снимки, их масштабирование, а также применение клавиш быстрого доступа для ряда операций. FastStone Capture работает только в системах Windows, но совместима с Windows98 и далее до Vista.
-
Fotografix - портативная графическая программа, позволяющая вам как редактировать, так и создавать изображения. Содержит набор чертёжных инструментов, допускает его расширение за счёт пользовательских настроек, выделение слоёв и каналов (в том числе, рабочих слоёв и трафаретов), а также включает различные прочие инструменты.
Одно из главных преимуществ Fotografix - минимальный объём её файла: всего 367 Кб. Если вам нужен действительно компактный и простой в использовании графический редактор, выбор в пользу Fotografix может быть верным решением. Однако, по своим возможностям эта программа уступает Photoshop, учитывайте данный нюанс.
-
Artweaver - портативная программа создания изображений из числа свободно распространяемого ПО. Она позволяет вам сразу превращать фотографии в рисунки и содержит большой набор чертёжных инструментов. Кроме того, вы можете конструировать новые инструменты, а также адаптировать уже имеющиеся.
Artweaver также допускает применение переходной прозрачности и слоёв, поддерживает целый ряд графических форматов (JPG, PNG, PSD и другие). Может расширяться посредством дополнительных модулей. Artweaver работает на платформах Windows 2000, XP или Vista.
-
VLC Media Player Portable - портативный проигрыватель аудио и видео файлов. Воспроизводит файлы MPEG-1, MPEG-2, MPEG-4, DivX, WMV, MP3 и множество других форматов. А в дополнение к функции проигрывания ваших медиа-файлов, он может служить и медиа-сервером, направляющим потоки данных одному или нескольким пользователям посредством протоколов IPv4 или IPv6.
-
Winamp Lite - портативная версия ПО для проигрывателя Winamp MP3. Темы оформления и дополнительные модули также портативны, что позволяет отлично использовать данную программу для прослушивания MP3-файлов в дороге. Эта версия не так проста в настройке, хотя и особых трудностей не доставляет.
03. Управление файлами
-
FileZilla Portable - ещё одно FTP-приложение от PortableApps.com. Поддерживает передачу файлов с помощью протоколов FTP, FTPS и SFTP, а также управление пересылкой объёмных файлов (более 4 Гб). Множество параметров конфигурации. Кроме того, поддерживает HTTP/1.1, SOCKS5 и FTP-proxy, и включает журналирование обращений к файлу, синхронизированный просмотр каталога и удалённый поиск файлов.
-
WinSCP Portable - FTP-программа для Windows, включающая протоколы SFTP и SCP, а также функцию синхронизации каталога. Не новая, но выполняет все привычные операции с файлами и имеет встроенный текстовый редактор. Также поддерживает использование пакетных файлов и интерфейса командной строки в дополнение к графическому пользовательскому интерфейсу.
-
7-Zip Portable - программа от PortableApps.com для сжатия и развёртывания архивных файлов нескольких типов, в том числе, 7z, ZIP, GZIP, BZIP2, TAR и RAR-файлов. Также поддерживает создание защищённых шифром 7z и ZIP-архивов, содержит функциональную систему управления файлами. Вместе с портативной версией доступны варианты локализации для 63 языков.
-
Toucan позволяет пользователям Windows дублировать и синхронизировать данные на двух носителях (таких как ваш жёсткий диск и USB-накопитель). Полностью портативное приложение, доступное для бесплатной загрузки. Имеет ряд дополнительных настроек для создания резервных копий файлов, в том числе, может сохранять все промежуточные варианты при их правке, сжимая их, а также применять особые нормативные схемы.
04. Тестирование
-
XAMPP - портативный полный веб-серверный пакет, включающий Apache, MySQL, PHP и Perl. Он поставляется с уже заданной конфигурацией, поэтому вам лишь нужно его разархивировать и установить. В него входят phpMyAdmin, FileZilla FTP Server, SQLite, Zend Optimizer и MiniPerl, помимо прочего. Это FTP, веб-сервер, и серверная база данных в одном полном пакете. Есть и облегчённая версия, включающая Apache, MySQL, phpMyAdmin, SQLite и их пакеты ПО.
-
Portable Firefox - портативное издание Mozilla Firefox. Отличное приложение для тех, кому приходится вести проекты на чужих компьютерах, так как оно позволяет вам сохранять и использовать собственные закладки, пароли и настройки. Эта версия программы не оставляет следов вашего пребывания на рабочем компьютере, поэтому можно смело сохранять там свои пароли и другие данные. Кажется, она даже приспосабливается к любым установленным вами расширениям. Приложение выпущено PortableApps.com, а значит, работает только на компьютерах с Windows.
Используя Portable Firefox, не забудьте также загрузить несколько доступных и полезных для расширения веб-среды дополнений.
* – Для просмотра и редактирования HTML-, CSS- и javascript-кодировки непосредственно на странице.
* – Основное средство просмотра CSS-свойств.
* – Панель инструментов для проверки корректности HTML-кодов в Firefox.
* – Дополнительное меню и панель различных инструментов для веб-разработчиков.
* – HTML/CSS-справочник, встроенный в Firefox.
-
Instant Rails - рабочая среда для Ruby, содержащая Ruby on Rails, Apache и MySQL, готовые к запуску. Вам лишь нужно поместить это приложение в выбранную директорию и ввести его в действие; установочных файлов нет вообще.
-
Server2Go - пакет серверного ПО, поставляемый в различных конфигурациях. Есть пакеты, состоящие из Apache, PHP и SQLite; Apache, PHP, SQLite и MySQL; Apache, PHP, SQLite, MySQL и Perl; а также мини-пакеты (содержащие только необходимые файлы) и пакет “plain vanilla” ("простое ванильное мороженое") - без PHP, Perl или MySQL.
-
Portable Chrome - портативная версия браузера Chrome от Google. Имеет все особенности основной версии Chrome, в том числе, стабильность и скорость работы, просмотр страниц с помощью вкладок и запуск механизма поиска прямо из адресной панели.
-
Opera@USB - портативная версия веб-браузера Opera. Очень напоминает вариант для настольных ПК, а её отличиям от основной версии не уделяеся особого внимания в описании приложения. Как полный, так и (вероятно) портативный варианты включают просмотр страниц через вкладки, управление паролями, встроенный механизм проверки правописания и поддерживают запоминание сеансов работы в браузере.
-
MoWeS Portable - портативный веб-сервер для Windows. Тестировался на её модификациях от Windows 98 до Vista. Бесплатное приложение, распространяемое по лицензии GNU/GPL. В основе этого сервера - Apache, MySQL и PHP. Главное отличие MoWeS от множества других портативных серверных пакетов в том, что вы можете включить в загружаемую конфигурацию MoWeS ряд программных опций, в том числе, TYPO3, WordPress, PHPMyAdmin, OS Commerce, Drupal, Mambo, Joomla! и другие.
05. Планирование и повышение производительности труда
-
Dia Portable - приложение для составления диаграмм, подобное Microsoft Visio. Однако, в отличие от Visio, оно больше предназначено для построения рабочих диаграмм, то есть, более пригодно для повседневного использования. Работает с XML-файлами, но также способно конвертировать файлы в форматы EPS, SVG, PNG, WMF и XFIG. Посредством Dia можно и распечатывать диаграммы (в том числе, многостраничные).
Совместимо с системами Linux, Unix и Windows. С помощью этого приложения можно вычерчивать UML-диаграммы, блок-схемы и графики других типов.
-
Mozilla Sunbird, Portable Edition - совместимое с Windows и Linux приложение-календарь. Автономный сервис-календарь с полным набором функций, отлично применимый для составления рабочих расписаний и управления проектами в обычном режиме.
-
ToDoList - портативный планировщик задач и диспетчер ведения проектов. Допускает неограниченное дробление задач для большего удобства работы. И сохраняет ваш список задач в формате XML, чтобы вы могли форматировать его с помощью таблиц стилей.
ToDoList постоянно дорабатывается, он подходит для ведения IT-проектов, так же, как и для управления менее специализированной средой (подобно методу GTD). В дополнение к версии на английском языке, приложение также издано на французском и испанском.
-
Task Coach Portable - ещё один планировщик для ведения списков ваших задач и текущих проектов. Среди его особенностей лёгкий в применении пользовательский интерфейс, позволяющий вам легко планировать и упорядочивать действия, отслеживать процесс их выполнения, а также рассчитывать бюджет конкретных проектов, назначать даты начала и завершения каждого из них и т. д.
06. Деловая активность
-
GnuCash Portable - ещё одно приложение от PortableApps.com. Сервис свободного доступа для ведения финансовой отчётности с большинством функций, присущих коммерческим программам финансового планирования. Позволяет вести бух. учёт методом двойной записи, обслуживать счета паевых инвестиционных фондов, работающих с акциями/облигациями, а также обрабатывать накладные и документацию по кредиторской/дебиторской задолженности.
GnuCash отлично подходит для ведения текущей бухгалтерии и бухгалтерской отчётности в секторе малого бизнеса. Журнал учёта оформлен в виде чековой книжки, чтобы новичкам было легче с ним освоиться. Также содержит формы отчётов, графиков, позволяет вести расчёты в различной валюте, сверять выписки с банковских счетов и т. д.
-
OpenOffice.org Portable - версия набора бизнес-программ открытого доступа OpenOffice.org от PortableApps.com. Включает все приложения основного варианта OpenOffice.org: Writer (текстовый процессор), Calc (табличный процессор), Impress (программа создания презентаций), Draw (графический редактор) и Base (база данных).
OpenOffice.org - отличная альтернатива Microsoft Office в виде бесплатного и свободно доступного пакета программ почти такой же высокой функциональности. Очень проста в использовании по сравнению со многими другими оффис-пакетами, к тому же, бесплатна.
-
AbiWord Portable - текстовый процессор, способный открывать файлы, созданные в различных текстовых программах, в том числе, Microsoft Word, Word Perfect, Open Document (OpenOffice.org), Office Open XML, RTF, HTML и других. Имеет все основные функции стандартного текстового процессора, включая проверку правописания и грамматики и авто-составление писем из фиксированных форм.
Портативная версия базируется на платформе PortableApps.com и работает в Windows 2000, XP или Vista. Имеются дополнительные модули для расширения функциональности AbiWord.
07. Другие полезные приложения
-
Sumatra PDF - компактное, портативное бесплатное средство просмотра PDF-файлов для Windows. Оно само по себе портативное, поэтому ещё более "портативной" его версии нет. Управляется сочетаниями клавиш быстрого доступа, и может конфигурироваться как ваша основная программа просмотра PDF-файлов.
-
Eraser Portable - портативная версия приложения обеспечения безопасности Eraser. Позволяет вам безвозвратно удалять файлы с жёсткого диска путём многократной записи поверх них назначенных шаблонов. Бесплатное приложение свободного доступа (с лицензией GNU General Public License). Очень полезный сервис для тех, кто постоянно работает с секретными данными, так как с его помощью можно начисто стереть все следы исходного файла.
-
OperaTor объединяет возможности Opera и Tor, чтобы вы могли анонимно просматривать веб-страницы с любого компьютера. На том, к которому подключён ваш USB-накопитель или другое портативное устройство, не остаются никакие ваши данные, что очень удобно при использовании ПК общего доступа. Приложение также содержит Polipo, веб-прокси с функцией кэширования, обеспечивающий анонимность и безопасность на дополнительном уровне.
-
Если вам нужно быть на связи с коллегами или клиентами, Portable Windows Live Messenger2009 отлично решит эту проблему. Эта версия сохраняет все функции Windows Live Messenger 2009, но выпускается в портативном формате, что позволяет подключать её с любого USB-накопителя. Однако, её возможности гораздо шире, чем у простого сервиса обмена мгновенными сообщениями: вы также можете пересылать документы, общаться посредством голосовых и видео-сообщений.
-
Foxit Reader V3.0 - продукция Portable Freeware Collection. Посредством Foxit можно на ходу открывать и читать PDF-документы. Но имейте в виду, что, если верить комментариям на странице загрузки данного приложения, его установка и конфигурирование могут вызывать затруднения.
-
KeePass - программа управления паролями для Windows. Бесплатная, открытого доступа, при этом поможет вам не потерять пароли к FPT-аккаунтам, почтовым электронным ящикам, веб-сайтам и т. д. Она сохраняет всё в одном файле базы данных, который можно открывать либо ключом, либо ключевым файлом.
-
TrueCrupt - портативная программа-шифровальщик, создающая виртуальный зашифрованный диск и устанавливающая его как настоящий. Можно зашифровать целый раздел или содержимое USB-накопителя. Приложение использует параллельную и конвейерную обработку данных, что делает их доступными так же быстро, как при отсутствии шифрования. Помните, что TrueCrypt запрашивает наличие права администраторского доступа к файлам для их открытия, что становится серьёзной проблемой в случае использования компьютеров общего доступа.
-
Pidgin Portable - портативная версия клиента отправки мгновенных сообщений Pidgin (бывшего Gaim). Поддерживает работу Интернет-пейджеров AOL, MSN, ICQ, Jabber и Yahoo. Её можно дополнить модулями шифрования для безопасного обмена мгновенными сообщениями.
-
WinPT Portable позволяет вам шифровать файлы на вашем флеш-накопителе, а затем разблокировать их без установки специального ПО. Сервис всё ещё дорабатывается, поэтому допускает сбои в работе, но, в целом по отзывам, сконструирован очень грамотно. Единственное условие - параллельный запуск , также доступного в виде портативного приложения.
-
Trillian Anywhere позволяет вам подключать клиент отправки мгновенных сообщений Trillian с USB-накопителя или диска. Благодаря ему, можно захватить с собой список своих контактов и настройки куда угодно, и пользоваться портативной версией Trillian с полным набором функций на любом компьютере с Интернет-подключением.
Для того, чтобы обеспечить качественную веб-разработку, можно пользоваться самыми разными инструментами. Сегодня некоторые из мастеров до сих пор продолжают использовать самый обыкновенный блокнот, однако это уже не слишком удобно, так как работа из-за этого становится весьма медленной. В современных условиях разрабатывать сайты необходимо как можно быстрее, делать это качественно и в максимально сжатые сроки.
Для этого стали появляться различные инструменты, рассчитанные для веб-разработки. С их помощью можно обеспечить более эффективную и продуктивную работу.
Firebug
Это приложение представляет собой плагин, разработанный создателями браузера Firefox, им регулярно пользуются многие разработчики. Он отличается превосходной функциональностью. За счет данного приложения можно налаживать работу, редактировать, мониторить сайты, разработанные на основе HTML, JavaScript, CSS и на базе других платформ, причем делать это можно непосредственно в самом браузере. Он прекрасно подходит не только для создания сайтов, но и для их дизайнерского оформления.
HTML Entity Character Lookup
Обеспечивает полную проверку всех символов, находящихся на той или иной интернет странице. За счет данного инструмента можно сразу проверять порядка 250 строк написанного кода. Этим приложением можно также пользоваться на платформе Macintosh, что делает его еще более удобным.
Adobe Edge Inspect
Данная платформа довольно новая, она может использоваться для разработки интерактивных интернет-ресурсов, особенно на основе флеш-приложений. За счет этого продукта можно разрабатывать ресурсы как для компьютеров, так и для мобильных устройств. С его помощью можно создать не слишком объемный ресурс, который даже на мобильном телефоне будет загружаться в течение нескольких секунд. Эта платформа предусматривает использование ресурсов от CSS и HTML.
Prefix Free
Своего собственного функционала не имеет, но за счет этого приложения можно воспользоваться разработкой на основе CSS без использования разного рода префиксов. По большому счету, этот продукт работает практически незаметно для самого разработчика, добавляя все необходимые префиксы при написании кода в автоматическом режиме.
Cloud9 IDE
Этот инструмент имеет весьма широкий функционал, который позволяет сделать весьма удобной работу над объемными проектами. За счет него над ними могут работать сразу несколько мастеров, которые могут вносить определенные изменения в режиме реального времени. Во многом за счет этого данное приложение является наиболее популярным на сегодняшний день. Оно имеет редактор, позволяющий работать с различными платформами. При желании структуру сайта можно просмотреть в виде дерева. В нем также имеется встроенный FTP-клиент, за счет чего производится обмен данными через компьютеры, расположенные в разных точках планеты.
PixelDropr
Это приложение было создано специалистами Adobe, оно не настолько требовательно к ресурсам компьютера, как Photoshop, однако по функционалу программа не слишком сильно отличается от данного графического редактора. С его помощью можно создавать определенные графические элементы интернет-ресурсов:
- Иллюстрации;
- Иконки;
- Кнопки.
Foundation3
С помощью данной программы можно буквально в течение нескольких секунд создать коды, позволяющие надежно и стабильно функционировать адаптивным проектам. За счет этого приложения удается быстро построить макет, предназначенный для работы со стилями, сделать ее очень гибкой и весьма удобной. Он прекрасно совмещается с SASS и CSS.
Fontello
Одна из немногих программ, а многие специалисты говорят, что она единственная в своем роде, позволяющая генерировать иконки. Разработчику вполне достаточно выбрать требующиеся значки, после чего приложение скомпилирует их с специальный шрифт. За счет него можно внести изменения в коды символов, их начертания и названия.
Cloud Comp
Хотя этот инструмент и не является русифицированным, он очень понятен и прост в использовании. За счет него можно делиться исходным кодом ресурса, делать приложения доступными для других пользователей. Эту программу разрабатывали специально для того, чтобы дизайнеры могли обмениваться между собой опытом, для предоставления клиентам прав доступа и так далее.
Browser Shots
Создан специально для создания скриншотов работы сайта в самых разных браузерах, которые используют пользователи для серфинга в интернете. Он создает изображения в режиме реального времени, их разрешения бывают двух основных видов – 800х600 и 1024х768. Для правильного использования программы вполне достаточно ввести адрес виртуального ресурса в соответствующую строку, после чего программа выдаст все сделанные изображения. За счет данного приложения удастся очень быстро установить, как именно работает ресурс в различных браузерах, внести в исходный код соответствующие правки для его корректного отображения.
Поиск
Мы можем оповещать вас о новых статьях,