Разработка сайта, Среда разработки web-сайта - Разработка сайта для компании

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

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

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

HTML

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

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

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

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

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

CSS

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 располагаются в контейнере <style>...</style>, расположенном в свою очередь в контейнере <head>...</head>. Глобальные стили являются универсальным средством, позволяющим не только оперативно изменять внешний вид веб-страницы, но и бороться с перегруженностью документа оформительскими тегами. Проблема в том, что такое стили надо прописывать на каждой странице сайта. Внешние (связанные) стили определяются в отдельном файле с расширением css. Внешние стили позволяют всем страницам сайта выглядеть единообразно.

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

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

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

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

Преимущества CSS:

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

Недостатки CSS:

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

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

JavaScript

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

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++ довольно часто используется для открытия различных текстовых файлов. Документы открываются программой в так называемых табах - отдельных вкладках. При работе пользователь может перемещаться между ними, активируя необходимый документ, внося в него изменения, и сохраняя его нажатием клавиши мыши. Помимо этого, при закрытии и следующем запуске приложения, табы, над которыми совершались действия, сохраняются.

Рабочее окно утилиты можно разделить на две части. В такой способ удобно сравнивать несколько вариаций одного и того же документа. Для определения отличий в 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 отображен внешний вид редактора. Он очень простой и многофункциональный.

интерфейс notepad++

Рисунок 1. Интерфейс Notepad++.

Похожие статьи




Разработка сайта, Среда разработки web-сайта - Разработка сайта для компании

Предыдущая | Следующая