Среда создания сайтов


Оглавление (нажмите, чтобы открыть):

Что такое среда разработки сайта

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

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

Сайты сети Интернет в современных условиях разрабатывают с использованием именно такой среды создания сайтов. Основу каждого современного Интернет-ресурса составляет Content Management Software или CMS, система управления контентом. Она представляет собой компьютерную программу, определяющую строение сайта и способы его обслуживания. Существует множество уже разработанных CMS. Среди них есть даже такие, которые предлагаются бесплатно. При написании сайта можно использовать одну из существующих CMS или разработать свою. Существующие стандартные системы нередко оказываются с недостаточным функционалом или какими-либо другими недостатками. Среда веб разработки сайта понадобится только в том случае, когда необходимо разрабатывать собственную CMS. Как и в случае с любой другой программой, разработка CMS состоит из нескольких этапов, самый трудоемкий и дорогостоящий из которых — отладка. Именно отладку может заметно облегчить использование подходящей среды. Программист отлаживает сформированный сайт, проверяя корректность его работы в условиях, близких к реальным. Это позволяет быстро найти и исправить ошибки, которые были бы пропущены в других случаях.

Работая в правильно подобранной среде web разработки, программист может получить в свое распоряжение также ряд инструментов для большего удобства создания графического интерфейса пользователя. Так называемая визуальная среда создания сайтов позволяет создавать внешний вид и интерфейс сайта как в детском конструкторе. При этом программист видит сайт сразу в том виде, в котором его увидит заказчик. Тем самым заметно экономится время и повышается эффективность работы программиста.

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

Есть такое понятие, как интегрированная среда веб разработки сайтов. Что значит интегрированная?

Это значит, что они включают в себя весь инструментарий по разработке CMS: компилятор, редактор кода и уже упомянутый выше отладчик. Термин «интегрированная» по отношению к среде web разработки все же довольно размыт и точной формулировке поддается слабо, но общий смысл ясен: в интегрированной среде программисту работать удобнее и труд его более эффективен. Причем другие средства разработки уже не понадобятся.

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

Поэтому не стоит подвергать свое время и силы большим и неоправданным затратам. Обращайтесь к нашим профессиональным специалистам, которые все сделают быстро и в срок.

Среда создания сайтов

Для разработки и реализации сайта были выбраны следующие программные средства:

– программное средство open server;

– язык разметки гипертекста html и css;

– язык программирования php;

– adobe photoshop CS6;

Denwer — набор дистрибутивов и программная оболочка, предназначенные для создания и отладки сайтов на локальном ПК (без необходимости подключения к сети Интернет).

Возможности Denwer: Сразу после установки доступен полностью работающий web-сервер Apache, работающий на локальном компьютере, на котором может работать неограниченное количество сайтов, что очень эффективно для разработки и отладки сценариев PHP без загрузки его файлов на удаленный сервер. При запуске создается виртуальный диск (по умолчанию Z:), где хранятся все файлы проектов.

Особенностью, отличающей Denwer от других WAMP-дистрибутивов, является автоматическая правка системного файла hosts, являющегося локальным аналогом DNS-сервера, что позволяет обращаться к локальным сайтом, работающим под управлением Денвера, по именам, совпадающим с именем папки, расположенной в каталоге home Denwerа [13].

Notepad++ — свободный текстовый редактор с открытым исходным кодом для Windows с подсветкой синтаксиса большого количества языков программирования и разметки. Он базируется на компоненте Scintilla, написан на C++ с использованием STL, а также Win32 API и распространяется под лицензией GPL. Базовая функциональность программы может быть расширена как за счёт плагинов, так и сторонних модулей, таких как компиляторы и препроцессоры [2].

OpenServer — это портативная серверная платформа и программная среда, созданная специально для web-разработчиков с учётом их рекомендаций и пожеланий.

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

Включает в себя: Apache, nginx, PHP, MySQL, phpMyAdmin, FTP-сервер FileZilla [12].

— не требует установки (портативность);

— возможность работы с usb накопителя;

— одновременная работа с denwer, xampp и т.д.;

— работа на локальном / сетевом / внешнем ip адресе;

— поддержка ssl без всякой дополнительной настройки;

— создание домена путем создания обычной папки;

— поддержка кириллических доменов;

— поддержка доменных указателей;

— защита сервера от внешнего доступа;

— пакет из более 40 портативных программ;

HTML (от англ. Hyper Text Markup Language — «язык гипертекстовой разметки») — стандартный язык разметки документов во Всемирной паутине. Большинство web-страниц содержат описание разметки на языке HTML (или XHTML). Язык HTML интерпретируется браузерами и отображается в виде документа в удобной для человека форме.

Язык HTML является приложением SGML (стандартного обобщённого языка разметки) и соответствует международному стандарту ISO8879.

Во всемирной паутине HTML-страницы, как правило, передаются браузерам от сервера по протоколам HTTP или HTTPS, в виде простого текста или с использованием сжатия.

Текстовые документы, содержащие разметку на языке HTML (такие документы традиционно имеют расширение.html или.htm), обрабатываются специальными приложениями, которые отображают документ в его форматированном виде. Такие приложения, называемые «браузерами» или «интернет — обозревателями», обычно предоставляют пользователю удобный интерфейс для запроса web — страниц, их просмотра (и вывода на иные

внешние устройства) и, при необходимости, отправки введённых пользователем данных на сервер. Наиболее популярными на сегодняшний день браузерами являются Google Chrome, Mozilla Firefox, Opera, Internet Explorer и Safari [3].

CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) формальный язык описания внешнего вида документа, написанного с использованием языка разметки.

Преимущественно используется как средство описания, оформления внешнего вида web-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML — документам, например, к SVG или XUL.

CSS используется создателями web — страниц для задания цветов, шрифтов, расположения отдельных блоков и других аспектов представления внешнего вида этих web-страниц. Основной целью разработки CSS являлось разделение описания логической структуры web-страницы от описания внешнего вида этой web-страницы. Такое разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом. Кроме того, CSS позволяет представлять один и тот же документ в различных стилях[11].

PHP (англ. PHP: Hypertext Preprocessor — «PHP: препроцессор гипертекста»; первоначально Personal Home Page Tools — «Инструменты для создания персональных web — страниц») — скриптовый язык программирования общего назначения, интенсивно применяемый для разработки web — приложений. В настоящее время поддерживается подавляющим большинством хостинг — провайдеров и является одним из лидеров среди языков программирования, применяющихся для создания динамических web — сайтов [4].

PHPMyAdmin — это программа написанная на PHP и предназначенная для управления сервером MySQL через всемирную сеть. PHPMyAdmin поддерживает широкий набор операций над MySQL. Наиболее часто используемые операции поддерживаются с помощью пользовательского интерфейса (управление базами данных, таблицами, полями, связями, индексами, пользователями, правами, и т.д.), одновременно вы можете напрямую выполнить любой SQL запрос [10].

AdobePhotoshop — многофункциональный графический редактор, разработанный и распространяемый фирмой AdobeSystems. В основном работает с растровыми изображениями, однако имеет некоторые векторные инструменты.

Программа позволяет всестороннюю обработку графики и цифровых

фотографий — здесь можно делать маски, вырезание, добавление элементов или изменить пропорции объектов — от зданий до персонажей. Количество слоев и масок здесь практически ничем не ограничено, а к этому добавляются сотни эффектов, фильтров и других аксессуаров. Демоверсия Photoshop показывает большинство из них. Дополнительным преимуществом являются также прилагаемые приложения, как, например, менеджер расширений Adobe Extension manager, а также просмотр файлов Adobe Birdge[5].

JavaScript — прототипно — ориентированный сценарный язык программирования. Является диалектом языка ECMAScript.

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

На JavaScript оказали влияние многие языки, при разработке была цель сделать язык похожим на Java, но при этом лёгким для использования непрограммистами. Языком JavaScript не владеет какая-либо компания или организация, что отличает его от ряда языков программирования, используемых в web-разработке [9].

Основная концепция и содержание веб-сайта

Разрабатываемый сайт предназначен для ознакомления людей с предоставляемыми услугами центра красоты и здоровья.

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

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

Исходя из поставленных задач, web-сайт должен предоставлять следующие возможности:

— при первом посещении сайта пользователь должен понять, для чего служит данный сайт, составить общее впечатление о нем, выяснить свои потребности в отношении сайта. Для этого ему должен быть доступен перечень всех услуг;

— если в дальнейшем пользователю не понравилось обслуживание в выбранной им организации, он может оставить свой комментарий.

Был реализован способ связи клиентов с администрацией веб-сайта.

Детальная концепция web-сайта

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

Дизайн сайта играет немаловажную роль в создании самого сайта, а именно он должен соответствовать следующим требованиям:

— внешний вид сайта должен соответствовать выбранной тематики;

— навигация по сайту должна быть удобной для пользователя;

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

В верхней части страницы помещается название сайта, отражающее его тему.

Изображение в окне браузера состоит из трех основных элементов:

— главное информационное меню слева страницы;

Название сайта находится на каждой странице и не изменяется в зависимости от местонахождения на сайте.

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

Основное содержание страницы меняется в зависимости от местонахождения пользователя.

Главная страница. Эта страница отображается при первом входе на сайт, ее оформление и содержание дает пользователю первое представление о сайте [6].

Программы для создания сайтов — обзор лучших

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

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

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

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

Преимущества современного сайта

Функциональный ресурс обладает следующими достоинствами:

  • Помогает донести информацию до потребителя – ваши клиенты будут узнавать актуальные сведения об акциях, скидках и специальных предложениях на текущий момент;
  • Выгодно представляет товары или услуги – имеющийся ассортимент рассортирован по категориям, единая структура позволяет быстро подобрать нужный вариант;
  • Доступен 24 часа в сутки – заинтересованные люди могут заходить на площадку круглосуточно из любой точки, топ программ для создания сайтов ориентирован на реализацию именно таких проектов;
  • Экономит время потенциальных клиентов – покупатели, принявшие решение о покупке, совершают её тут же;
  • Ориентирует в выборе продукции – товары или услуги представлены как на витрине обычного магазина, что ускоряет процесс отбора и аналогичен стандартным покупкам в магазине.

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

Программы для создания сайтов — ТОП-подборка

Давайте рассмотрим топ 5 лучших программ для создания сайтов:

  1. Adobe Dreamweaver – отличный вариант с множеством визуальных компонентов, встроенных модулей и функций;
  2. Web Builder – имеет прекрасно интегрированные шаблоны в виде вкладок, анимаций, эффектов, табов и прочих элементов;
  3. Insales – платформа для управления интернет-магазином с необходимым функционалом;
  4. Web Creator Pro – удобный конструктор позволяет реализовать ресурс с нуля или воспользоваться готовым шаблоном.

Этот перечень поможет вам вникнуть в процессы разработки проектов и выбрать подходящее. Здесь перечислены топ 5 лучших программ по созданию сайтов. Каждый из этих софтов подойдёт для воплощения разного типа портала.

Альтернативой являются CMS – платформы для управления сайтом. Полноценный функционал в сочетании с возможностью удобного редактирования делают этот вариант оптимальным для пользователей любого уровня программирования.

Альтернативные варианты программ

Предлагаю изучить топ 10 программ для создания сайтов разной сложности. В этом списке присутствуют популярные системы управления, завоевавшие авторитет в данной сфере. Также будут знаменитые платформы с элементами конструирования, которые ничуть не уступают платформам по удобству обслуживания.

Итак, вот эффективные платформы для разработки ресурсов:

  1. WordPress (дополнительно можно изучить курс здесь) – структурированная платформа помогает быстро разработать сайт, используя персональные темы и плагины в связке под нужды проекта;
  2. Joomla (дополнительно можно изучить курс здесь) – прекрасная альтернатива предыдущей системе обладает похожим функционалом со встроенными функциями;
  3. Drupal – функциональный движок с массой шаблонов и плагинов;
  4. 1C-Битрикс – универсальный вариант для разработки многоуровневых интернет-магазинов, в платформу включена регистрация, отзывчивый каталог товаров и надёжный уровень безопасности, это один из популярных вариантов в топ 10 программ для создания сайтов;
  5. Mobirise – простой и понятный софт, с помощью которого можно с лёгкостью создать сайт-визитку или лендинг;
  6. Modx – помогает создавать различные виды сайтов, управлять контентом, редактировать получившийся проект под собственные нужды;
  7. Amiro – платформа с отзывчивым интерфейсом для разработки многоступенчатых ресурсов;
  8. Umi-CMS – готовый продукт от известного конструктора сайтов с упрощённой системой редактирования;
  9. Webdirector – представляет работу с шаблонами, составные части которого можно изменять по своему вкусу.

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

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

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

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

На этом пока все! Не забывайте подписываться! Будьте всегда в курсе свежих новостей!

КАК СОЗДАВАТЬ ЛЕНДИНГИ своими руками и бесплатно. Запишись на мастер-класс и узнай как

Обзор и голосование за лучшие >August 2, 2020

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

В этой статье мы поможем вам сделать этот выбор детально познакомившись с пятью популярными IDE для веб разработки.

Сначала давайте разберемся что такое >— это и нтегрированная среда разработки (англ. Integrated Development Environment) — система программных средств, используемая программистами для разработки программного обеспечения.

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

В отличие от большинства редакторов, >Эти параметры проекта могут включать в себя ссылки на внешние библиотеки программного обеспечения, настройку редактора, контроль версий и параметры отладки.

Решение о том, какую IDE использовать очень субъективно, поскольку оно действительно зависит от функционала, который вы ищете, это может быть:

  • Поддержка различных языков
  • Автодополнение
  • Рефакторинг
  • Подсветка
  • Дебаггер
  • Интеграция SVN / Git
  • Проверка соблюдения стандартов
  • Компилятор
  • Переводчик
  • Управление и редактирование баз данных

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

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

Представьте их как легкие IDE. Быстрые, надежные и настраиваемые. Помните нашу аналогию с швейцарским армейским ножом раньше? Sublime Text 3, Coda 2 и Atom – отличные примеры таких IDE. Они не являются традиционными IDE, но при правильной настройке они прекрасно вписываются в поняти IDE.

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

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

По этим причинам мы решили немного смешать список и включить как полноценные, так и «облегченные» IDE, которые будут очень полезны веб разработчикам.

Давайте начнем наш тур по IDE для веб разработки с PhpStorm.

PhpStorm

PhpStorm – это коммерческая IDE от компании JetBrains, она может похвастаться внушительным набором полезных функций.

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

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

PhpStorm не только для разработки PHP (кстати, у него есть полная поддержка PHP 7). Он также имеет отличную поддержку HTML, JavaScript и CSS.

Веб-сайт: https://www.jetbrains.com/phpstorm/
Стоимость: бесплатная 30-дневная версия
Релиз: 2009
Регулярно обновляется: да
Поддерживаемые расширения: плагины
Написан на: Java
Кросс-платформенная поддержка: да

Sublime Text 3

Далее в нашем списке – Sublime Text 3, разработанный Джоном Скиннером. Спустя много лет многих лет он стал мощным и очень быстрым пользовательским редактором. Он также хорошо известен как чрезвычайно стабильный и может легко обрабатывать очень большие файлы.

Интересно, что Sublime Text 3 не видел крупного релиза уже несколько лет. Несмотря на то, что он регулярно обновляется, обновления в основном содержат исправления ошибок наряду с незначительными улучшениями и новыми функциями. Sublime Text 3 по-прежнему находится в стадии бета-тестирования, не смотря на то, что он был выпущен как бета-версия еще в 2013 году! И в настоящее время новостей о новом крупном выпуске нет.

Sublime Text 3 очень быстро запускается. Фактически, это происходит почти мгновенно. Он работает очень быстро, без задержек или сбоев, что обеспечивает чрезвычайно плавное и эффективное редактирование кода. Он довольно минималистский и имеет менеджер пакетов для установки надстроек (написанных на Python) без необходимости перезапуска.

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

Вы также можете найти большое количество руководств и видеоуроков по Sublime Text 3. Это доказывает, что Sublime Text 3 по-прежнему очень популярен и широко используется многими веб-разработчиками на повседневной основе, что свидетельствует о качестве этого фантастического маленького редактора.

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

  • Веб-сайт: https://www.sublimetext.com/
  • Стоимость: 70$, присутствует бесплатная версия
  • Релиз: 2008
  • Регулярно обновляется: нет
  • Поддерживаемые расширения: пакеты
  • Написан на: C ++, Python
  • Кросс-платформенная поддержка: да

