Sevdresscode.ru

Финансы и бизнес
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Инструменты разработки сайта

Подборка инструментов и ресурсов для веб-разработчиков. Часть первая. Дизайн, кодинг

    Подборки , 6 января 2017 в 22:28

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

Дизайн

Разработка дизайна — это, пожалуй, самая творческая часть работы над сайтом, и поэтому представленные ниже ресурсы будут так или иначе связаны с творчеством.

Subtle Patterns

Удивительный ресурс для поиска высококачественных текстурированных узоров. Многие известные дизайнеры внесли свой вклад в создание этой коллекции. Да, и поиск по сайту также весьма забавен.

Blokk Font

Blokk — это специальный шрифт для демонстрационных макетов, он является отличной альтернативой Lorem Ipsum. Он может пригодиться в том случае, если шрифт на макете будет выглядеть не очень красиво.

Freepik

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

Awesome Images

Бесценная коллекция фотоматериалов. В ней более 20 ресурсов — все они бесплатны и с понятными лицензиями.

Google Fonts

Многие, наверное, уже знают об этом ресурсе, но мы не могли пропустить его. Это библиотека шрифтов Google, которая на сегодняшний день является лучшим местом для поиска web-friendly шрифтов.

By People

By People — это сеть полезных, постоянно обновляемых ресурсов. By People собирает красивые, чистые и обновленные графические элементы, фрагменты кода и полезные ресурсы, собирая все это в списки, которые можно скачать напрямую с сайта.

Snipplr

Snipplr предлагает своим пользователям возможность загружать куски полезного кода и делиться ими с остальными. Есть тысячи фрагментов на JavaScript, PHP, CSS, Ruby и других языках.

HailPixel

Интересная в использовании палитра цветов. Она интересным способом обрабатывает выбранный цветовой тон, яркость и насыщенность цвета.

Lokes HD Hakar

Удивительный онлайн-сервис с блестящей идеей: Color Thief позволяет загрузить изображение и получить цветовую палитру для него, а также узнать его доминирующий цвет. Очень полезно для принятия дизайнерских решений.

Dribbble

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

Bootstrap

Фронтэнд-фреймворк для создания отзывчивых веб-сайтов. Ваши сайты хорошо выглядят как на маленьких, так и на огромных экранах благодаря хорошо проработанной сеточной системе. Есть много дополнительных ресурсов и плагинов.

Patternizer

Это приложение позволяет создавать простые в использовании узоры. Их можно сохранить и выложить в общий доступ.

Читать еще:  Узнать активность сайта

Project Parfait

Project Parfait является продуктом Adobe и дает нам возможность получить важную информацию о PSD прямо в браузере. Тем не менее, он не поддерживает редактирование PSD (по крайней мере, пока).

Кодинг

Проверенные инструменты и ресурсы для написания кода.

Emmet

Emmet — это плагин для многих популярных текстовых редакторов, который значительно повышает удобство написания HTML-кода.

JavaScript Beautifier

Это инструмент, который сделает кусок вашего JavaScript- или HTML-кода более читаемым и производительным. Также стоит обратить внимание на этот JSON-редактор.

CodePen

CodePen стал платформой для демонстрации впечатляющих CSS3- и JS-демок. Если вы ищете вдохновение (или просто классные кнопки), посетите CodePen.

W3 Validator

Validator представляет собой бесплатный сервис от W3C, который помогает проверить правильность веб-документов. Он может обрабатывать документы, написанные на большинстве языков разметки, и дать вам представление о том, что может быть не так с кодом. При поиске ошибок в коде вы в первую очередь должны воспользоваться данным инструментом.

MinCSS

MinCSS — это инструмент, который по заданному URL загружает страницу и её CSS и выясняет, какие из селекторов не используются. Результатом работы является оптимизированная копия оригинала CSS.

Clean CSS

Clean CSS — это набор инструментов для форматирования и оптимизации кода, причём написанного не только на CSS.

CSSTidy

