КМ. №3 Базовый инструментарий. Онлайн редакторы и генераторы

1. Десктопные HTML редакторы
2. Текстовые HTML-редакторы
3. Визуальные HTML-редакторы
4. Создание простой страницы
7. Онлайн графические редакторы
9. векторный редактор Method.ac
10. Сервис выбора цветовой гаммы Adobe Color Themes
11. Сервисы для создания скриншота веб-страницы целиком
13. Генераторы CSS-кода
15. Бесплатные шаблоны дизайна

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

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

Для полноценной работы веб-дизайнеру необходимо:

• HTML-редактор, рекомендуется Adobe DreamWeaver.
• Графические редакторы:
  • Редактор растровой графики и GIF-анимации, рекомендуется Adobe Photoshop.
  • Редактор для создания анимированной графики, рекомендуется программа Adobe Flash.

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

Десктопные HTML редакторы

Программы для создания сайтов есть двух категорий - текстовые и визуальные HTML-редакторы.

Текстовые HTML-редакторы

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

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

Недостатки в текстовых html-редакторов:

• Отсутствие возможности видеть результат непосредственно при написании кода страницы. Тогда, нужно открывать браузер и уже в нем смотреть, как выглядит сайт на данном этапе.
• Обязательное знание языка HTML. Без предварительного изучения HTML работать будет в рай сложно. Поэтому, нужно приобрести учебник языка HTML и только после его прочтения приступать к созданию сайта в текстовом редакторе.

Визуальные HTML-редакторы

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

Признанным лидером среди визуальных HTML-редакторов является Adobe Dreamweaver, благодаря дружественному интерфейсу, генерации минимально избыточного кода, автоматической генерации скриптов и многих удобств. Впрочем, в какой программе создавать сайт, решает разработчик можно воспользоваться бесплатными оффлайн и онлайн программами.

Adobe Dreamweaver - мощное программное обеспечение для веб-дизайна и создания визуальных проектов. Программа Adobe Dreamweaver помогает разрабатывать реалистичную среду для интерактивного просмотра, управлять проектами на уровне пикселов или с помощью специально созданного кода. Встроенные подсказки в Adobe Dreamweaver позволяют более точно создавать код в HTML, JavaScript, Ajax, Spry, jQuery и Prototype.

Adobe Dreamweaver предлагает «резиновые» макеты и панель «многоэкранной просмотр» в целях одновременного создания проектов для телефонов, планшетных устройств и компьютеров. Dreamweaver полностью поддерживает HTML5, а это дает новые возможности в использовании онлайн-видео, анимации, что, в свою очередь, придаст уникальность любому сайту. В программу присоединен jQuery, следовательно пользователь с легкостью может использовать Java-скрипты при создании веб-страницы.

Для начинающих Dreamweaver - просто находка! При создании первых сайтов он способен значительно облегчить обучение. Есть сервис подсказок и приличное количество шаблонов, элементов оформления, скриптов - с помощью всего этого легко, как говорится, «набить руку». Очень простые страницы не заберут у пользователя много времени и сил.

Опытные веб-разработчики, используя Dreamweaver, имеют гораздо больше возможностей. Расширенная поддержка jQuery Mobile и Adobe PhoneGap позволяет разрабатывать страницы под различные операционные системы (iOS и Android) и приложения. Есть уникальная панель «многоэкранного просмотра», с помощью которой возможно оптимизировать сайт под различные устройства, независимо от размеров их экранов (до мобильных телефонов) и при этом сайт будет выглядеть так, как нужно.

Dreamweaver поддерживает известные движки, такие как WordPress и Joomla. Изменения можно вносить непосредственно в код сайта, улучшает оптимизацию.

Создание простой страницы

Секрет быстрого обучения состоит в том, что нет необходимости изучать все HTML. Чтобы создать достаточно функциональный сайт, не нужно знать все HTML - там много нюансов, которые осложняют жизнь и их можно опустить. Если знать хотя бы 20% из всего HTML, то можно использовать его, как используют 80% разработчиков сайтов. Остальные 20% можно оставить программистам и профессионалам.

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