Построенный командой GitHub, Atom – это новый парень среди популярных IDE в нашем обзоре. Выпущенный в 2014 году, это один из самых популярных редакторов на данный момент и имеет быстро растущее сообщество.

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

Atom также имеет огромную дополнительную библиотеку с более чем 6 000 пакетов.

Подобно Sublime Text, Atom полностью поддерживает проекты, а также индивидуальное редактирование файлов. Есть встроенная поддержка Git, что неудивительно, поскольку Atom разработала команда GitHub.

Обновления выпускаются регулярно, но так как редактор относительно новый, вы вряд ли будете ждать их.

Многие пользователи жалуются на то, что при редактировании наблюдается медленная загрузка и неоднородная производительность, особенно при работе с большими файлами. Возможно это связанно с тем, что Atom создан на JavaScript, в то время как, Sublime Text разработан на C ++, который работает изначально быстрее. Только время покажет, смогут ли будущие версии Atom решить эти проблемы. Однако стоит помнить, что Atom относительно молодой и имеет достаточно времени, чтобы созреть.

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

  • Веб-сайт: https://atom.io/
  • Стоимость: 100% бесплатно
  • Релиз: 2014
  • Регулярные обновления: да
  • Поддерживаемые расширения: пакеты
  • Написан на: JavaScript
  • Кросс-платформенная поддержка: да

Coda 2

Coda был впервые выпущен в 2007 году, всего за год до Sublime Text. На протяжении многих лет он был очень сильным игроком, разделяя большую часть рынка веб-разработки с Sublime Text, на компьютерах Mac. Это главный недостаток Coda – даже спустя десять лет после первоначального выпуска, нет версии на Windows. Это единственный не кросс-платформенный редактор нашего обзора.

Редактор включает в себя встроенный терминал и клиент управления исходным кодом, а также FTP-клиент и встроенный редактор MySQL.

Несмотря на то, что Coda 2 регулярно обновляется, это, в основном, исправления ошибок и в течение многих лет не было выпусков новых версий.

Не ошибитесь, Coda 2 – очень хороший выбор. Возможно, он еще себя покажет, я все же определенно рекомендую проверить его, прежде чем принимать окончательное решение. Особенно, если вы пользователь macOS!

  • Веб-сайт: [https://panic.com/coda/]
  • Стоимость: 25$ (бесплатная пробная версия на 7 дней)
  • Релиз: 2007
  • Регулярно обновляется: да
  • Поддерживаемые расширения: плагины
  • Кросс-платформенная поддержка: нет

NetBeans

NetBeans существует уже давно (со середины 1990-х годов), но все еще процветает и может конкурировать с новыми IDE. Как и PhpStorm, он разработан на Java и доступен для нескольких платформ. NetBeans состоит из набора «модулей» для добавления функций в среду IDE.

В течение многих лет NetBeans является сильным фаворитом среди веб-разработчиков как одна из наиболее полнофункциональных IDE.

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

Частота обновлений для NetBeans, несколько замедлились за последние пару лет. Однако основной выпуск (NetBeans 9) намечен на июль-август 2020 года. NetBeans также имеет полную поддержку PHP 7 с версии 8.2.

  • Веб-сайт: https://netbeans.org/
  • Стоимость: бесплатно
  • Релиз: 1996 (оригинальное название Xelfi)
  • Регулярные обновления: да
  • Поддерживаемые расширения: модули
  • Написан на: Java
  • Кросс-платформенная поддержка: да

Другие IDE и редакторы для веб разработки

Как я уже упоминал во введении, есть много других IDE, которые вы можете использовать для разработки. Ниже вы найдете список из других IDE, на которые также стоит обратить внимание:

Вывод

В этом уроке мы рассмотрели пять популярных редакторов/IDE для веб-разработки.

Нельзя отрицать что набор функций в PhpStorm – действительно впечатляет. Но не всем сразу понадобится весь этот функционал. NetBeans существует уже более 20 лет и имеет самую большой фундамент, что делает этот выбор надежным.

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

Голосование

Если вы не нашли в списке для голосования свою любимую IDE, оставьте комментарий и мы добавим.

Программы, необходимые для веб-разработки

Дата публикации: 2020-10-05

От автора: мастер без орудия труда словно компьютер без операционной системы — имея большие возможности, он не сможет их реализовать. И если в некоторых профессиях средство играет второстепенную роль и может быть заменено, то программы для веб-разработки практически незаменимы. В этом случае природа цели определена инструментом: от его качества зависит конечный результат. Сегодня мы рассмотрим некоторые примеры софта, который необходим разработчику для успешной деятельности. Присматривайтесь, пробуйте и выбирайте свое!

Блокноты кодера

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

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

Лидер и кинозвезда — Sublime Text

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

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

Package Control — главный среди плагинов Sublime Text. Он выполняет функцию менеджера всех остальных. С его помощью можно устанавливать, удалять и обновлять дополнения, которые доступны пользователю — достаточно выучить несколько команд и сочетаний клавиш;

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

Emmet, или как его раньше звали, Zen Coding. Является настоящей интеллектуальной машиной для текстового редактора. Способен работать не только с Sublime Text, но «дружит» лучше всего с ним. Emmet способен сам прописать шаблонные структуры. С ним код пишется значительно быстрее и без ошибок: Emmet владеет целой системой удобных сокращений;

Bracket Highlighter. Создан для того, чтобы показать разработчику незакрытую скобку, из-за которой ломается весь код. Согласитесь, в стандартном блокноте вы бы искали ее значительно дольше;

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

Благодаря поддержке колоссального количества языков и сравнительно небольшого веса, Sublime Text 3 может стать весьма рабочей альтернативой IDE, о которых мы поговорим немного ниже. Работая на малопроизводительных машинах, вы сможете создавать то же, что и в Visual Studio (но, увы, не все). Это актуально для веб-разработчиков, которые работают удаленно и, иногда, на портативных устройствах.

Также, существенным преимуществом является кроссплатформенность. Большая команда с разным оборудованием может работать над общим проектом в одной среде. Кстати, Sublime Text можно преобразить с помощью немалого выбора цветовых схем: не всем удобно работать на черном фоне.

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

«Атомный» конкурент

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

Как правило, эта опция является одной из самых привлекательных для разработчиков: редактор можно полностью настроить по своему вкусу. Как и Sublime Text, редактор имеет множество дополнений, оптимизирующих разработку. Одним из тех, которое заставляет стать его фанатом, является возможность разобрать psd-макет на составляющие: Photoshop CC может себе позволить не каждый, а с Atom, верстка становится легче. И хотя редактор имеет свою армию поклонников, он обладает недостатком — большой вес. По размерам, Atom можно сравнить с небольшой IDE, в то время, как его функционал уступает интегрированной среде разработки.

Brackets покоряет качеством

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

Превью в режиме реального времени также покоряет сердца разработчиков. Нет нужды постоянно переключаться между окнами: текст преобразовывается в web-страницу у вас на глазах. Такой подход экономит значительную часть времени, которое новичок тратит на пробы и ошибки. Как и Atom, Brackets умеет работать с psd-макетами. Недостатком можно назвать то, что он поддерживает только языки для web. Но в ракурсе нашей темы он хорош. Особенно если брать во внимание дружественный интерфейс.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

В плане быстродействия редактор выигрывает у Atom, но все равно проигрывает Sublime Text, оптимизация которого удивляет многих разработчиков. По сути, уникальных элементов или возможностей у Brackets нет. Но благодаря хорошей производительности он отлично подходит для фронт-энд разработчика средней руки.

VIM: Самый старый и могущественный

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

Он поставляется в комплекте с большинством Unix’оидных операционных систем. На редакторе выросло не одно поколение девелоперов, а небольшая армия его поклонников не становится меньше. Большой недостаток у него один: Vim нелегко освоить. Но ведь большинство специализированного софта требует компетенции, а функционал редактора того стоит.

Да, вы потратите много времени на изучение. Да, в какой-то момент, вам покажется, что работать с новыми решениями значительно эффективнее. Но потенциал разработчика, разобравшегося с Vim, впечатляет. Если список плагинов для ST показался вам большим, то для этого редактора мы даже не будем его составлять — настолько он объемный. Кстати, Vim полностью управляем без компьютерной мыши, что так любят разработчики: только сочетание клавиш, только хардкор!

Все в одном: разумная альтернатива разработки

Для создания простых веб-решений достаточно специализированного текстового редактора. Но для более масштабных проектов больше подходит IDE — интегрированная среда разработки. Ее суть в том, чтобы собрать все необходимое программное обеспечение воедино: редактор текста, автоматизацию билда (сборки), компилятор/интерпретатор языка и дебаггер. Также существуют продукты с возможностью управления версиями.

Если бы не было подобных комплексов, разработка приложений происходила бы значительно медленнее: в IDE они синхронизированы и работают слажено.

Microsoft в топе популярных

Visual Studio — это софт, который стоит на большом количестве машин продвинутых разработчиков. VS хороша тем, что она одинаково хорошо подходит для создания всех возможных программ: от практически «невесомых» утилит, до полномасштабных видеоигр. Закономерно, что эта IDE используется для web.

У среды разработки большие возможности по настраиваемости интерфейса, хорошие инструменты отладки и рефакторинга. Она одинаково хорошо подходит для новичков и профессионалов. Но не обошлось без недостатков, которые характерны для всех продуктов корпорации: вес и цена. Работа программы занимает много физической и оперативной памяти, а цена версий программы достигает 3000$. Для незамысловатого фронт-энда лучше использовать один из текстовых редакторов, представленных выше.

Бесплатные «бобы» для девелопера

Если вам надоест дорогой и авторитарный VS, обязательно попробуйте поработать с NetBeans — полномасштабным open source IDE. Кроме того, что за его использование вам не придется платить, для среды разработки характерны еще несколько преимуществ:

интуитивно понятный UI, который поможет втянуться новичку;

мультиплатформенность, которой не хватает Visual Studio;

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

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

Eclipse — выбор профессионала

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

Eclipse тоже бесплатен, что тоже стало одним из основных столпов его популярности, в то время как конкурирующие варианты не опускаются в цене ниже 500$.

Визуальный редактор: является ли альтернативой?

Существуют также и решения для ленивых: тех, кто решил не изучать языки программирования и создавать веб-продукты «на лету». По сути, это программа для рисования макета сайта, который автоматически преображается в HTML/CSS-коды. С помощью таких программ и правда можно создать полноценный сайт.

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

Тем не менее, вижуал редакторы используют и профессионалы. С их помощью можно оптимизировать определенные моменты дизайна, которые нужно увидеть и протестировать в короткий срок.

На этом у нас все: пользуйтесь качественными инструментами и создавайте красивые веб-проекты!

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Разработка веб-приложения на PHP

Создайте веб-приложение на PHP на примере приема платежей на сайте

Средства создания Web-сайтов

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

Рубрика Программирование, компьютеры и кибернетика
Вид контрольная работа
Язык русский
Дата добавления 06.08.2014
Размер файла 38,7 K

Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже

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

Размещено на https://www.allbest.ru

АНО ВПО «ОМСКИЙ ЭКОНОМИЧЕСКИЙ ИНСТИТУТ»

КАФЕДРА ИНФОРМАЦИОННО-ВЫЧИСЛИТЕЛЬНЫХ СИСТЕМ

Контрольная работа по дисциплине

Тема: «Средства создания Web-сайтов»

1. Теоретические основы разработки Web-сайтов

2. Средства разработки Web-сайтов

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

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

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

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

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

· не соответствие сайта психофизиологическим требованиям, которое приводит к повышенной утомляемости или отвлечению внимания;

· увлечение анимацией, графическими изображениями и видео фрагментами, которые не несут смысловой нагрузки, автоматически влечет за собой уменьшение количества потенциальных посетителей web-сайта, так как повышает требования к пропускной способности Интернет-соединения и объем трафика;

· избыточность или недостаток представленной информации;

· некорректный выбор средств разработки, который влечет за собой необоснованное повышение стоимости готового продукта.

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

К тому же сейчас, когда число онлайновых пользователей оценивается более чем в 500 миллионов человек (причем это число растет со скоростью приблизительно 7% в месяц), приходится искать пути использования новых технологий, которые могли бы оказать содействие в привлечении и удержании внимания пользователей, путешествующих по безбрежным просторам Web.

Мастер Йода рекомендует:  Я выбираю тебя! Кто лучший из JavaScript-фреймворков

Предмет исследования- web-технологии.

Объект — среды и языки разработки web-сайтов.

Цель работы — рассмотреть возможности практического использования языков и средств для разработки web-сайтов.

Для достижения поставленной цели необходимо решить ряд задач:

1) рассмотреть основные понятия web-технологий;

2) привести различные классификации web-приложений, используемых в предпринимательской деятельности;

3) рассмотреть психофизические требования к web-приложениям;

4) определить области применения языков программирования для разработки web-приложений;

5) проанализировать функциональные возможности сред по созданию web-приложений.

Подходить к задаче создания собственного «Интернет-представительства» стоит ответственно. Сайт должен быть удобен в использовании — страницы должны загружаться как можно быстрее, а сам ресурс должен обладать логичной и понятной структурой. Только в таком случае можно рассчитывать на то, что посетитель заинтересуется предоставленной информацией и задержится на сайте.

1. Теоретические основы разработки Web-сайтов

Понятие и классификация web-технологий

Развитие современной компьютерной техники и внедрение новейших технологий положили начало нового направления жизни на Земле. За довольно короткий промежуток времени развития микроэлектроники и кибернетики произошло много изменений.

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

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

Интернет — это не только «прохладный бассейн», в котором так комфортно чувствуют себя весьма «перегревшиеся» люди, но и место, где можно «потрогать» практически любую горячую тему, не опасаясь при этом обжечься [5, с.8].

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

Информация, доступная пользователям Internet, располагается на компьютерах (Web-серверах), на которых установлено специальное программное обеспечение. Значительная часть этой информации организована в виде Web-сайтов. Каждый из них имеет свое имя (адрес) в Internet. Web-сайт — это информация, представленная в определенном виде, которая располагается на Web-сервере и имеет свое имя. Для просмотра Web-сайтов на компьютере пользователя используются специальные программы, которые называются браузерами. Наиболее распространенными браузерами в настоящее время являются Internet Explorer и Netscape Navigator. Взависимости от того, какое имя сайта мы зададим в строке «Адрес», браузер будет загружать в свое окно соответствующую информацию.

Web-сайт состоит из связанных между собой Web-страниц. Web-страница представляет собой текстовый файл с расширением *.htm, который содержит текстовую информацию и специальные команды — HTML-коды, определяющие в каком виде эта информация будет отображаться в окне браузера. Вся графическая, аудио и видео информация непосредственно в Web-страницу не входит и представляет собой отдельные файлы (рисунок 1 Приложение А) [6, с. 15].

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

В настоящее время с точки зрения назначения различают три основных типа порталов:

· Публичные, или горизонтальные, порталы (называемые иногда мегапорталами), такие как Yahoo, Lycos, Excite, Rambler. Такие порталы нередко являются результатом развития поисковых систем. Предназначены они для самой широкой аудитории, что отражается на содержании предоставляемой ими информации и услуг. Как правило, эта информация носит общий характер, равно как и предоставляемые услуги (электронная почта, новостные рассылки и так далее).

· Вертикальные порталы. Этот вид порталов предназначен для специфических видов рынка и обслуживает аудиторию, пользующуюся услугами этого рынка или работающую на нем. Примерами таких порталов могут служить, например, туристические агентства, предоставляющие услуги по бронированию мест в гостиницах, заказу и доставке билетов, доступу к картам и сведениям об автомобильных маршрутах, либо порталы типа B2B (business-to-business), позволяющие своим клиентам реализовывать совместные бизнес-операции (например, выбирать поставщиков и осуществлять закупку товаров, проводить аукционы).

· Корпоративные порталы предназначены для сотрудников, клиентов и партнеров одного предприятия. Пользователи такого портала получают доступ к предназначенным им сервисам и приложениям в зависимости от их роли и персонального профиля.

Другие наиболее распространённые web-приложения:

· Региональные Интернет-порталы, универсальные по своему направлению, но ограниченные географией заинтересованных посетителей (e1.ru);