CSS Tidy — это оптимизатор и парсер CSS-кода, доступный для Windows, Linux и macOS. Управлять им можно как из командной строки, так и через PHP-скрипт.

Koala App

Замечательное кросс-платформенное приложение, которое автоматически компилирует Less/SASS-файлы.

JSFiddle

JSFiddle — это удивительное место для написания и распространения кода. Сайт предоставляет панели для написания CSS-, HTML- и JS-кода вашего проекта. JSFiddle также позволяет подключать библиотеки, такие как JQuery, AngularJS и т.п. После этого вы можете запустить код в самом приложении или сохранить его и поделиться с другими.

Это инструмент для тестирования API. Вы можете выбрать метод запроса, настраиваете заголовки и POST-параметры, добавляете обычную или OAuth авторизацию учетных данных.

SublimeText

Sublime Text представляет собой мощный текстовый редактор, который предоставляет огромные возможности для работы с кодом. В последнее время он набирает популярность, но не стоит забывать и об Atom и Brackets. Разумеется, нельзя не упомянуть легендарные VIM и Emacs.

Cloud9

Cloud9 является облачной средой разработки, дающей доступ к терминалу вашей собственной Ubuntu VM, а также к другим мощным функциям. В качестве альтернативы можно рассматривать Nitrous.io, Codio и Code Anywhere.

Heroku

Heroku стал первым крупным игроком во время взрыва популярности PaaS (Platform-as-a-Service). До этого приходилось полагаться на дешевых и ненадёжных хостинг-провайдеров (или создавать собственные сервера).

Vagrant

Vagrant является инструментом для построения полных сред разработки. Vagrant сокращает время разработки и установки среды. Существует еще один популярный способ для запуска виртуальных машин с другими операционными системами на компьютере — это VirtualBox.

Читать еще:  Адвего официальный сайт как работать отзывы

§ 13. Инструменты для разработки wеb-сайтов

Вернемся к разговору о wеb-сайтах и узнаем, с помощью каких средств можно самостоятельно создать сайт.

Web-сайт — это совокупность гипертекстовых документов, которые рассматриваются как единое целое и определяются одним URL-aдpecoм.

Содержимое wеb-сайта может включать в себя все доступные в настоящее время типы информации, а также интерактивные средства для ведения диалога с пользователем (форумы, гостевые книги, формы обратной связи и т. д.). Помимо этого, каждый сайт может иметь индивидуальный дизайн (хотя следует заметить, что часть сайтов создается с применением готовых шаблонов).

Понятие языка разметки гипертекста

В предыдущем параграфе уже говорилось о том, что основой любого сайта является язык разметки гипертекста HTML (HyperText Markup Language). HTML включает в себя несколько десятков так называемых тегов (команд), каждый из которых определяет внешний вид отдельного элемента страницы: текста, изображения, таблицы, списка и др. Например, следующая запись в НТМL-документе:

означает, что указанный текст («Моя домашняя страница») должен отображаться в окне браузера шрифтом Arial, цвет шрифта — красный.

Визуальные НТМL-редакторы

Для создания сайта необязательно знать язык HTML. Существует множество доступных визуальных НТМL-редакторов, их другое название — WYSIWYG-peдaктopы, позволяющих создавать сайты без знания данного языка. WYSIWYG расшифровывается как: What You See Is What You Get — что видишь, то и получаешь. Работа в таких редакторах происходит с визуальными формами, а не с тегами. Например, чтобы сделать шрифт текста жирным, надо просто выделить этот текст и нажать соответствующую кнопку в меню редактора. После этого редактор вставит в НТМL-код необходимые теги, а разработчик сайта увидит на странице уже итоговый результат.

Визуальный HTML редактор (WYSIWYG-peдaктop) — прикладная программа, в которой содержимое wеb-страницы строится из визуальных форм и в процессе редактирования автоматически формируется НТМL-код страницы, текущий вид которой сразу отображается на экране.