Для помощи разработчикам начинающим существует много онлайн-сервисов, которые предоставляют определенные элементы (код, структуру, изображения, элементы), что в конечном итоге имеют приличное качество.

Преимущества онлайн-сервисов:

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

Онлайн графические редакторы

растровый редактор PIXLR.com

Pixlr Editor - популярный графический онлайн-фоторедактор, что имеет интерфейс на 13 языках. Pixlr Editor является бесплатной облегченной версией Photoshop, которая не требует установки на компьютер. Существует облегченная версия редактора Pixlr Express, а также простой фоторедактор Pixlr-o-matic для наложения эффектов и фильтров в стиле Instagram.

векторный редактор Method.ac

Method Draw - Веб приложение для работы с векторной графикой в режиме онлайн. Сервис имеет достаточный набор инструментов для создания SVG изображений, также существует возможность открывать обычные растровые изображения и создавать на их основе векторные рисунки. Внешне Method Draw напоминает Adobe Illustrator.

Сервис выбора цветовой гаммы Adobe Color Themes

Adobe Color - веб-сервис, позволяющий создавать пробные и окончательные варианты цветовых тем для использования в проекте и предоставлять доступ к ним. В Adobe Color CC встроено панель «Цвет», что позволяет просматривать и применять цветовые темы или помечены как избранные в приложении Adobe Color. Дополнительные сведения о Adobe Color.

Сервисы для создания скриншота веб-страницы целиком

Онлайн редакторы для работы с HTML-кодом

Генератор структуры HTML-страницы CssTemplater.com

Генератор HTML и CSS шаблонов (макетов) - это онлайн-сервис, который генерирует архив, содержащий 2 файла: HTML и CSS, которые имеют базовое разметку (каркас) для будущего сайта.

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

Во всех макетах используется только блочная верстка. Макеты, предлагаемых Генератором HTML и CSS шаблонов, протестированы и они корректно отображаются в современных браузерах.

• 

  Типовая структура страницы для HTML4

• 

  Типовая структура страницы для HTML5

Генераторы CSS-кода

Генераторы иконок FavIcon

Favicon - это небольшая картинка (иконка) в специальном формате ICO, которая для соответствующего сайта отображается на вкладке браузера, в адресной строке браузера, в "Избранном" или в "Закладка", в странице выдачи результатов поисковой системы вместо стандартной иконки, общей для всех . Основной формат картинки для favicon.ico - 16х16 пикселей, 256 цветов или TrueColor.

Для создания иконки можно использовать несколько подходов:

Создать картинку в формате JPG, PNG, GIF и конвертировать в формат ICO. http://www.convertico.com/ http://www.icoconverter.com/ http://converticon.com/ Воспользоваться онлайн редактором создания иконок. http://www.favicongenerator.com/ http://favicon.ru/ http://www.favicon.cc/ Скачать готовую иконку, которые распространяются бесплатно http://www.iconsearch.ru/ http://www.freefavicon.com/ http://faviconka.ru/

Бесплатные шаблоны дизайна

практические уроки

порядок работы

1. Ознакомиться с представленными графическими редакторами. Создать эскиз и определенный элемент будущего сайта - логотип, баннер, фотоколлаж.
2. Сделать скриншот страницы, содержащей интересные элементы или дизайнерское решение, которые можно взять за образец.
3. С помощью генератора структуры создать начальный макет страницы. Ознакомиться с сгенерированными тегами и стилями. Внести собственные изменения относительно размеров, цветов, наполнения.
4. С помощью HTML-редактора поставить созданы графические элементы в соответствующие места страницы.
5. Разместить тестовую страницу на хостинге. Результат выполнения демонстрировать в Интернете.

содержание отчета

1. Название и цель выполнения лабораторной работы.
2. Фото выполненных работ.
3. Отметить Интернет-адрес и зачем созданной тестовой страницы.
4. В заключении оценить удобство и возможности редакторов.