· Поисковые системы — это Интернет-порталы, которые предназначены для того, чтобы предоставить их посетителю возможность найти сайты, на которых встречаются заданные слова или целые фразы (metabot.ru);

· Каталог — это коллекция ссылок на сайты. Зачем же нужны каталоги, если есть поиск? Очень часто мы не знаем точно, что нам нужно, не можем это сформулировать парой слов (mail.ru);

· Электронные доски объявлений — являются местом в Интернет, где практически любой желающий может оставить информацию ознакомительного, пригласительного или рекламного характера;

· Форумы — это специальные сайты или разделы на сайтах, предназначенные для того, чтобы посетители, оставляя свои сообщения, обменивались мнениями;

· Чаты — являются еще одним местом для общения в Интернет, только его назначение не обмен мнениями на какую-то тему, а просто времяпрепровождение;

· Файлы для скачивания;

· Хранение в интернете различной информации;

· Серверы почтовых рассылок, они предлагают услуги по доставке информации широкому кругу читателей (subscribe.ru);

· Интернет-магазины и аукционы (ozon.ru, molotok.ru).

Требования к Web-приложениям

Отправной точкой в web-проекте является анализ целей сайта и функций, которые будут предложены пользователю.

Вторым этапом будет построение информационной архитектуры сайта.

После того как будут известны все материалы сайта и его структура, можно перейти к дизайну навигации и самих страниц [1, с. 69].

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

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

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

· название компании или логотип в левом верхнем левом углу

· прямую ссылку на главную страницу

· индивидуальный слоган для сайта, состоящий из одного предложения

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

В разделе «О нас» необходимо представить основные сведения о компании:

· состав верхнего управляющего звена (с библиографическим списком и фотографиями);

· философия организации (видение бизнеса, связи с обществом, стремления);

· основные исторические вехи;

Пространное объяснение в верхней части страницы «О нас» помогает пользователю лучше понять то, что содержится в глубинах, этого раздала.

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

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

Поэтому пользователи часто просматривают только верхнюю часть статьи. И лишь самые заинтересованные читатели промотают страницу, и лишь эти немногие поймут историю статьи во всех деталях. Поэтому важно применять «принцип перевёрнутых пирамид», который состоит в том, что статья начинается с «вывода», после идёт сообщение о самой важной информации, а в конце даётся подоплёка события.

Для того, что бы страницы было удобно просматривать, мы будем использовать:

· выделение ключевых слов;

· грамотно составленные заголовки;

· списки с маркерами;

· один абзац на одну идею (пользователи пропустят все остальные идеи, если их не привлекут основные слова абзаца);

· стиль перевёрнутой пирамиды (где статья начинается с заключения);

· меньшее количество слов, чем в обычной статье;

· минимум мало понятных терминов;

· указание даты создания сообщения (что бы знать на сколько, оно актуально на данный момент);

· контекстную информацию атрибута » ALT».

· электронные заголовки часто выводятся вне контекста:

· в списке статей на сайте;

· в заголовках сообщений электронной почты;

· в результатах поиска;

· в закладках браузера.

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

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

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

Что бы поднять доверие к сайту необходимо использовать качественные графические изображения. При этом не стоит использовать большие изображения, по умолчанию. Желательно использовать эскизы, а при необходимости увеличивать их на столько, на сколько пожелает пользователь. Эскизы должны содержать всю основную информацию об изображении. На сайте правильнее будет использовать фотографии реальных работников и клиентов, а не фотомоделей с ослепительной голливудской улыбкой. Так же необходимо использовать хороший стиль письма и исходящие гипертекстовые ссылки на другие сайты. Не нужно использовать «рекламную воду», так как она несёт дополнительную эмоциональную нагрузку, и пользователям приходится тратить время на отсеивание гипербол от реальных фактов.

Классический путь увеличения привязанности к сайту — это публикация свежих материалов с определённой регулярностью (от ежедневных до ежемесячных). Для желающих необходимо организовать рассылки свежего материала. Почти 100% из тех, кто подписался, будут периодически заходить и на сам сайт, пока автор будет напоминать им о себе.

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

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

Ссылки должны быть предсказуемы, пользователь должен знать, что произойдёт, если он нажмет на ссылку. Ясно указывать, что является ссылкой: если это текст пусть он будет цветным или подчёркнутым. Не скрывать различия между посещёнными и не посещёнными ссылками. Создавать ссылки с расчётом того что поисковые системы являются самыми важными посетителями, а они глухи и слепы по отношению к высоким технологиям. Оформить теги «title» так, чтобы они хорошо смотрелись в поисковых системах и закладках, поэтому начинать ссылки необходимо с ключевого слова.

Не допускать появления ломаных ссылок, так как другие сайты и поисковые системы не будут в этом случае на нас ссылаться.

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

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

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

Итак, секрет успеха в том, что бы совместить рекламу с целями пользователей.

В рекламе пользователей больше всего раздражает:

· реклама во всплывающих окнах;

· её медленная загрузка;

· отсутствие кнопки «Закрыть»;

· уловки заставляющие кликнуть;

· реклама закрывает читаемый материал;

· реклама произвольно начинающая играть музыку или проигрывать видео.

Наличие такой рекламы на сайте неизбежно приведёт к падению доверия посетителей. Необходимо использовать в минимальных количествах FLASH анимацию.

Если хочется разместить, рекламу она должна соответствовать следующим правилам:

· четко указывать, что произойдёт по щелчку по ней;

· четко идентифицировать себя как реклама;

· описывать, что именно рекламируется;

· даёт дополнительную информацию о себе без надобности покидать текущую страницу.

Проведение оценочных работ

Для проведения оценочной работы необходимо привлечь от трёх до пяти участников. Каждый из них производит работу индивидуально. После чего их результаты сравниваются и приводятся к единому выводу. Тест проводится в два этапа:

1) понимание работы интерфейса;

2) концентрация внимания на определённых элементах.

Необходимо отдельное упоминание каждой проблемы, что бы ни повторять её в дальнейшем.

2. Средства разработки Web-приложений

Области применения языков программирования для разработки Web-приложений

Язык разметки гипертекста (Hypertext Markup Language), или, как его чаще называют, HTML, — это компьютерный язык, лежащий в основе World Wide Web (Всемирной Паутины). Благодаря языку HTML любой текст можно разметить, преобразовав его в гипертекст с последующей публикацией в Web.

Язык HTML имеет собственный набор символов, с помощью которых Web-браузеры отображают страницу. Эти символы, называемые дескрипторами, включают в себя элементы, необходимые для создания гиперссылок [3, с. 20].

Одной из отличительных особенностей HTML-документов является то, что сам документ содержит только текст, а все остальные объекты встраиваются в документ в момент его отображения Браузером с помощью специальных тэгов и хранятся отдельно. При сохранении HTML-файла в месте размещения документа создается папка, в которую помещаются сопутствующие ему графические элементы оформления [10, с. 134].

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

Вторая область — это создание скриптов, выполняющихся в командной строке. То есть с помощью PHP можно создавать такие скрипты, которые будут исполняться, вне зависимости от web-сервера и браузера, на конкретной машине.

И последняя область — это создание GUI-приложений (графических интерфейсов), выполняющихся на стороне клиента [7, с. 58].

Ajax расшифровывается как Asynchronous Javascript And XML (Асинхронные Javascript и XML) и технологией в строгом смысле слова не является. Если в стандартном web-приложении обработкой всей информации занимается сервер, тогда как браузер отвечает только за взаимодействие с пользователем, передачу запросов и вывод поступившего HTML, то в Ajax-приложении между пользователем и сервером появляется еще один посредник — движок Ajax. Он определяет, какие запросы можно обработать «на месте», а за какими необходимо обращаться на сервер.

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

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

Где стоит использовать Ajax:

· Формы. Они очень медленны. Если асинхронно передавать данные, страница не перезагружается.

· Навигация в виде «дерева». Вообще, такая навигация — ужас. Простая топология намного удобнее, но если уж до этого дошло, лучше использовать Ajax.

· Голосования. Пользователю будет приятней оставить свой голос за несколько секунд, чем за 30-40.

· Фильтры. Часто на сайтах делают сортировку по дате, по имени. Ajax это будет значительно удобнее.

Язык программирования JavaScript разработан фирмой Netscape для создания интерактивных HTML-документов. Это объектно-ориентированный язык разработки встраиваемых приложений, выполняющихся как на стороне клиента, так и на стороне сервера. Синтаксис языка очень похож на синтаксис Java — поэтому его называют — Java-подобным.

Основные области применения JavaScript делятся на следующие категории:

· динамическое создание документа с помощью сценария;

· оперативная проверка достоверности заполняемых пользователем полей форм HTML до передачи их на сервер;

· создание динамических HTML-страниц совместно с каскадными таблицами стилей и объектной моделью документа;

· взаимодействие с пользователем при решении «локальных» задач, решаемых приложением JavaScript, встроенном в HTML-страницу [4, с. 57].

Язык создания сценариев VBScript разработан фирмой Microsoft, является подмножеством достаточно распространенного в среде программистов языка Visual Basic разработки прикладных программ Windows-приложений. Как и его родитель, язык VBScript достаточно прост и лёгок в изучении.

Преимуществом его применения для создания сценариев является возможность использования, с небольшими корректировками, ранее написанных процедур на языках Visual Basic и Visual Basic for Application.

Функциональные возможности сценариев, написанных на VBScript, ничем не отличаются от возможностей сценариев JavaScript: динамические создание документа или его частей, перехват и обработка событий и так далее.

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

Для создания сценариев клиента используется набор объектов, аналогичный набору JavaScript. Объекты клиента и сервера отличаются друг от друга, но существует общая часть (ядро) объектов, используемых при разработке как сценариев клиент, так и сценариев сервера [11, с. 213].

Наиболее широко Perl используется для разработки инструментов системного администрирования, однако в последнее время он получил огромную популярность в области разработки Интернет-приложений: CGI-сценариев, систем автоматической обработки электронной почты и поддержки узлов Web.

Вот некоторые примеры задач, которые можно решать с помощью Perl:

· проверка пользователей Windows NT на несоответствие их статуса и возможностей;

· управление NT-сервисами из командной строки и дистанционно с локальной машины получение статистических данных на отдельной машине;

· может работать и с протоколом FTP;

· системная поддержка UNIX и Windows.

Сравнительный анализ сред создания Web-приложений

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

Компания Macromedia продолжает делать Dreamweaver интуитивно понятной и простой в использовании программой. Мощные средства с одной стороны и простота в использовании — с другой, делают продукты Macromedia идеальными программным пакетом, как для профессиональных web-дизайнеров, так и для новичков. Продукты, входящие в пакет Macromedia, такие как: Flash, Firework, Dreamweaver — сделают работу более продуктивной, и при этом могут заменять друг друга (так, например, в любой из них можно создать кнопки). Такие продукты как: Sitespring, FreeHand — добавит эффективности при работе с клиентом.

У Dreamweaver множество плюсов:

Программа Dreamweaver поддерживает «чистый» HTML код, а также последние расширения DHTML и CSS.

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

Позволяет отменить изменения, сделанные несколько шагов назад (однако после сохранения страницы отменить изменения будет невозможно).

Применяется «Динамическая проверка для различных браузеров».

Поддерживает расширения, как сторонних разработчиков, так и самой Macromedia (более 500).

С Dreamweaver поставляется библиотека элементов, которые можно применять на WEB-страницах, например панель навигации, дескриптор авторского права и др.

Применяется для добавления мультимедийных средств на web-страницы и различных типов файлов от Flash и Java до RealAudio, интерактивных элементов, таких как поисковые системы, форумы, системы электронной коммерции.

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

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

Fireworks это редактор графики с возможностью её дальнейшей оптимизации и размещения в сети. Используя большое разнообразие инструментальных средств, мы можем создавать и редактировать как векторную, так и растровую графику в пределах одного файла вместо того, чтобы переходить из одной программы в другую. Fireworks генерирует HTML — код и JavaScript и может легко создавать динамические меню и навигационные панели для наших интернет страниц. Эффективная оптимизация графических файлов позволяет максимально уменьшить их размер без потери качества.

Кроме этого имеется возможность редактировать макеты WEB-страниц. Например, в Fireworks 8 можно открыть графический файл на всю ширину будущего сайта, нарисовать необходимое графическое оформление, а затем разрезать его инструментом Slice Tool так, как должна выглядеть будущая таблица HTML-документа. После этого можно начинать доработку отдельных графических элементов и, в том числе, создавать активную графику, реагирующую на курсор, совсем не зная языка программирования (JavaScript).

Один из трех профессиональных графических редакторов, ведущих с переменным успехом борьбу за первенство в работе с векторной графикой. FreeHand гораздо быстрее и проще своих конкурентов — CorelDraw и Adobe Illustrator. FreeHand прекрасно подходит для создания логотипов, рекламы, Web-графики и анимации.

Изготовители программы приложили немало усилий, чтобы максимально облегчить жизнь пользователям: интерфейс программы прост и нагляден, имеется множество «примочек», позволяющих быстро и легко выполнять сложные преобразования объектов или достичь самых разных художественных эффектов. FreeHand умеет экспортировать и импортировать файлы практически во всех широко распространенных форматах. Более того, в его состав входят настройки «горячих клавиш», эмулирующие другие распространенные программы (Adobe Illustrator, CorelDraw). Так что не надо переучиваться, переходя на FreeHand.

Интересной и важной особенностью FreeHand при работе над большими проектами является возможность глобальных изменений документа, как для текста, так и всех графических объектов. Механизм глобальной замены очень гибок. Кроме замены, он позволяет выделить объекты с заданными свойствами для последующего преобразования. Основными свойствами, по которым ведется поиск и замена или выделение объектов, являются цвет, толщина контура, шрифт, угол поворота.

Документы FreeHand легко превращаются в web-страницы. Конечно, FreeHand — не HTML-редактор, но поддерживает базовые элементы HTML. С помощью FreeHand WEB-страницы легко снабдить Flash-анимацией. В анимационный клип вставляются текстовые блоки, группы объектов, а также объекты с контурами. Небольшой клип из объектов FreeHand создается буквально одной командой — остается лишь проследить за некоторыми настройками. Каждый кадр клипа помещается на отдельный слой; анимационный эффект достигается последовательным воспроизведением содержимого отдельных слоев. Но средства FreeHand не заменят редактор Macromedia Flash.

Создаёт привлекательные интерактивные мультимедийные презентации, для WEB-сайтов. Для Flash характерна векторная графика и анимация, хотя эта программа может быть также использована для манипулирования или отображения растровой графики, монтажа видеоматериала и даже для манипулирования звуковыми файлами.

Flаsh-содержимое публикуется в компактных файлах формата SWF для последующего показа на самых разных платформах с помощью Flаsh-проигрывателя. Во время воспроизведения файла формата SWF в оперативном режиме в него можно динамически загружать такое содержимое, как звуковые файлы формата МР3, Flash-видео и изображения формата JPEG. Flash-проигрыватель позволяет подключаться к источникам данных, чтобы объединить их с базой данных, XML или web-службами. Благодаря всем этим возможностям привлекательные фрагменты анимации и эффекты могут быть введены в приложения, управляемые данными. Flash имеет поддержку антиалайсинг (сглаживание контуров с помощью смешения соседних цветов). Так как этот формат файла основан на векторной графике, объект сохраняет качество изображения при любом разрешении и идеален для создания кадров анимации.

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

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

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

Гибкость интерфейса — это одна из сильнейших сторон продукта. Любой пользователь с легкостью сможет настроить интерфейс HomeSite в соответствии со своими предпочтениями и потребностями.

В процессе работы пользователь может видеть рабочую область с двумя вкладками — Browse и Edit. То есть программирование происходит во вкладке Edit, а результат можно увидеть, если выбрать вкладку Browse. При создании новой страницы на поле редактирования автоматически появляются некоторые теги вроде HTML и BODY. Это шаблон, загружаемый при создании новой страницы. Его содержание можно менять.

В HomeSite очень легко строить архитектуру сайта. Этому способствует панель Quick Bar с системой вкладок с готовыми тегами. Теги в этих вкладках самые разные — от простых вроде параграфа до java-скриптов. Можно вообще оставить одну вкладку, добавив в нее все необходимые теги через меню Customize. Также можно самому создавать теги или их комбинации. При нажатии на кнопку с определенным тегом появляется окно, где можно настроить опции тега и указать его атрибуты. Поддерживает режим WYSIWYG со всеми его плюсами и минусами.