Правда, у визуальных редакторов есть ряд недостатков. В частности, сгенерированный ими НТМL-код далеко не всегда бывает оптимальным, т. е. размер файла может получиться гораздо больше, чем при его непосредственном описании на языке HTML. Кроме того, в этих редакторах есть масса настроек, которые несведущему человеку будут просто непонятны. Например, человек, впервые создающий сайт, может не знать, что такое «якорь» ссылки или «альтернативный текст» изображения. Поэтому хоть какие-то минимальные сведения об используемых терминах необходимо предварительно получить.

Существует достаточно много программных продуктов, позволяющих в визуальном режиме создавать макет сайта и заполнять его содержимым. Кратко опишем наиболее распространенные.

1. Adobe Dreamweaver — один из наиболее популярных коммерческих программных продуктов, предназначенных для разработки сайтов. Изначально был разработан и поддерживался компанией Macromedia (до 2005 г.). Следующие версии, начиная с Dreamweaver СSЗ (2007 г.), выпускает компания Adobe. Редактор содержит огромный выбор всевозможных инструментов, удобный интерфейс, тонкие настройки, позволяющие подогнать программу под нужды wеЬ-мастера, а также встроенный FTP-менеджер для загрузки файлов на сервер.

Читать еще:  Лучшие сайты для работы

Начинающий пользователь может создавать страницы практически без знания HTML — добавляя элементы страницы и указывая их параметры с помощью встроенного мастера (рис. 2. 7).

Рис. 2.7. Мастер создания таблиц пакета Adobe Dreamweaver CS3

Официальный сайт для загрузки — http://www.adobe.com/ downloads/.

2. Microsoft Office SharePoint Designer 2007 — визуальный HTML-редактор и программа для web-дизайна от компании Microsoft (рис. 2.8). Является одним из компонентов пакета Microsoft Office 2007, но при этом требует отдельной установки. Данный пакет относится к числу достаточно сложных редакторов, позволяющих создавать не только простейшие wеЬ-страницы, но и полноценные web-узлы, предназначенные для коллективной работы пользователей. Более новая версия программы Microsoft Office SharePoint Designer 2010 максимально завязана на совместную работу большого числа людей над одним проектом, что требует установки соответствующего программного обеспечения на сервере, где хранится данный проект.

Рис. 2.8. Окно программы Microsoft Office SharePoint Designer 2007 после первого запуска

Изначально этот продукт относился к разряду коммерческих, но с 2009 года стал распространяться бесплатно для всех желающих на официальном сайте Microsoft Office (http://office.microsoft. com/ru-ru/sharepoint-designer-help).

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

Встроенный FTP-менеджер позволяет быстро загрузить готовый сайт на сервер. Сайты, сделанные в WebPageMaker-3.0.3, одинаково корректно отображаются во всех основных типах браузеров.

К одному из существенных достоинств редактора относится очень небольшой объем дистрибутива (всего 3,5 Мбайт). Кроме того, существует так называемая версия portable, которая не требует установки (ее объем — 6 Мбайт).

4. Nvu — свободно распространяемый визуальный HTML-редактор. Преимущество редактора Nvu состоит в его кроссплатфор-менности: есть версии под Linux, Microsoft Windows и MacOS.

Помимо типовых для wеb-редакторов функций, Nvu содержит интегрированный FTP-менеджер, мощную поддержку для форм, таблиц и шаблонов. Редактор очень прост в использовании. В последние несколько лет Nvu не развивается, но потенциал этого редактора продолжает реализовываться в редакторе KompoZer.

5. KompoZer (рис. 2.9) — ответвление от редактора Nvu. KompoZer является свободно распространяемой wеb-авторской системой, которая сочетает в себе менеджер для wеb-файлов и визуальный редактор. По сравнению с Nvu, KompoZer создает более короткий код разметки.

Рис. 2.9. Окно программы KompoZer

KompoZer чрезвычайно прост в использовании, что делает его привлекательным для пользователей, которые хотят создавать сайты без получения серьезных технических знаний. KompoZer может рассматриваться в качестве редактора для создания небольших wеb-проектов. Объем дистрибутива — 7 Мбайт.

Ссылка на основную публикацию
Adblock
detector