Для скорости работы здесь имеется множество средств редактирования тегов. Это, например, такие функции, как Tag Completion, Tag Editors и Tag Insight. Они существенно облегчают редактирование тегов и их атрибутов. Так же есть заготовки кода (Code Snippets).

HomeSite легко интегрируется со средствами управления исходным кодом и системами управления проектами, а также предлагает широкие возможности работы с протоколом FTP, благодаря чему мы сможем быстро выполнить развертывание сайта и организовать его эффективное обслуживание [9, с. 185-279].

Является наиболее популярным HTML-редактором на рынке, главным образом за счёт популярности пакета Microsoft Office. В программе предлагаются мощные функции и привлекательный пакет программ, включая Image Composer, который предназначен для создания изображений (Приложение В). Во FrontPage также содержатся WEB-компоненты, необходимые для добавления интерактивных свойств web-узлу. Microsoft FrontPage является классическим WYSIWYG-редактором, в котором, однако, присутствует возможность ручной правки кода [6, с. 17].

В программе имеется три режима работы с документом: Normal, HTML и Preview.

В режиме Normal, web-страницы представляют собой обычный текстовый файл с возможностью редактирования всех элементов — от текста до картинок.

В режиме HTML осуществляется подсветка синтаксиса, однако довольно посредственную — дескрипторы выделены, синим цветом, все остальное — черного цвета.

В режиме Preview можно посмотреть, как будет выглядеть ваша страница в окне браузера.

FrontPage имеет конструктор таблиц, существенно облегчающий их создание. Одним из основных преимуществ программы является большое количество имеющихся шаблонов, позволяющих пользователю не ломать голову над дизайном своего проекта. Выбрав необходимый шаблон, можем приступать непосредственно к наполнению страницы контентом. Вот тут то и ощущается вся прелесть FrontPage: процесс создания HTML-страницы ничем не отличается от создания обычного текстового документа в Microsoft Word. Нам доступны те же средства для редактирования текста, смены его форматирования, создания и редактирования таблиц, вставки различных объектов и изображений и всё это без знания HTML. FrontPage делит рабочую область на несколько блоков, содержащих определенные элементы страницы — рисунки, текст, заголовки и проч. Для каждого блока можно назначить свои параметры форматирования и расположения его относительно страницы.

Минусы: небольшой набор инструментов разработки, невозможность отдельного приобретения программы. Microsoft FrontPage неплохо подойдет в качестве HTML-редактора на первое время, однако с ростом потребностей его возможностей может не хватить. Есть и обратная сторона медали — сложность и громоздкость полученного кода, что естественно, сказывается на конечном размере документа. Также в дальнейшем будет весьма сложно вносить изменения в подобный документ. Но это скорее недостаток не конкретного продукта, а практически всех WYSIWYG-редакторов (What You See Is What You Get — «что видите, то и получите»).

Web-компоненты работают только в том случае, если на web-сервере, который используется, присутствуют соответствующие им программы.

Не смотря на то, что Microsoft Word является текстовым редактором и по существу не считается HTML-редактором. Он имеет возможность сохранять файлы в формате HTML. В результате мы можем столкнуться со страницами которые тем или иным способом были созданы в Microsoft Word. Проблемы в HTML-коде, полученном из редактора аналогичны проблемам FrontPage: обе эти программы создают избыточный код, который не во всём соответствует HTML-стандарта. Огромное количество людей, использующих Word в своей повседневной работе, становятся потенциальными разработчиками HTML-документов.

Создать web-станицу в Word можно двумя способами: с помощью Мастера либо преобразовав существующий документ Word в формат HTML. При этом Word сам генерирует тэги HTML, хотя и не оптимальным образом. Преобразование естественно приводит к тому, что какие-то элементы оформления документа будут утрачены или изменены. При необходимости вставить на HTML-страницу собственные тэги, в Word предусмотрено непосредственное редактирование HTML-кода.

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

Web-страницы могут содержать много элементов — текст HTML, растровые изображения, векторную графику. В Illustrator можно использовать фрагменты для определения границ различных web-элементов в объекте. Web-страница делится на ячейки которые представляются в трёх типах: изображения, без изображения, HTML-текст.

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

Карты ссылок позволяют связать одну или несколько областей изображения (так называемых активных областей) с URL-адресом. Когда щелкаем по активной области, web-браузер загружает связанный с ней файл.

Основная разница между использованием карт ссылок и фрагментов для создания связей состоит в том, как объект экспортируется на web-страницу. Использование карт ссылок сохраняет объект в виде единого файла изображения, а в случае использования фрагментов объект делится на несколько отдельных файлов. Еще одна разница между картами ссылок и фрагментами состоит в том, что карты позволяют связывать многоугольные или прямоугольные области в объекте, а фрагменты — только прямоугольные [1, с. 139].

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

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

При всей простоте основных инструментов Photoshop пользователь может к тому же настраивать их «под себя». А это равносильно наличию бесконечного разнообразия мелков. Поскольку программы рисования полагаются при своей работе на пиксели, они идеально подходят для работы с электронными (цифровыми) фотографиями цветных карандашей, пульверизаторов, акварельных и масляных красок и многого другого. Photoshop предоставляет полный контроль над каждым пикселем изображения. Недостаток программ рисования в ограниченном разрешении. Поскольку битовый рисунок состоит из фиксированного количества пикселей [8, 592].

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

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

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

CorelDraw демонстрирует качества мощного визуального редактора web-страниц: пользователь получает возможность генерировать развитые HTML-документы, которые могут включать сценарии JavaScript и таблицы стилей CSS.

Обеспечивая мощные возможности для работы с графикой, текстом и средства компоновки и экспорта документов для публикации в Интернете, CorelDraw вполне может служить исходным пунктом для генерирования первых версий файла HTML.

При размещении изображений на странице одна из наиболее важных задач — оптимизация размера файлов изображений. Рекомендуемый «потолок» общего размера страницы — от 100 до 150 кбайт. Уменьшение размера файлов изображений выполняется сжатием файлов и уменьшением количества цветов. Эти задачи доступны для любой из графических программ, перечисленных выше [2, с. 85].

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

Спектр социальных групп, подключающихся к сети Интернет и ищущих информацию в WWW, все время расширяется за счет пользователей, не относящихся к категории специалистов в области информационных технологий. Это врачи, строители, историки, юристы, финансисты, спортсмены, путешественники, священнослужители, артисты, писатели, художники. Список можно продолжать бесконечно. Любой, кто ощутил полезность и незаменимость Сети для своей профессиональной деятельности или увлечений, присоединяется к огромной армии потребителей информации во «Всемирной Паутине».

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

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

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

Создание и разработка сайтов включает:

· утверждение первоначального технического задания на разработку сайта;

· определение структурной схемы сайта — расположение разделов, контента и навигации;

· web-дизайн — создание графических элементов макета сайта, стилей и элементов навигации;

· разработка программного кода, модулей, базы данных и других элементов сайта необходимых в проекте;

· тестирование и размещение сайта в сети интернет.

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

1. Борисенко А.А. Web-дизайн. Просто как дважды два. — М.: Эксмо, 2008.- 320 с.

2. Бурлаков М. В. CorelDRAW 12. — СПб.; БХВ-Петербург, 2004. — 688 с.

3. Джамса Крис. Эффективный самоучитель по креативному Web-дизайну. HTML, XHTML, CSS,JavaScript, PHP, ASP, ActiveX. Текст, графика, звук и анимация. Пер с англ./Крис Джамса, Конрад Кинг, Энди Андерсон — М.: ООО «ДиаСофтЮП», 2005.- 672 с.

4. Дунаев В. Самоучитель JavaScript, 2-е изд. — СПб.: Питер, 2005. — 395 с.

5. Зольников Д.С. PHP5. Как самостоятельно создать сайт любой сложности. — 2-е изд. стер. — М.: НТ Пресс, 2007. — 272с.

6. Инькова Н. А., Зайцева Е. А., Кузьмина Н. В., Толстых С. Г. Создание Web-сайтов: Учебно-методическое пособие. Ч. 5. Тамбов: Изд-во Тамб. гос. техн. ун-та, 2005. — 56 с.

7. Мазуркевич А. РНР: настольная книга программиста /Александр Мазуркевич, Дмитрий Еловой. — Мн.: Новое знание, 2006. — 495 с.

8. Мак-Клелланд Дик. Photoshop 7. Библия пользователя. : Пер. с англ. — М.: Издательский дом «Вильяме», 2006. — 928 с.

9. Орлов Л. В. Web-сайт без секретов. / Л. В. Орлов. — 2-е изд. — М.: Бук-пресс, 2006. — 512 с.

10. Полонская Е.Л. Язык HTML. Самоучитель.: — М.: Издательский дом «Вильяме», 2005.— 320 с.

11. Создание Web-страниц и Web-сайтов. Самоучитель : [учеб. пособие] / под ред. В. Н. Печникова. — М.: Изд-во Триумф, 2006.— 464 с.

12. Якушев, Л. В. Начинаем работать в Интернет. Краткое руководство. — М.: Издательский дом «Вильяме», 2006. —128 с

Размещено на Allbest.ru

Подобные документы

Анализ аппаратных и программных средств предприятия ТОО «Alicesystems», занимающегося разработкой web-сайтов. Выбор структур, топологий и технологий разработки системы. Технологии создания сайтов и выбор площадки. Описание программно-аппаратных средств.

отчет по практике [690,9 K], добавлен 29.05.2015

Определение возможностей средств и языков для разработки сайта, требований, предъявляемых к текстовой и графической информации, представленной на экране монитора. Характеристика технологии создания RIA-приложений, Flash-компонентов и Active-x-объектов.

курсовая работа [3,0 M], добавлен 17.03.2012

Основные технологии разработки ресурсов Интернет. Процесс разработки веб-сайта. Понятие Web-сайта и классификация Web-сайтов. Основные этапы разработки Web-сайта. Использование HTML, CSS, JavaScript, FLASH, PHP и реляционной базы данных MySQL.

презентация [1,3 M], добавлен 28.11.2015

Интерфейс среды Dreamweaver. Обзор популярных интернет-технологий создания динамических сайтов. Методика выбора средства разработки. Критерии сравнения популярных интернет-технологий. Записная книжка на базе РНP. Электронный прайс-лист на базе XML.

дипломная работа [2,3 M], добавлен 30.08.2010

Анализ средств информации консалтингового бизнеса: обзор языков программирования и программных средств для создания сайтов, информационных систем и сайтов консалтинговых фирм. Моделирование бизнес-процессов. Разработка интернет-представительства.

дипломная работа [2,9 M], добавлен 11.04.2012

Классификация современных web-технологий. Сравнительный анализ систем управления сайтами. Исследование методов разработки, оптимизации и продвижения Web-сайта. Изучение фреймворков, используемых при разработке сайтов. Обзор создания графического дизайна.

дипломная работа [3,8 M], добавлен 07.11.2013

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

курсовая работа [1,6 M], добавлен 10.01.2015

Классификация сайтов по технологиям, влияющим на дизайн и функциональность. Исследование языков программирования для web-сайтов. Характеристика особенностей личных и коммерческих сайтов. Разработка и реализация сайта Института математики и информатики.

Мастер Йода рекомендует:  Проектирование эффективных веб-форм структура, элементы для ввода данных, метки и действия

отчет по практике [5,1 M], добавлен 09.12.2014

Использование функциональных возможностей GSM uCoz для разработки сайта. Сущность, значимость, типы и виды сайтов, способы их создания. Правила размещения сайта в сети Интернет. Основные возможности, понятия, преимущества и недостатки сервиса uCoz.

дипломная работа [1,7 M], добавлен 20.07.2014

Рассмотрение понятия и классификации Web-технологий. Основные требования к созданию главной страницы сайта, раздела «О нас», контента, привязанности. Определение направлений использования языков программирования HTML, PHP, JavaScript, VBScript, Perl.

курсовая работа [49,3 K], добавлен 13.07.2010

Работы в архивах красиво оформлены согласно требованиям ВУЗов и содержат рисунки, диаграммы, формулы и т.д.
PPT, PPTX и PDF-файлы представлены только в архивах.
Рекомендуем скачать работу.

Разработка сайта

Среда разработки web-сайта

При разработке web-сайта используются:

  • — HTML — язык разметки web-страниц;
  • — CSS — формальный язык описания внешнего вида web-страницы;
  • — JavaScript — язык программирования;
  • — JavaScript-библиотека JQuery 2.2.3;
  • — Фреймворк Bootstrap 3.3.6;
  • — SVG — язык разметки масштабируемой векторной графики;
  • — Notepad++ — редактор кода;

Написание сайта на языке HTML нужно начать с того, что необходимо понять, что это за язык. HTML — это Hyper Text Markup Language — язык гипертекстовой разметки. HTML — компьютерный язык, а следовательно он имеет свои собственные правила (синтаксис), которые необходимо соблюдать. HTML — это язык разметки, значит, он берет определенные части документа и придает им особый вид.

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

На сегодняшний день язык HTML существенно усовершенствован. Его прекрасно дополняют технологии JavaScript, DHTML, CSS, PHP и др., что позволяет использовать новые возможности, но основой всего этого остаются все те же стандартные теги, которые и задают внешний вид web-страницы. Сейчас уже никого не удивишь таким словом, как браузер, и каждый скорей всего знает, что это такое и для чего он предназначен. Так вот браузер, считывая информацию со страниц, размещенных в Интернете, отображает ее на экране монитора в том виде, в котором четко указывают ему эти самые теги. Все существующие теги заключены в угловые скобки ( ), это и указывает браузеру на то, что перед ним тег, который ориентирует на определенное отображение страницы, причем сами теги на экране не отображаются.

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

Регистр букв в наименовании тега значения не имеет. Почти все теги являются парными, то есть существует открывающий «зону действия» тег ( ), и соответственно закрывающий ( ). Как же создать HTML-документ? Проще всего это сделать в текстовом редакторе. Для начала подойдет обычный Блокнот от Windows, можно пользоваться редакторами исходного кода, чтобы упростить свою работу, например Sublime Text.

CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки.

В 1990-х возникла необходимость стандартизировать web-инструменты, создать общие правила, с помощью которых программисты и web-дизайнеры могли бы создавать сайты. Как результат этой необходимости, появились языки HTML 4.01 и XHTML, а также стандарт CSS.

Первое упоминание о CSS было в 1994 году, когда Хоком Виум Ли предложил использовать CSS (Каскадные таблицы стилей) для стилистического оформления web-страниц. У него не сразу получилось продвинуть свою технологию, — только через пару лет ему удалось привлечь внимание к CSS. Итак, 17 декабря 1996 года опубликована первая спецификация (CSS1) и она была рекомендована к использованию Консорциумом Всемирной паутины (W3C).

После небольшого успеха положение дел у технологии CSS пошли куда лучше и 12 мая 1998 года (через 2 года) была принята рекомендация W3C для CSS2. Следующим этапом была CSS 2.1 -версия W3C от 8 сентября 2009 года, она была построена на базе CSS2, и была работой над исправлением существующих ошибок. Сегодня актуальна версия CSS3, которая максимально расширена по сравнению с предыдущими версиями. CSS3 включают эффекты теней, а также скругленные углы у блоков. В CSS3 появилась возможность устанавливать изображения в качестве фона и использовать их как границы. Намного проще и удобнее стала работа с анимацией — теперь для ее создания достаточно возможностей самой CSS3, стало не нужно работать с языком Java Script.

CSS — это язык, содержащий набор свойств для определения внешнего вида документа. Спецификация CSS определяет свойства и описательный язык для установления связи с HTML-элементами.

CSS — абстракция, в которой внешний вид веб-документа определяется отдельно от его содержания.

Внутренние стили определяются атрибутом style конкретных тегов. Внутренний стиль действует только на определенные такими тегами элементы. Этот метод мало отличается от традиционного HTML. Глобальные стили CSS располагаются в контейнере , расположенном в свою очередь в контейнере . . Глобальные стили являются универсальным средством, позволяющим не только оперативно изменять внешний вид веб-страницы, но и бороться с перегруженностью документа оформительскими тегами. Проблема в том, что такое стили надо прописывать на каждой странице сайта. Внешние (связанные) стили определяются в отдельном файле с расширением css. Внешние стили позволяют всем страницам сайта выглядеть единообразно.

Для связи с файлом, в котором описаны стили, используется тег
, расположенный в контейнере . . В этом теге должны быть заданы два атрибута: rel=»stylesheet» и href, определяющий адрес файла стилей.

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

Плюсы и минусы использования CSS

До того, как появился CSS, оформление web-страниц могло осуществляться непосредственно внутри содержимого документа, появление же технологии CSS дало возможность разделению содержания и представления документа. Благодаря этой возможности стало реальным простое применение единого стиля оформления для большинства подобных документов, и стало доступно быстрое изменение их оформления. Использование CSS в разработке сайтов имеет свои плюсы и минусы.

  • · Простота самого языка CSS вместе с принципом отделения оформления от содержания дает возможность сократить время на разработку и поддержку сайта.
  • · Имеется несколько вариантов дизайнов страницы для просмотра на разных устройствах. Например, дизайн на экране компьютера рассчитан на одну ширину, и будет полностью выводиться на экран, а на мобильных устройствах он будет подстраиваться к размерам экрана и некоторые элементы будут исключены от показа, также и при печати, будет печататься нужный текст, без лишнего (например, без шапки меню).
  • · Уменьшается время загрузки страниц web-сайта за счет переноса правил представления данных в отдельный CSS-файл. Благодаря этому браузер загружает только структуру документа, а также данные, хранимые на странице, а представление этих данных загружается браузером только один раз и может бать закеширован, — благодаря этому уменьшается трафик, время загрузки, а также нагрузка на сервер.
  • · Простота изменения дизайна. Один CSS управляет отображением множества HTML-страниц. Когда возникает необходимость изменить дизайн сайта, то незачем править каждую страницу. Для последующего изменения дизайна всего лишь нужно изменить CSS-файл, и как результат, изменение дизайна делается быстрее.
  • · CSS предоставляет дополнительные возможности форматирования, о которых при использовании только самих атрибутов даже и не приходилось мечтать.
  • · Повышение совместимости с разными платформами за счет использования web-стандартов.
  • · Различное отображение вёрстки в разных браузерах. Если браузеры устаревшие, то возможно, что одни и те же данные CSS по-разному ими интерпретируются.
  • · Необходимость исправлять не только один CSS-файл, но и теги HTML. Часто встречается на практике необходимость исправлять не только один CSS-файл, но и теги HTML, которые связаны с селекторами CSS. Иногда это значительно увеличивает время редактирования, а также и тестирования.

Итак, CSS — это сильнейший инструмент и один из основных составляющих практически любого web-сайта. Без CSS просто невозможно представить современную деятельность web-разработчиков. Сегодня CSS — это общепринятый стандарт разработки, который принимается всеми без исключения компаниями-разработчиками, что явно показывает его значимость и необходимость.

JavaScript изначально создавался для того, чтобы сделать веб-страницы «живыми». Программы на этом языке называются скриптами. В браузере они подключаются напрямую к HTML и, как только загружается страница — тут же выполняются.

Основные архитектурные черты: динамическая типизация, слабая типизация, автоматическое управление памятью, прототипное программирование, функции как объекты первого класса.

На JavaScript оказали влияние многие языки, при разработке была цель сделать язык похожим на Java, но при этом лёгким для использования непрограммистами. Языком JavaScript не владеет какая-либо компания или организация, что отличает его от ряда языков программирования, используемых в веб-разработке.

Название «JavaScript» является зарегистрированным товарным знаком компании Oracle Corporation.

Перед Бренданом Эйхом, нанятым в компанию Netscape 4 апреля 1995 года, была поставлена задача внедрить язык программирования Scheme или что-то похожее в браузер Netscape. Поскольку требования были размыты, Эйха перевели в группу, ответственную за серверные продукты, где он проработал месяц, занимаясь улучшением протокола HTTP. В мае разработчик был переброшен обратно, в команду, занимающуюся клиентской частью (браузером), где он немедленно начал разрабатывать концепцию нового языка программирования. Менеджмент разработки браузера, включая Тома Пакина, Михаэля Тоя , Рика Шелла, был убеждён, что Netscape должен поддерживать язык программирования, встраиваемый в HTML-код страницы.

Помимо Брендана Эйха в разработке участвовали сооснователь Netscape Communications Марк Андрессен(рис2.) и сооснователь Sun Microsystems Билл Джой(рис 3.): чтобы успеть закончить работы над языком к релизу браузера, компании заключили соглашение о сотрудничестве в разработке. Они ставили перед собой цель обеспечить «язык для склеивания» составляющих частей веб-ресурса: изображений, плагинов, Java-апплетов, который был бы удобен для веб-дизайнеров и программистов, не обладающих высокой квалификацией.

Первоначально язык назывался Mocha, затем он был переименован в LiveScript и предназначался как для программирования на стороне клиента, так и для программирования на стороне сервера (там он должен был называться LiveWire). На синтаксис оказали влияние языки Си и Java, и, поскольку Java в то время было модным словом, 4 декабря 1995 года LiveScript переименовали в JavaScript, получив соответствующую лицензию у Sun. Анонс JavaScript со стороны представителей Netscape и Sun состоялся накануне выпуска второй бета-версии Netscape Navigator. В нём декларируется, что 28 лидирующих ИТ-компаний выразили намерение использовать в своих будущих продуктах JavaScript как объектный скриптовый язык с открытым стандартом.

В 1996 году компания Microsoft выпустила аналог языка JavaScript, названный JScript. Анонсирован этот язык был 18 июля 1996 года. Первым браузером, поддерживающим эту реализацию, был Internet Explorer 3.0.

По инициативе компании Netscape была проведена стандартизация языка ассоциацией ECMA. Стандартизированная версия имеет название ECMAScript, описывается стандартом ECMA-262. Первой версии спецификации соответствовал JavaScript версии 1.1, а также языки JScript и ScriptEasy.

Перед молодым инженером Бренданом Айком, была поставлена задача, создать язык, который был бы похож на Java, но был поменьше и как писал сам автор «эдаким младшим его братом», и очень важно, имел бы выразительную лексику, чтобы непрограммисты могли быстро освоить технологию. Уже по истечению 10-ти дней была написана первая версия языка, которую решили назвать LiveScript. Конечно, создать за короткий промежуток времени идеальный язык вряд ли возможно, но, несмотря на некоторые свои недостатки, он решал поставленную перед ним задачу, а именно, позволял работать с HTML без перезагрузки страницы.

Через некоторое время, язык был переименован в JavaScript. Такое название выбрано не случайно. В то время, да собственно как и сейчас, язык Java был очень популярен и приставка слова Java, должна была привлечь больше внимания к языку. И это дало свои плоды, люди заинтересовались, попробовали, оценили возможности языка, да так, что после анонса технологии, более 20-ти компаний выразили намерение использовать в своих будущих продуктах Javascript как объектный скриптовый язык с открытым стандартом. И это был 1995 год.

JavaScript является объектно-ориентированным языком, но используемое в языке прототипирование обуславливает отличия в работе с объектами по сравнению с традиционными класс-ориентированными языками. Кроме того, JavaScript имеет ряд свойств, присущих функциональным языкам — функции как объекты первого класса, объекты как списки, карринг, анонимные функции, замыкания — что придаёт языку дополнительную гибкость.

Несмотря на схожий с Си синтаксис, JavaScript по сравнению с языком Си имеет коренные отличия:

  • · объекты, с возможностью интроспекции;
  • · функции как объекты первого класса;
  • · автоматическое приведение типов;
  • · автоматическая сборка мусора;
  • · анонимные функции.

В языке отсутствуют такие полезные вещи, как:

  • · модульная система: JavaScript не предоставляет возможности управлять зависимостями и изоляцией областей видимости;
  • · стандартная библиотека: в частности, отсутствует интерфейс программирования приложений по работе с файловой системой, управлению потоками ввода-вывода, базовых типов для бинарных данных;
  • · стандартные интерфейсы к веб-серверам и базам данных;
  • · система управления пакетами, которая бы отслеживала зависимости и автоматически устанавливала их.

«Самый неправильно понятый язык программирования в мире стал самым популярным в мире языком программирования».

Дуглас Крокфорд утверждает, что лидирующую позицию JavaScript занял в связи с развитием AJAX, поскольку браузер стал превалирующей системой доставки приложений. Он также констатирует растущую популярность JavaScript, то, что этот язык встраивается в приложения, отмечает значимость языка.

Согласно TIOBE Index, базирующемуся на данных поисковых систем Google, MSN, Yahoo!, Википедия и YouTube, в апреле 2015 года JavaScript находился на 6 месте (год назад на 9)[28].

По данным Black Duck Software (англ.)[29] в разработке открытого программного обеспечения доля использования JavaScript росла. 36 % проектов, релизы которых состоялись с августа 2008 по август 2009 гг., включают JavaScript, наиболее часто используемый язык программирования с быстрорастущей популярностью. 80 % открытого программного обеспечения использует Си, C++, Java, Shell и JavaScript. При этом JavaScript — единственный из этих языков, чья доля использования увеличилась (более чем на 2 процента, если считать в строках кода).

JavaScript является самым популярным языком программирования, используемым для разработки веб-приложений на стороне клиента

Программы на JavaScript — обычный текст. Они не требуют какой-то специальной подготовки. В этом плане JavaScript сильно отличается от другого языка, который называется Java.

Почему JavaScript? Когда создавался язык JavaScript, у него изначально было другое название: «LiveScript». Но тогда был очень популярен язык Java, и маркетологи решили, что схожее название сделает новый язык более популярным.

Планировалось, что JavaScript будет эдаким «младшим братом» Java. Однако история распорядилась по-своему, JavaScript сильно вырос, и сейчас это совершенно независимый язык, со своей спецификацией, которая называется ECMAScript, и к Java не имеет никакого отношения.

JavaScript может выполняться не только в браузере, а где угодно, нужна лишь специальная программа — интерпретатор. Процесс выполнения скрипта называют «интерпретацией».

Для выполнения программ, не важно на каком языке, существуют два способа: «компиляция» и «интерпретация».

Компиляция — это когда исходный код программы, при помощи специального инструмента, другой программы, которая называется «компилятор», преобразуется в другой язык, как правило — в машинный код. Этот машинный код затем распространяется и запускается. При этом исходный код программы остаётся у разработчика.

Интерпретация — это когда исходный код программы получает другой инструмент, который называют «интерпретатор», и выполняет его «как есть». При этом распространяется именно сам исходный код (скрипт). Этот подход применяется в браузерах для JavaScript.

Современные интерпретаторы перед выполнением преобразуют JavaScript в машинный код или близко к нему, оптимизируют, а уже затем выполняют. И даже во время выполнения стараются оптимизировать. Поэтому JavaScript работает очень быстро.

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

Что умеет JavaScript?

Современный JavaScript — это «безопасный» язык программирования общего назначения. Он не предоставляет низкоуровневых средств работы с памятью, процессором, так как изначально был ориентирован на браузеры, в которых это не требуется.Что же касается остальных возможностей — они зависят от окружения, в котором запущенJavaScript. В браузере JavaScript умеет делать все, что относится к манипуляции со страницей, взаимодействию с посетителем и, в какой-то мере, с сервером:

  • — Создавать новые HTML-теги, удалять существующие, менять стили элементов, прятать, показывать элементы и т.п.
  • — Реагировать на действия посетителя, обрабатывать клики мыши, перемещение курсора, нажатие на клавиатуру и т.п.
  • — Посылать запросы на сервер и загружать данные без перезагрузки страницы (эта технология называется «AJAX»).
  • — Получать и устанавливать cookie, запрашивать данные, выводить сообщения.
  • — и многое, многое другое!

Что НЕ умеет JavaScript?

JavaScript — быстрый и мощный язык, но браузер накладывает на его исполнение некоторые ограничения.

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

  • — JavaScript не может читать/записывать произвольные файлы на жесткий диск, копировать их или вызывать программы. Он не имеет прямого доступа к операционной системе.
  • — Современные браузеры могут работать с файлами, но эта возможность ограничена специально выделенной директорией — «песочницей». Возможности по доступу к устройствам также прорабатываются в современных стандартах и частично доступны в некоторых браузерах.
  • — JavaScript, работающий в одной вкладке, не может общаться с другими вкладками и окнами, за исключением случая, когда он сам открыл это окно или несколько вкладок из одного источника (одинаковый домен, порт, протокол).

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

В чем уникальность JavaScript?

Есть как минимум три замечательных особенности JavaScript:

  • — Полная интеграция с HTML/CSS.
  • — Простые вещи делаются просто.
  • — Поддерживается всеми распространенными браузерами и включен по умолчанию.

Этих трёх вещей одновременно нет больше ни в одной браузерной технологии. Поэтому JavaScript и является самым распространенным средством создания браузерных интерфейсов.

SVG — язык разметки масштабируемой векторной графики, созданный Консорциумом Всемирной паутины (W3C) и входящий в подмножество расширяемого языка разметки XML, предназначен для описания двумерной векторной и смешанной векторно/растровой графики в формате XML. Поддерживает как неподвижную, так и анимированную интерактивную графику — или, в иных терминах, декларативную и скриптовую. Не поддерживает описание трёхмерных объектов. Это открытый стандарт, который является рекомендацией консорциума W3C.

  • — Текстовый формат — файлы SVG можно читать и редактировать (при наличии некоторых навыков) при помощи обычных текстовых редакторов. При просмотре документов, содержащих SVG графику, имеется доступ к просмотру кода просматриваемого файла и возможность сохранения всего документа. Кроме того, SVG файлы обычно получаются меньше по размеру, чем сравнимые по качеству изображения в форматах JPEG или GIF, а также хорошо поддаются сжатию.
  • — Масштабируемость — SVG является векторным форматом. Существует возможность увеличить любую часть изображения SVG без потери качества. Дополнительно, к элементам SVG документа возможно применять фильтры — специальные модификаторы для создания эффектов, подобных применяемым при обработке растровых изображений (размытие, выдавливание, сложные системы трансформации и др.) В тексте SVG-кода фильтры описываются тегами, визуализацию которых обеспечивает средство просмотра, что не влияет на размер исходного файла, обеспечивая при этом необходимую иллюстративную выразительность.
  • — Широко доступно использование растровой графики в SVG документах. Имеется возможность вставлять элементы с изображениями в форматах PNG, GIF или JPG.
  • — Текст в графике SVG является текстом, а не изображением, поэтому его можно выделять и копировать, он индексируется поисковыми машинами, не нужно создавать дополнительные метафайлы для поисковых роботов.
  • — SVG документы легко интегрируются с HTML документами. Внешний SVG подключаются через тег , значение атрибута data — имя файла с расширением «.svg», содержащего разметку SVG, type — MIME-тип, то есть image/svg+xml. Атрибуты width и height определяют размеры области SVG по горизонтали и по вертикали. Элементы SVG совместимы с HTML и DHTML.

Совместимость с CSS. Отображением (форматированием и декорированием) SVG элементов можно управлять с помощью таблицы стилей CSS 2.0 и её расширений, либо напрямую с помощью атрибутов SVG элементов.

Notepad++ — текстовый редактор, который приняли «на вооружение» не только программисты, веб-мастера, модификаторы, но и обычные пользователи, так или иначе связанные с редактированием. Программа распространяется свободно, имеет открытый исходный код, потребляет минимум ресурсов, быстро загружается. Утилита позиционируется, прежде всего, как редактор исходных кодов. Вместе с этим, Notepad++ довольно часто используется для открытия различных текстовых файлов.Документы открываются программой в так называемых табах — отдельных вкладках. При работе пользователь может перемещаться между ними, активируя необходимый документ, внося в него изменения, и сохраняя его нажатием клавиши мыши. Помимо этого, при закрытии и следующем запуске приложения, табы, над которыми совершались действия, сохраняются.

Рабочее окно утилиты можно разделить на две части. В такой способ удобно сравнивать несколько вариаций одного и того же документа. Для определения отличий в Notepad++ встроен плагин Compare.

С помощью Notepad++ можно открыть следующие форматы файлов:

Текстовые ini, log, txt, text, C++, language files h, hpp, hxx, c, cpp, cxx, cc, Java, class, cs, pas, inc, html, tex, SQL, vbs и многие другие.

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

Кроме всего вышеперечисленного, стоит отметить следующие особенности Notepad++:

  • — ворачивание блоков и подсветка текста, в зависимости от синтаксиса языка программирования;
  • — функция WYSIWYG — вывод на печать того, что находится на экране в окне редактирования;
  • — автозавершение набираемого слова;
  • — поддержка Поиска/Замены регулярных выражений — пользователь может менять определенные строки в документе, используя определенные выражения;
  • — перемещение фрагментов текста или отдельного слова на новое место;
  • — масштабирование — уменьшение и увеличение содержимого документа;
  • — — динамическое видоизменение окон просмотра;
  • — — поддержка огромного числа языков;
  • — — автоопределение состояния файла — при изменении или удалении файла, редактируемого в Notepad++, иной утилитой, пользователь получает программное сообщение;
  • — расстановка заметок по тексту документа;
  • — запись макросов и их выполнение;

Главная же особенность Notepad++ — поддержка плагинов, которые способствуют расширению базового функционала редактора. В программу интегрируются дополнительные плагины, позволяющие настроить проверку орфографии, автоматическое сохранение документов, симметричное и асимметричное шифрование текста, HEX-редактор, FTP-менеджер.

На рисунке 1 отображен внешний вид редактора. Он очень простой и многофункциональный.

Разработка сайта

Среда разработки web-сайта

При разработке web-сайта используются:

  • — HTML — язык разметки web-страниц;
  • — CSS — формальный язык описания внешнего вида web-страницы;
  • — JavaScript — язык программирования;
  • — JavaScript-библиотека JQuery 2.2.3;
  • — Фреймворк Bootstrap 3.3.6;
  • — SVG — язык разметки масштабируемой векторной графики;
  • — Notepad++ — редактор кода;

Написание сайта на языке HTML нужно начать с того, что необходимо понять, что это за язык. HTML — это Hyper Text Markup Language — язык гипертекстовой разметки. HTML — компьютерный язык, а следовательно он имеет свои собственные правила (синтаксис), которые необходимо соблюдать. HTML — это язык разметки, значит, он берет определенные части документа и придает им особый вид.

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

На сегодняшний день язык HTML существенно усовершенствован. Его прекрасно дополняют технологии JavaScript, DHTML, CSS, PHP и др., что позволяет использовать новые возможности, но основой всего этого остаются все те же стандартные теги, которые и задают внешний вид web-страницы. Сейчас уже никого не удивишь таким словом, как браузер, и каждый скорей всего знает, что это такое и для чего он предназначен. Так вот браузер, считывая информацию со страниц, размещенных в Интернете, отображает ее на экране монитора в том виде, в котором четко указывают ему эти самые теги. Все существующие теги заключены в угловые скобки ( ), это и указывает браузеру на то, что перед ним тег, который ориентирует на определенное отображение страницы, причем сами теги на экране не отображаются.

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

Регистр букв в наименовании тега значения не имеет. Почти все теги являются парными, то есть существует открывающий «зону действия» тег ( ), и соответственно закрывающий ( ). Как же создать HTML-документ? Проще всего это сделать в текстовом редакторе. Для начала подойдет обычный Блокнот от Windows, можно пользоваться редакторами исходного кода, чтобы упростить свою работу, например Sublime Text.

CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки.

В 1990-х возникла необходимость стандартизировать web-инструменты, создать общие правила, с помощью которых программисты и web-дизайнеры могли бы создавать сайты. Как результат этой необходимости, появились языки HTML 4.01 и XHTML, а также стандарт CSS.

Первое упоминание о CSS было в 1994 году, когда Хоком Виум Ли предложил использовать CSS (Каскадные таблицы стилей) для стилистического оформления web-страниц. У него не сразу получилось продвинуть свою технологию, — только через пару лет ему удалось привлечь внимание к CSS. Итак, 17 декабря 1996 года опубликована первая спецификация (CSS1) и она была рекомендована к использованию Консорциумом Всемирной паутины (W3C).

После небольшого успеха положение дел у технологии CSS пошли куда лучше и 12 мая 1998 года (через 2 года) была принята рекомендация W3C для CSS2. Следующим этапом была CSS 2.1 -версия W3C от 8 сентября 2009 года, она была построена на базе CSS2, и была работой над исправлением существующих ошибок. Сегодня актуальна версия CSS3, которая максимально расширена по сравнению с предыдущими версиями. CSS3 включают эффекты теней, а также скругленные углы у блоков. В CSS3 появилась возможность устанавливать изображения в качестве фона и использовать их как границы. Намного проще и удобнее стала работа с анимацией — теперь для ее создания достаточно возможностей самой CSS3, стало не нужно работать с языком Java Script.

CSS — это язык, содержащий набор свойств для определения внешнего вида документа. Спецификация CSS определяет свойства и описательный язык для установления связи с HTML-элементами.

CSS — абстракция, в которой внешний вид веб-документа определяется отдельно от его содержания.

Внутренние стили определяются атрибутом style конкретных тегов. Внутренний стиль действует только на определенные такими тегами элементы. Этот метод мало отличается от традиционного HTML. Глобальные стили CSS располагаются в контейнере , расположенном в свою очередь в контейнере . . Глобальные стили являются универсальным средством, позволяющим не только оперативно изменять внешний вид веб-страницы, но и бороться с перегруженностью документа оформительскими тегами. Проблема в том, что такое стили надо прописывать на каждой странице сайта. Внешние (связанные) стили определяются в отдельном файле с расширением css. Внешние стили позволяют всем страницам сайта выглядеть единообразно.

Для связи с файлом, в котором описаны стили, используется тег
, расположенный в контейнере . . В этом теге должны быть заданы два атрибута: rel=»stylesheet» и href, определяющий адрес файла стилей.

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

Плюсы и минусы использования CSS

До того, как появился CSS, оформление web-страниц могло осуществляться непосредственно внутри содержимого документа, появление же технологии CSS дало возможность разделению содержания и представления документа. Благодаря этой возможности стало реальным простое применение единого стиля оформления для большинства подобных документов, и стало доступно быстрое изменение их оформления. Использование CSS в разработке сайтов имеет свои плюсы и минусы.

  • · Простота самого языка CSS вместе с принципом отделения оформления от содержания дает возможность сократить время на разработку и поддержку сайта.
  • · Имеется несколько вариантов дизайнов страницы для просмотра на разных устройствах. Например, дизайн на экране компьютера рассчитан на одну ширину, и будет полностью выводиться на экран, а на мобильных устройствах он будет подстраиваться к размерам экрана и некоторые элементы будут исключены от показа, также и при печати, будет печататься нужный текст, без лишнего (например, без шапки меню).
  • · Уменьшается время загрузки страниц web-сайта за счет переноса правил представления данных в отдельный CSS-файл. Благодаря этому браузер загружает только структуру документа, а также данные, хранимые на странице, а представление этих данных загружается браузером только один раз и может бать закеширован, — благодаря этому уменьшается трафик, время загрузки, а также нагрузка на сервер.
  • · Простота изменения дизайна. Один CSS управляет отображением множества HTML-страниц. Когда возникает необходимость изменить дизайн сайта, то незачем править каждую страницу. Для последующего изменения дизайна всего лишь нужно изменить CSS-файл, и как результат, изменение дизайна делается быстрее.
  • · CSS предоставляет дополнительные возможности форматирования, о которых при использовании только самих атрибутов даже и не приходилось мечтать.
  • · Повышение совместимости с разными платформами за счет использования web-стандартов.
  • · Различное отображение вёрстки в разных браузерах. Если браузеры устаревшие, то возможно, что одни и те же данные CSS по-разному ими интерпретируются.
  • · Необходимость исправлять не только один CSS-файл, но и теги HTML. Часто встречается на практике необходимость исправлять не только один CSS-файл, но и теги HTML, которые связаны с селекторами CSS. Иногда это значительно увеличивает время редактирования, а также и тестирования.

Итак, CSS — это сильнейший инструмент и один из основных составляющих практически любого web-сайта. Без CSS просто невозможно представить современную деятельность web-разработчиков. Сегодня CSS — это общепринятый стандарт разработки, который принимается всеми без исключения компаниями-разработчиками, что явно показывает его значимость и необходимость.

JavaScript изначально создавался для того, чтобы сделать веб-страницы «живыми». Программы на этом языке называются скриптами. В браузере они подключаются напрямую к HTML и, как только загружается страница — тут же выполняются.

Основные архитектурные черты: динамическая типизация, слабая типизация, автоматическое управление памятью, прототипное программирование, функции как объекты первого класса.

На JavaScript оказали влияние многие языки, при разработке была цель сделать язык похожим на Java, но при этом лёгким для использования непрограммистами. Языком JavaScript не владеет какая-либо компания или организация, что отличает его от ряда языков программирования, используемых в веб-разработке.

Название «JavaScript» является зарегистрированным товарным знаком компании Oracle Corporation.

Перед Бренданом Эйхом, нанятым в компанию Netscape 4 апреля 1995 года, была поставлена задача внедрить язык программирования Scheme или что-то похожее в браузер Netscape. Поскольку требования были размыты, Эйха перевели в группу, ответственную за серверные продукты, где он проработал месяц, занимаясь улучшением протокола HTTP. В мае разработчик был переброшен обратно, в команду, занимающуюся клиентской частью (браузером), где он немедленно начал разрабатывать концепцию нового языка программирования. Менеджмент разработки браузера, включая Тома Пакина, Михаэля Тоя , Рика Шелла, был убеждён, что Netscape должен поддерживать язык программирования, встраиваемый в HTML-код страницы.

Помимо Брендана Эйха в разработке участвовали сооснователь Netscape Communications Марк Андрессен(рис2.) и сооснователь Sun Microsystems Билл Джой(рис 3.): чтобы успеть закончить работы над языком к релизу браузера, компании заключили соглашение о сотрудничестве в разработке. Они ставили перед собой цель обеспечить «язык для склеивания» составляющих частей веб-ресурса: изображений, плагинов, Java-апплетов, который был бы удобен для веб-дизайнеров и программистов, не обладающих высокой квалификацией.

Первоначально язык назывался Mocha, затем он был переименован в LiveScript и предназначался как для программирования на стороне клиента, так и для программирования на стороне сервера (там он должен был называться LiveWire). На синтаксис оказали влияние языки Си и Java, и, поскольку Java в то время было модным словом, 4 декабря 1995 года LiveScript переименовали в JavaScript, получив соответствующую лицензию у Sun. Анонс JavaScript со стороны представителей Netscape и Sun состоялся накануне выпуска второй бета-версии Netscape Navigator. В нём декларируется, что 28 лидирующих ИТ-компаний выразили намерение использовать в своих будущих продуктах JavaScript как объектный скриптовый язык с открытым стандартом.

В 1996 году компания Microsoft выпустила аналог языка JavaScript, названный JScript. Анонсирован этот язык был 18 июля 1996 года. Первым браузером, поддерживающим эту реализацию, был Internet Explorer 3.0.

По инициативе компании Netscape была проведена стандартизация языка ассоциацией ECMA. Стандартизированная версия имеет название ECMAScript, описывается стандартом ECMA-262. Первой версии спецификации соответствовал JavaScript версии 1.1, а также языки JScript и ScriptEasy.

Перед молодым инженером Бренданом Айком, была поставлена задача, создать язык, который был бы похож на Java, но был поменьше и как писал сам автор «эдаким младшим его братом», и очень важно, имел бы выразительную лексику, чтобы непрограммисты могли быстро освоить технологию. Уже по истечению 10-ти дней была написана первая версия языка, которую решили назвать LiveScript. Конечно, создать за короткий промежуток времени идеальный язык вряд ли возможно, но, несмотря на некоторые свои недостатки, он решал поставленную перед ним задачу, а именно, позволял работать с HTML без перезагрузки страницы.

Через некоторое время, язык был переименован в JavaScript. Такое название выбрано не случайно. В то время, да собственно как и сейчас, язык Java был очень популярен и приставка слова Java, должна была привлечь больше внимания к языку. И это дало свои плоды, люди заинтересовались, попробовали, оценили возможности языка, да так, что после анонса технологии, более 20-ти компаний выразили намерение использовать в своих будущих продуктах Javascript как объектный скриптовый язык с открытым стандартом. И это был 1995 год.

JavaScript является объектно-ориентированным языком, но используемое в языке прототипирование обуславливает отличия в работе с объектами по сравнению с традиционными класс-ориентированными языками. Кроме того, JavaScript имеет ряд свойств, присущих функциональным языкам — функции как объекты первого класса, объекты как списки, карринг, анонимные функции, замыкания — что придаёт языку дополнительную гибкость.

Несмотря на схожий с Си синтаксис, JavaScript по сравнению с языком Си имеет коренные отличия:

  • · объекты, с возможностью интроспекции;
  • · функции как объекты первого класса;
  • · автоматическое приведение типов;
  • · автоматическая сборка мусора;
  • · анонимные функции.

В языке отсутствуют такие полезные вещи, как:

  • · модульная система: JavaScript не предоставляет возможности управлять зависимостями и изоляцией областей видимости;
  • · стандартная библиотека: в частности, отсутствует интерфейс программирования приложений по работе с файловой системой, управлению потоками ввода-вывода, базовых типов для бинарных данных;
  • · стандартные интерфейсы к веб-серверам и базам данных;
  • · система управления пакетами, которая бы отслеживала зависимости и автоматически устанавливала их.

«Самый неправильно понятый язык программирования в мире стал самым популярным в мире языком программирования».

Дуглас Крокфорд утверждает, что лидирующую позицию JavaScript занял в связи с развитием AJAX, поскольку браузер стал превалирующей системой доставки приложений. Он также констатирует растущую популярность JavaScript, то, что этот язык встраивается в приложения, отмечает значимость языка.

Согласно TIOBE Index, базирующемуся на данных поисковых систем Google, MSN, Yahoo!, Википедия и YouTube, в апреле 2015 года JavaScript находился на 6 месте (год назад на 9)[28].

По данным Black Duck Software (англ.)[29] в разработке открытого программного обеспечения доля использования JavaScript росла. 36 % проектов, релизы которых состоялись с августа 2008 по август 2009 гг., включают JavaScript, наиболее часто используемый язык программирования с быстрорастущей популярностью. 80 % открытого программного обеспечения использует Си, C++, Java, Shell и JavaScript. При этом JavaScript — единственный из этих языков, чья доля использования увеличилась (более чем на 2 процента, если считать в строках кода).

JavaScript является самым популярным языком программирования, используемым для разработки веб-приложений на стороне клиента

Программы на JavaScript — обычный текст. Они не требуют какой-то специальной подготовки. В этом плане JavaScript сильно отличается от другого языка, который называется Java.

Почему JavaScript? Когда создавался язык JavaScript, у него изначально было другое название: «LiveScript». Но тогда был очень популярен язык Java, и маркетологи решили, что схожее название сделает новый язык более популярным.

Планировалось, что JavaScript будет эдаким «младшим братом» Java. Однако история распорядилась по-своему, JavaScript сильно вырос, и сейчас это совершенно независимый язык, со своей спецификацией, которая называется ECMAScript, и к Java не имеет никакого отношения.

JavaScript может выполняться не только в браузере, а где угодно, нужна лишь специальная программа — интерпретатор. Процесс выполнения скрипта называют «интерпретацией».

Для выполнения программ, не важно на каком языке, существуют два способа: «компиляция» и «интерпретация».

Компиляция — это когда исходный код программы, при помощи специального инструмента, другой программы, которая называется «компилятор», преобразуется в другой язык, как правило — в машинный код. Этот машинный код затем распространяется и запускается. При этом исходный код программы остаётся у разработчика.

Интерпретация — это когда исходный код программы получает другой инструмент, который называют «интерпретатор», и выполняет его «как есть». При этом распространяется именно сам исходный код (скрипт). Этот подход применяется в браузерах для JavaScript.

Современные интерпретаторы перед выполнением преобразуют JavaScript в машинный код или близко к нему, оптимизируют, а уже затем выполняют. И даже во время выполнения стараются оптимизировать. Поэтому JavaScript работает очень быстро.

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

Что умеет JavaScript?

Современный JavaScript — это «безопасный» язык программирования общего назначения. Он не предоставляет низкоуровневых средств работы с памятью, процессором, так как изначально был ориентирован на браузеры, в которых это не требуется.Что же касается остальных возможностей — они зависят от окружения, в котором запущенJavaScript. В браузере JavaScript умеет делать все, что относится к манипуляции со страницей, взаимодействию с посетителем и, в какой-то мере, с сервером:

  • — Создавать новые HTML-теги, удалять существующие, менять стили элементов, прятать, показывать элементы и т.п.
  • — Реагировать на действия посетителя, обрабатывать клики мыши, перемещение курсора, нажатие на клавиатуру и т.п.
  • — Посылать запросы на сервер и загружать данные без перезагрузки страницы (эта технология называется «AJAX»).
  • — Получать и устанавливать cookie, запрашивать данные, выводить сообщения.
  • — и многое, многое другое!

Что НЕ умеет JavaScript?

JavaScript — быстрый и мощный язык, но браузер накладывает на его исполнение некоторые ограничения.

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

  • — JavaScript не может читать/записывать произвольные файлы на жесткий диск, копировать их или вызывать программы. Он не имеет прямого доступа к операционной системе.
  • — Современные браузеры могут работать с файлами, но эта возможность ограничена специально выделенной директорией — «песочницей». Возможности по доступу к устройствам также прорабатываются в современных стандартах и частично доступны в некоторых браузерах.
  • — JavaScript, работающий в одной вкладке, не может общаться с другими вкладками и окнами, за исключением случая, когда он сам открыл это окно или несколько вкладок из одного источника (одинаковый домен, порт, протокол).

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

В чем уникальность JavaScript?

Есть как минимум три замечательных особенности JavaScript:

  • — Полная интеграция с HTML/CSS.
  • — Простые вещи делаются просто.
  • — Поддерживается всеми распространенными браузерами и включен по умолчанию.

Этих трёх вещей одновременно нет больше ни в одной браузерной технологии. Поэтому JavaScript и является самым распространенным средством создания браузерных интерфейсов.

SVG — язык разметки масштабируемой векторной графики, созданный Консорциумом Всемирной паутины (W3C) и входящий в подмножество расширяемого языка разметки XML, предназначен для описания двумерной векторной и смешанной векторно/растровой графики в формате XML. Поддерживает как неподвижную, так и анимированную интерактивную графику — или, в иных терминах, декларативную и скриптовую. Не поддерживает описание трёхмерных объектов. Это открытый стандарт, который является рекомендацией консорциума W3C.

  • — Текстовый формат — файлы SVG можно читать и редактировать (при наличии некоторых навыков) при помощи обычных текстовых редакторов. При просмотре документов, содержащих SVG графику, имеется доступ к просмотру кода просматриваемого файла и возможность сохранения всего документа. Кроме того, SVG файлы обычно получаются меньше по размеру, чем сравнимые по качеству изображения в форматах JPEG или GIF, а также хорошо поддаются сжатию.
  • — Масштабируемость — SVG является векторным форматом. Существует возможность увеличить любую часть изображения SVG без потери качества. Дополнительно, к элементам SVG документа возможно применять фильтры — специальные модификаторы для создания эффектов, подобных применяемым при обработке растровых изображений (размытие, выдавливание, сложные системы трансформации и др.) В тексте SVG-кода фильтры описываются тегами, визуализацию которых обеспечивает средство просмотра, что не влияет на размер исходного файла, обеспечивая при этом необходимую иллюстративную выразительность.
  • — Широко доступно использование растровой графики в SVG документах. Имеется возможность вставлять элементы с изображениями в форматах PNG, GIF или JPG.
  • — Текст в графике SVG является текстом, а не изображением, поэтому его можно выделять и копировать, он индексируется поисковыми машинами, не нужно создавать дополнительные метафайлы для поисковых роботов.
  • — SVG документы легко интегрируются с HTML документами. Внешний SVG подключаются через тег , значение атрибута data — имя файла с расширением «.svg», содержащего разметку SVG, type — MIME-тип, то есть image/svg+xml. Атрибуты width и height определяют размеры области SVG по горизонтали и по вертикали. Элементы SVG совместимы с HTML и DHTML.
Мастер Йода рекомендует:  Обзор сервиса vdsina.ru

Совместимость с CSS. Отображением (форматированием и декорированием) SVG элементов можно управлять с помощью таблицы стилей CSS 2.0 и её расширений, либо напрямую с помощью атрибутов SVG элементов.

Notepad++ — текстовый редактор, который приняли «на вооружение» не только программисты, веб-мастера, модификаторы, но и обычные пользователи, так или иначе связанные с редактированием. Программа распространяется свободно, имеет открытый исходный код, потребляет минимум ресурсов, быстро загружается. Утилита позиционируется, прежде всего, как редактор исходных кодов. Вместе с этим, Notepad++ довольно часто используется для открытия различных текстовых файлов.Документы открываются программой в так называемых табах — отдельных вкладках. При работе пользователь может перемещаться между ними, активируя необходимый документ, внося в него изменения, и сохраняя его нажатием клавиши мыши. Помимо этого, при закрытии и следующем запуске приложения, табы, над которыми совершались действия, сохраняются.

Рабочее окно утилиты можно разделить на две части. В такой способ удобно сравнивать несколько вариаций одного и того же документа. Для определения отличий в Notepad++ встроен плагин Compare.

С помощью Notepad++ можно открыть следующие форматы файлов:

Текстовые ini, log, txt, text, C++, language files h, hpp, hxx, c, cpp, cxx, cc, Java, class, cs, pas, inc, html, tex, SQL, vbs и многие другие.

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

Кроме всего вышеперечисленного, стоит отметить следующие особенности Notepad++:

  • — ворачивание блоков и подсветка текста, в зависимости от синтаксиса языка программирования;
  • — функция WYSIWYG — вывод на печать того, что находится на экране в окне редактирования;
  • — автозавершение набираемого слова;
  • — поддержка Поиска/Замены регулярных выражений — пользователь может менять определенные строки в документе, используя определенные выражения;
  • — перемещение фрагментов текста или отдельного слова на новое место;
  • — масштабирование — уменьшение и увеличение содержимого документа;
  • — — динамическое видоизменение окон просмотра;
  • — — поддержка огромного числа языков;
  • — — автоопределение состояния файла — при изменении или удалении файла, редактируемого в Notepad++, иной утилитой, пользователь получает программное сообщение;
  • — расстановка заметок по тексту документа;
  • — запись макросов и их выполнение;

Главная же особенность Notepad++ — поддержка плагинов, которые способствуют расширению базового функционала редактора. В программу интегрируются дополнительные плагины, позволяющие настроить проверку орфографии, автоматическое сохранение документов, симметричное и асимметричное шифрование текста, HEX-редактор, FTP-менеджер.

На рисунке 1 отображен внешний вид редактора. Он очень простой и многофункциональный.

Среда создания сайтов

Для создания современных сайтов обычно используются: HTML, CSS, JavaScript (или VBScript), FLASH, PHP (или Perl) и реляционная база данных MySQL.

Клиентская среда (браузер, например Internet Explorer) является передним краем работы приложения. В этой среде, отображаются HTML-страницы в окне и обслуживаются истории сеансов HTML-страниц, отображаемых в браузере в течение сессии. Объекты этой среды, следовательно, обязаны иметь возможность манипулировать страницами, окнами и историей. Для этого и нужен клиентский язык — JavaScript.

При работе с сервером необходимы PHP (или Perl) и реляционная база данных MySQL.

HTML – это не язык программирования и не язык оформления документов. Это, в первую очередь, средство разметки текста. Ваша первоочередная задача — разметить текст, описать с помощью тэгов его структуру, сказав: «Это — параграф, это — цитата, это — список, а это — раздел».

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

DHTML

На самом деле языка DHTML нет. Динамический HTML – это коммерческий термин, придуманный для описания технологий, которые были введены в четвертой версии Web-браузеров и позволяли обходить ограничения HTML.

DHTML представляет собой комбинацию Web-стандартов:

CSS + JavaScript + DOM + ХHTML = DHTML

CSS – определяет атрибуты объектов,

JavaScript – изменяет объекты,

DOM – находит объекты,

ХHTML – создает объекты (выполняет разметку текста).

Созданная на основе DHTML страница может изменяться без обращения к серверу за дополнительными данными, т.е. представляют собой клиентский код (client-side-code), который в свою очередь,

позволяет существенно увеличить интерактивность Web-страниц.

• Поддерживается всеми браузерами.

• Использует стандартные технологии.

• Можно вносить изменения в Web-страницу после ее загрузки.

• Текстовые файлы DHTML загружаются быстрее, чем Flash и Java.

• Не требует модулей расширения.

• Прост в изучении.

• Высокая скорость разработки Web-страниц.

• Разный вид Web-страниц из-за несовместимости браузеров и операционных систем.

• JavaScript и CSS весьма чувствительны к ошибкам в синтаксисе.

• Ненадежная работа в связи с ошибками в браузерах.

CSS (Cascading Style Sheets) — язык таблиц каскадных стилей. Он разработан для того, чтобы расширить возможности по оформлению Web-страниц.

Для чего нужен CSS?

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

При использовании HTML и CSS важно понимать, следующее:

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

Таблицы стилей CSS формируют тексты физически, т.е. задают представление Web-страницы: каким шрифтом будут набраны обычный текст абзацев, каким цветом выделить заголовки, будут ли у таблицы рамка и пр.

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

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

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

XHTML

Язык XHTML представляет собой смесь XML и HTML, которая постепенно заменяет HTML.

DOM (Document Object Model) – объектная модель документа, которая позволяет динамически менять Web-страницу, используя язык написания сценариев. DOM ставит каждому элементу или объекту, определенному с помощью атрибута ID (идентификатора объекта), функцию JavaScript. А с помощью таких функций можно управлять свойствами атрибутов объекта, заданных через CSS.

Атрибут ID поддерживается всеми видимыми HTML-тегами. Его значение уникальное собственное имя элемента на странице, то есть на странице не должно быть нескольких элементов с одним id, в отличии от элемента class, который является вольным признаком для нескольких элементов. ID – основное понятие динамического HTML (DHTML). С его помощью JavaScript определяет уникальный объект, и которым можно управлять с помощью JavaScript.

FLASH

Flash одновременно является и программой (Flash, Macromedia Inc.) и файловым форматом (расширение .swf).

• Платформенная независимость, т.е. страницы созданные при помощи Flash выглядят одинаково в разных операционных системах и различных браузерах.

• Распространенность и предоставление дизайнерам огромное количество инстркментов.

• Правильно созданные Flash-файлы созданы правильно, они занимают мало места и достаточно быстро загружаются.

• Flash-технология сложна в изучении.

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

• Проблемы с интерфейсом и его стандартизацией.

• Долгая загрузка из-за большого объема графических файлов.

Flash и DHTML

Дизайнерам Web-сайтов часто приходится делать выбор между Flash и DHTML. Если DHTML позволяет работать с интерактивностью при помощи HTML, CSS и JavaScript, то Flash представляет собой некоторый объект, встраиваемый в HTML-страницу, и является отдельной Internet-технологией.

Если перед Вами стоит проблема выбора, просто определите что будет размещено на вашем сайте:

1. Для использования на сайте эффектов мультимедиа больше подходит Flash.

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

Языки программирования в Интернет

Все языки программирования, используемые при разработке Web-сайтов, можно разделить на две большие группы.

К первой относятся те из них, код которых выполняется на компьютере посетителя сайта — в его браузере. Это всем известные JavaScript, VBScript, Java-апплеты. Программы, написанные на этих языках, встраиваются в код Web-страниц (или выносятся в отдельный файл с вызовом из Web-страницы).

Во вторую группу попадают те языки, программы на которых выполняются на том компьютере, где расположен Web-сервер. Эта группа гораздо обширнее, именно к ней и относится PHP. Однако от своих собратьев он выгодно отличается своей простотой. Создавая программы на этом языке, нет необходимости учитывать все те многочисленные мелочи, которые отравляют жизнь программистам на C++ или Perl: не надо заботиться о правах доступа к файлам сценария или прописывать точные пути к различным модулям и т. д. Для тестирования PHP-программ на локальном компьютере необязательно устанавливать на нем ту же операционную систему, что и у провайдера хостинга сайта, где они будут применяться,— достаточно лишь загрузить соответствующий Web-сервер и подключить к нему модуль PHP и целиком сосредоточиться на решаемой задаче.

Программы, написанные на PHP, выполняются на стороне сервера, т.е. начинают работать до загрузки страницы после подачи вашего запроса (например, ввода адреса). Они обрабатываются программой-сервером и в качестве ответа на ваш запрос выдают динамически (т.е. в зависимости от запроса, интерактивно) генерируемые страницы. Эти страницы могут содержать как стандартные HTML-тэги, так и «скрипты» (маленькие программы WEB-приложения, выполняемые на стороне клиента), написанные на JavaScript или VBScript, которые начнут выполняться после полной загрузки браузером сгенерированной на сервере страницы.

JavaScript и VBScript предназначены, в основном, для придания динамичности (подвижности) вашей страничке — выпадающие «менюшки», мерцающие кнопочки, эффектные переходы и т.п. Функции JavaScript, позволяют работать только с ресурсами клиентской машины и только с вашей локальной файловой системой.

Скорость выполнения скрипта или программы. Среди локальных наивысшим быстродействием обладает JavaScript, среди серверных рекордсменом по обработке небольших объемов данных и текста является Perl. PHP — на втором месте, но при этом имеет широчайшие возможности доступа практически к любым серверам баз данных.

Секретность. Скрипты на JavaScript и VBScript встраиваются непосредственно в web-страницу и остаются видны в коде страницы во время ее просмотра. То есть исходный текст любого скрипта, написанного на встроенном языке, мы можем просмотреть, открыв HTML-код страницы. Естественно, ни о какой секретности, безопасности или соблюдении авторских прав в данном случае речь не идет — кто захочет, тот и просмотрит, скопирует и переделает на свой лад. Программы на Perl пишутся в виде отдельных файлов и подключаются к странице с помощью директив SSI, тэгов IFRAME или IMG. При этом в коде страницы мы получаем результат выполнения скрипта, а не его исходный код. Режим секретности — максимальный. Программы на PHP, так же как и на JavaScript, встраиваются в тело страницы и, но как и Perl-программы, возвращают пользователю только результат выполнения.

JavaScript

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

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

• Работа с формами. Через скрипты удобно получать и обрабатывать любые данные форм, это позволяет проверить информацию на правильность ввода перед ее отправкой на сервер. Можно создать «защиту от дурака» для контроля того, чтобы в элементы форм вводились корректные сообщения. Так, если в текстовом поле просят ввести число, следует сразу пресекать возможность ввода нечисловых символов.

• Работа с изображениями. Через скрипты можно делать предварительную загрузку изображений. Еще до прямого обращения к изображениям, браузер помещает их в свою память, чтобы по мере необходимости быстрее отобразить в документе. Основные параметры изображений, такие как: ширина, высота картинок и адрес графического файла, тоже можно менять динамически. Это позволяет создавать эффект перекатывания, когда рисунок меняется на другой при наведении на него курсора мыши и обратно, когда курсор уводится с изображения. Подобным методом делаются и галереи фотографий — смена изображений происходит в пределах одной страницы.

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

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

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

• Создание новых окон. Скрипты позволяют создавать новые окна, задавать у этих окон вид отображения и формировать их содержимое. Причем, у созданных таким способом окон можно отключать адресную строку, полосы прокрутки, меню и управлять их размером и положением на экране.

• Проверка браузера. Подход разных браузеров к объектной модели, хоть и стандартизирован, но еще не всеми до конца принят. Поэтому для создания универсального документа, одинаково работающего везде, приходится делать проверку, какой в данный момент используется браузер, и давать ему подходящий код.

• Математические функции. JavaScript содержит все необходимые арифметические операции, поддерживает все стандартные математические функции, как с целыми числами, так и с плавающей точкой.

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

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

При разработке приложения JavaScript помните о разнице между клиентской и серверной платформами.

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

В прошлом веке, чтобы создать сайт «на мировом уровне», достаточно было просто уметь работать с HTML и обладать художественным вкусом. Спустя некоторое время требования усложнились: использование JavaScript и Dynamic HTML стало рутинным, а дизайн страниц, не имеющих подобных «украшений», считался устаревшим. Вскоре правилом «хорошего тона» для корпоративного сайта стало применение сложных программ на Perl или C++. Однако Web-дизайнеры не желали мириться с такой ситуацией. И на свет появился PHP — язык программирования, обладающий возможностями сложных скриптовых языков, но в то же время удивительно простой и легкий в изучении и применении.

А зачем же вообще может потребоваться PHP? Разве обычных HTML и JavaScript недостаточно для создания красивой Web-страницы?

Почему нужно выбирать PHP

PHP является внедряемым языком сценариев. Цель языка состоит в том, чтобы позволить веб-разработчикам быстро создавать динамически генерируемые страницы. Кроме того, разработчикам Web-приложений нет необходимости говорить, что web-страницы — это не только текст и картинки. Достойный внимания сайт должен поддерживать некоторый уровень интерактивности с пользователем: поиск информации, продажа продуктов, конференции и т.п. PHP работает как часть Web-сервера. В этом языке нет строгой типизации данных и нет необходимости в действиях по выделению/освобождению памяти. Программы, написанные на PHP, достаточно легко читаемы. Написанный PHP – код легко зрительно прочитать и понять.

На PHP можно сделать все: обрабатывать данные из форм, генерировать динамические страницы, получать и посылать сеансы — куки (cookies). Кроме этого в PHP включена поддержка многих баз данных (databases), что делает написание Web-приложений с использованием БД до невозможности простым. Вдобавок ко всему PHP понимает протоколы IMAP, SNMP, NNTP, POP3 и даже HTTP, а также имеет возможность работать с сокетами (sockets) и общаться по другим протоколам. PHP может серьезно облегчить работу создателя сайта. С помощью команды include() можно автоматически вставлять один и тот же фрагмент HTML-кода во множество страниц, просто поместив в них эту команду с именем файла, содержащего код общей части. В результате для обновления такой общей части будет достаточно отредактировать один файл — тот, который ее, собственно, и содержит, и соответственно изменятся все остальные страницы. Также, при обновлении новостей редактированию придется подвергать лишь сам их текст, а не HTML-код заглавной страницы, что и самому делать легче, и неопытному помощнику доверить можно.

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

Одним из наиболее заметных достоинств PHP является возможность легкой работы с серверами баз данных. Для этого достаточно установить на Web-сервере программу работы с базой данных (наиболее часто используется бесплатная MySQL) и включить в текст PHP-сценария команды работы с нею. Возможности языка весьма серьезно расширяются с помощью дополнительных модулей, содержащих различные функции. Они при необходимости размещаются там же, где установлен PHP-интерпретатор, а загрузить их можно с адреса www.php.net, там же, в разделе документации, приведено и полное описание работы с ними. Например, модуль Zlib позволяет работать из программы на PHP с архивами в формате Gzip, а Libswf — с Flash-презентациями, создавая их и редактируя прямо на сервере. Так как PHP — развивающийся язык, то новые модули появляются довольно часто. Однако применять их получится только после установки на Web-сервер, чему провайдеры хостинговых услуг могут и воспротивиться. Поэтому при желании использовать функции из какого-либо модуля (да и самого языка PHP) сначала необходимо проверить, поддерживает ли их Web-сервер, на котором вы собираетесь хостить сайт. Сделать это довольно просто, разместив на сервере страницу со строчкой и загрузив ее с сервера в браузер (на ней будет отображена информация о версии PHP, параметрах Web-сервера и многом другом, в т. ч. дополнительных модулях).

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

Очень важное замечание: Программа, написанная на языке РНР, выполняется на сервере. Браузер посылает серверу запрос на страницу с PHP-кодом. Сервер отдает эту страницу на исполнение интерпретатору PHP, интерпретатор генерирует HTML-код, отдает серверу, а сервер посылает клиенту. Никакого РНР кода в браузер не попадает! Увидеть исходный PHP-код невозможно!

РНР не выполняется в браузере. РНР находится на сервере и ждет новых запросов с данными для обработки. PHP, но не скрипт! Это программа, которая выполнилась на сервере, отдала пользователю HTML-страницу и завершил работу. Все данные, которые были в нем — пропали. Именно поэтому, если какая-то переменная нужна при последующих вызовах, ее надо передать снова.

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

Прежде, чем изучать PHP — изучите хотя бы основы HTML! Прежде, чем что-то требовать от PHP — попробуйте сделать это на HTML.

Применение PHP можно разделить на три группы:

1. Самое простое (но очень мощное) применение — это использование PHP для создания сайтов из модулей. Записать все неизменяемые части сайта в отдельные файлы (меню, шапку, тело) и вместо того, чтобы писать одно и то же на каждой странице, просто вызывать вложение соответствующего модуля. Это уже значительно облегчит работу с сайтом. К примеру, если добавится новый пункт в меню.

2. Следующий этап — создание отдельных небольших программок. Это может быть голосование, гостевая книга, конференции «форум» и пр. PHP применяется тогда, когда нужно какую-то информацию хранить на сервере. К примеру, гостевую книгу на JavaScript написать можно, но вот. увидит её сообщения только тот, кто их добавлял.

3. Победное шествие PHP па планете началось в тот миг, когда кому-то пришла в голову замечательная идея: Не добавлять материалы на сайт не обычным способом, закачивая HTML файлы по FTP, а забивая текст в форму, как сообщение в гостевую книгу. В этом случае пишутся две программы, одна из которых позволяет администратору добавить информацию на сайт, а вторая — показывает эту информацию посетителям. Сегодня так устроены практически все современные сайты. Первоначально PHP было сокращение от Personal Home Page, теперь это означает Personal Hypertext Preprocessor.

MySQL

MySQL – это быстрая и мощная система управления базами реляционными данных. Она позволяет эффективно хранить, искать, сортировать и выбирать информацию. Работа с базой данных имеет как преимущества, так и недостатки.

• Значительное сокращение кода (иногда в 2-3 раза) по сравнению с файловыми вариантами WEB-приложений, что сокращает время разработки и упрощает процесс отладки.

• Высокая скорость выполнения процедур запросов в СУБД, написаны компилируемом языке С, который на два порядка производительнее интерпретируемого языка PHP.

• Зависимость приложения не только от работоспособности WEB-сервера, но и от работоспособности сервера данных. Вероятность того, что один из двух серверов выдей из строя выше, чем при использовании одного сервера.

• Работа с файловой системой осуществляется быстрее, чем при использовании СУБД. Так, поисковая система Google, известная высокой скоростью обработки запросов, основана на модели плоских файлов и не использует базы данных.

Применение СУБД вызвано в основном из-за того, что информация в Интернет может отображаться как пассивно (то есть пользователь может только считывать её), так и активно — тогда пользователь может добавлять информацию и редактировать её. Это: гостевые книги, форумы, чаты, блоги, wiki-проекты, системы управления контентом и т.п.

Преимущества использования СУБД в этом случае очевидны: все рутинные операции по записи, поиску и извлечению информации берет на себя сервер SQL, программисту остается только сосредоточиться на логике WEB-приложения. MySQL управляет доступом к данным, позволяя работать с ними одновременно нескольким пользователям, при этом гарантируя предоставление доступа только тем пользователям, которые имеют на это право. СУБД стала стандартом для использования в WEB-приложениях благодаря своей производительности, простоте установки и обслуживании.

Сейчас WEB-проекты становятся все сложнее и соответственно медленнее происходит их выполнение, что в некоторых случаях значительно раздражает пользователей. Да и разработка занимает длительное время. Решение этой проблемы лежит в двух направлениях:

1. Шаблоны. В настоящее время разработка WEB приложений стремится к разграничению клиентской части и серверной, этим и обуславливается повсеместное использование шаблонов. Переплетать между собой различные технологии становиться слишком дорого для времени разработчика. Так, например, все стили форматирования выносятся в CSS или в XSL файлы, HTML или XML данные хранятся в других разделах, серверные обработчики в третьих, базы данных в четвертых. И если еще 5-6 лет назад практически везде можно было увидеть переплетение всего этого в одном файле, то сейчас это все чаще становиться редкостью.

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

2. AJAX – это радикально новая технология. Попробуйте представить JavaScript, который обладает всем возможностями PHP или Perl, включая работу с графикой и базами данных, который имеет гораздо более удобную расширяемость и практичность.

AJAX (Asynchronous Javascript and XML — «асинхронный JavaScript и XML») — это подход к построению интерактивных пользовательских интерфейсов веб-приложений, заключающийся в «фоновом» обмене данными браузера с веб-сервером. В результате при обновлении данных веб-страница не перезагружается полностью, и веб-приложения становятся более быстрыми и удобными. AJAX — один из компонентов концепции DHTML.

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

• Уменьшение нагрузки на сервер AJAX позволяет несколько снизить нагрузку на сервер. К примеру, в Gmail, когда вы отмечаете прочитанные письма, серверу достаточно внести изменения в базу данных и отправить клиентскому скрипту сообщение об успешном выполнении операции без необходимости повторно создавать страницу и передавать её клиенту.

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

• Интеграция со стандартными инструментами браузера Динамически создаваемые страницы не регистрируются браузером в истории посещения страниц, поэтому не работает кнопка «Назад» предоставляющая пользователям возможность вернуться к просмотренным ранее страницам, но существуют скрипты, которые могут решить эту проблему. Другой недостаток изменения содержимого страницы при постоянном URL заключается в невозможности сохранения закладки на желаемый материал. Частично решить эти проблемы можно с помощью динамического изменения идентификатора фрагмента (части URL после #), что позволяют многие браузеры.

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

• Старые методы учёта статистики сайтов становятся неактуальными Многие сервисы статистики ведут учёт просмотров новых страниц сайта, для сайтов страницы которых широко используют AJAX, такая статистика теряет актуальность.

Заключение

Для того, чтобы стать даже начинающим веб-программистом, достаточно освоить- три языка программирования — HTML, JavaScript, PHP. Работая над созданием WEB-приложений. Далее по ходу Вы освоите, и протокол передачи гипертекста http, и как взаимодействует компьютер пользователя с WEB-сервером, и что такое IP-адрес.

А затем, выходя на более высокий уровень разработок, Вы уже примете решение нужно ли Вам использовать такие инструментов как СУБД MySQL или AJAX. Дерзайте! Можно сделать все – двигаясь «шаг за шагом». Пусть даже если эти шаги будут иногда крошечными, но главное не останавливайтесь…

И не слушайте программистов, что для того чтобы делать сайты — необходимо много знать. Помните о главном – «Все гениальное просто».

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

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

Только командная строка в современных браузерах Интернет и поисковых Интернет-системах напоминает нам о тех временах.

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

Так вот. Тоже ожидает и Интернет. Можете об этом поспорить с кем угодно. Компьютеры уже становятся мобильными. Остался только один шаг: замена жесткого диска на кристаллы памяти большой емкости, и все. А теперь вспомните, удобно ли вам пользоваться SMS, набирая слова на крохотных клавишах мобильного телефона?

А имея с собой компьютер размерами с мобильный телефон, Вам не обязательно вести разговор голосом. Можно продиктовать этому устройству сообщение, которое он распознает, автоматически переведет ее в текст и передаст по электронной почте Вашему собеседнику. А на его компьютере записан синтезатор с шаблонами звуков Вашей речи, и он воспроизведет Ваше сообщение так, как будто Вы говорите это все ему лично!

А вот какой станет навигация в сети Интернет? Об этом вы можете поразмышлять сами… Но пока Интернет очень сильно напоминает технологию компьютеров 80-х годов. Опять пользователя грузят изучением формальных языков, различного рода систем, протоколов передачи данных и технологий, т.е. всякой всячиной, которая по идее должна быть от него скрыта. Помните, что главная цель в создания компьютеров (со слов его С.Джобса, разработчика первого персонального компьютера и основателя компании Apple): «Дать человеку возможность творчески (ассоциативно) мыслить, переложив процесс обработки больших объемов информации менее интеллектуального помощника».

Выбор среды разработки Web-сайтов

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

Мы будем рассматривать программы, которые поддерживают синтаксис языка разметки HTML, таблиц стилей CSS, и языка программирования PHP. Рассмотрим самые популярные варианты.

Notepad++. Является бесплатной программой, но она не кроссплатформенная (поддержка самых популярных операционных систем). Можно использовать только на операционных системах семейства Windows. Подсвечивает синтаксис большинства популярных языков программирования. Notepad++ является неплохим вариантом для web-разработки.

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


Sublime Text. Он лёгок в освоении, быстрый, имеет хорошую встроенную функциональность и крайне гибок в расширении при помощи плагинов, которых для него написано огромное количество. Также Sublime Text обладает очень активным и многочисленным сообществом, поэтому у него много расширений, визуальных тем и вариантов подсветки синтаксиса. Несмотря на то, что он платный, время бесплатного пробного использования не ограничено — единственное, чем он отличается от зарегистрированной версии, — довольно редко появляющимся окном с просьбой оплатить лицензию. Выбор среды разработки для нашего веб сайта мы остановим на Sublime Text, он является кроссплатформенным, его можно запустить с любой ОС (операционная система). Огромный набор плагинов и хорошая поддержка. Окно программы изображено на рисунке (Рисунок – 1.6).

Рисунок 1.6 – Среда разработки Sublime Text

3 СИСТЕМА УПРАВЛЕНИЯ КОНТЕНТОМ САЙТА (CMS)

3.1 Описание общей специфики CMS

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

Это стало возможным благодаря специализированным программам, или так называемым Content System Management (CMS). В дословном переводе это на звание обозначает Система управления контентом, или содержимым, поскольку система действительно управляет содержимым сайта, или, как принято говорить в англоязычной среде, контентом. В русском переводе «прижилось» название система управления сайтом.

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

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

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

Основы работы с CMS

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

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

После передачи или до передачи файлов системы на хостинг стоит позаботиться о создании на хостинге базы данных. Уровень взаимодействия с базами данных во многом зависит от провайдера услуг и нашего тарифного плана. Одни провайдеры создают первую базу данных сами за нас, другие этого не делают. Создать базу данных можно в панели управления вашим хостингом. Создавая базу данных, нам необходимо придумать имя пользователя базы данных, пароль и название базы. В дальнейшем эти три параметра будут использоваться в момент установки CMS на хостинг.

Что касается паролей для базы данных или паролей для сайтов, FTP и других паролей, то хотелось бы сразу обдумать все ошибки. Придумывая пароли, надо делать их как можно сложнее, используя для этого цифры с чередованием заглавных и прописных букв, а также другие доступные знаки. Все это позволит нам избежать взлома площадки, сайта, базы данных, FTP и т. д. Эти меры предосторожности особенно относятся к паролю администратора системы, под которым мы будете заходить на сайт. Пароль администратора – более важное звено, чем пароль даже для базы данных. Множество взломов системы связано именно с паролями администратора. Плохим паролем будут свои имена, имена жен, девушек, детей или дни рождения.

Лучший пароль – это когда мы открываем Windows-блокнот, переведем клавиатуру в английский регистр и в случайном порядке, набирая любые цифры, буквы в разном регистре, используя при этом обязательно знак подчеркивания и другие доступные символы длиною как минимум 16 символов. Это весьма действенный метод т.к. пароль будет иметь высокий уровень защищенности.

Когда все файлы переданы на хостинг и создана база данных, можно приступать к установке системы. Для этого нужно подключиться к Интернету и набрать в адресной строке браузера наше доменное имя. Возможно, понадобится еще ввести имя файла или определенный путь к инсталляционному файлу CMS. Например, может иметь место такой путь: www.имя_сайта.ru/install/install.php.

В документации по CMS эта информация всегда присутствует. После набора необходимого адреса система запустит механизм установки, и мы в пошаговом режиме пройдем все этапы инсталляции CMS на хостинг.

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

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

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

Последнее, о чем не стоит забывать, – это об обновлении CMS. В коммерческих системах обновление системы происходит прямо из административной части по нажатии одной кнопки. Обычно срок бесплатной лицензии на обновление системы действует в течение одного года. Впоследствии мы можем продлить этот срок еще на год, но заплатив некоторые денежные средства. В бесплатных CMS обновление происходит несколько по иной схеме. Здесь нам придется самим следить за сайтом разработчиков системы и после выхода очередного сервис-пака обновлять систему в ручном режиме. Это несложно и, как правило, сводится к обновлению на хостинге через FTP или файловый менеджер некоторых системных файлов, в которых были выявлены различные ошибки или уязвимости.

Добавить комментарий