Крупина Т.А., Щербакова С.М. Современные средства разработки интернет-сайтов и Web-приложений

УДК 378.048

Крупина Татьяна Александровна¹, Щербакова Светлана Михайловна^1
1Московский педагогический государственный университет, магистрант

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

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

---

Krupina Tatiana Aleksandrovna¹, Shcherbakova Svetlana Mikhajlovna^1
1Moscow State Pedagogical University, Graduate of the Department of Applied Mathematics and IT

Abstract
This article provides an overview of the development of modern websites and Web-based applications. It also discusses the problem of training students and pupils of these technologies.

---

Рубрика: Педагогика

Библиографическая ссылка на статью:
Крупина Т.А., Щербакова С.М. Современные средства разработки интернет-сайтов и Web-приложений // Гуманитарные научные исследования. 2016. № 9 [Электронный ресурс]. URL: http://human.snauka.ru/2016/09/16590 (дата обращения: 26.03.2019).

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

Современные Федеральные государственные образовательные стандарты (ФГОС) по многим не только инженерным, но и гуманитарным направлениям требуют от выпускников умений по разработке и управлению Интернет-сайтами.

Методы и средства разработки Интернет-сайтов и Web-приложений развиваются динамично от возможностей создания простых сайтов-визиток до разработки серверных приложений, обрабатывающих и хранящих большие массивы данных.

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

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

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

Рассмотрим еще средства программирования Web-приложений:

• язык программирования JavaScript используется для создания интерактивных HTML документов;
• VBScript используется для написания сценариев клиента, а также для написания сценариев на сервере;
• Perl используется для разработки инструментов системного администрирования, а также в разработке CGI-сценариев, систем автоматической обработки электронной почты и поддержки узлов Web.

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

Denwer (от сокр. ДНВР — джентльменский набор Web-разработчика) — набор дистрибутивов и программная оболочка, которые предназначены для создания и отладки Web-приложений и другого динамического содержимого Web-страниц на ПК под управлением ОС.

В состав набора Denwer входят:

• локальный сервер Apache для запуска приложений на компьютере пользователя, имитируя функциональные возможности сервера, где у провайдера впоследствии будет установлено разработанное приложение. Apache – это программное обеспечение –кроссплатформенное, свободно распространяемое и поддерживающее различными операционными системами;
• система программирования PHP – Cи-подобный  язык для разработки программных кодов встраиваемых в HTML-код сайта и исполняемых на сервере, с целью обработки данных, поступающих от пользователей того или иного сайта. PHP (Hypertext Preprocessor – «Препроцессор гипертекста», первоначально Personal Home Page Tools – «Инструменты для создания персональных веб-страниц») – скриптовый язык общего назначения, применяемый для разработки Web-приложений,  был создан Расмусом Лердорфом в 1994 году;
• MySQL – свободно распространяемое программное обеспечение для обработки баз данных, в том числе используется при работе с данными поступающих с клиентских браузеров. MySQL (Structured Query Language – «Структурированный язык запросов») был создан Майклом Видениусом из шведской компании TcX в 1995 году.

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

Библиографический список

1. ФГОС 222000 Инноватика (квалификация (степень) «магистр»). Сайт Минобрнауки России http://минобрнауки.рф/документы/926 . Дата доступа 13.09.2016.
2. Абдулгалимов Г.Л. Проблемы и решения внедрения ФГОС. Педагогика. 2013. № 10. С. 57-61.
3. Абдулгалимов Г.Л. Профессиональная компетентность учителя-предметника. Alma mater (Вестник высшей школы). 2013. № 1. С. 112-113.
4. Абдулгалимов Г.Л. Модель готовности современного учителя к профессиональной деятельности. Стандарты и мониторинг в образовании. 2009. № 5. С. 44-47.
5. Джентльменский набор Web-разработчика «Денвер» – проект Дмитрия Котерова. http://www.denwer.ru/ . Дата доступа 13.09.2016.
6. Абдулгалимов Г.Л., Кугель Л.А., Васекин С.В. О роли развития логического мышления в информационном обществе. Информатика и образование. 2013. № 3 (242). С. 33-35.
7. Абдулгалимов Г.Л., Кугель Л.А. Обучение проектированию информационных систем и анализу данных. Профессиональное образование. Столица. 2013. № 4. С. 31-33.
8. Абдулгалимов Г.Л. Система подготовки преподавателей ИТ- дисциплин. Высшее образование в России. 2010. № 3. С. 156-158.
9. Люк Веллинг, Лора Томсон. Разработка web-приложений с помощью PHP и MySQL.  Издательский дом “Вильямс”. 2010. -837. ISBN: 978-5-8459-1574-0.

---

Количество просмотров публикации: Please wait

Все статьи автора «abc444»

32. Универсальные средства разработки web-сайтов.

— Пакет MicrosoftOffice ранее содержал программу MicrosoftFrontPage, которая создавала хоть и «кривой и грязный» код, но легким путем. Зачастую сайт корректно отображался лишь InternetExplorer пятой и шестой версии. Теперь проект закрыт и начинающие пользователи используют MicrosoftWord, который создает ещё более ужасный код;

— DreamWeaver, ранее принадлежавший компании Macromedia, а теперь купленный Adobe, создает красивый и удобочитаемый код. Конечно, он хуже написанного вручную, но из WYSIWYG редакторов — он обоснованно лидирует;

— AdobeGoLive CS — программа для разработки профессиональных Web — страниц. Совместима с форматами файлов Photoshop, Illustrator, Acrobat;

— AntennaWebDesingStudio — Программа для быстрого создания веб — страниц;

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

— SerifWebPlus — Очень простая программа для создания сайтов любой сложности;

— OpenOffice.org тоже имеет инструмент для создания Web-страниц. По реализации примерно соответствует MicrosoftWord;

— MozillaComposer является частью браузера Mozilla и предназначен для создания страниц в визуальном режиме. Бывает, что страницы корректно читаются потом только, собственно, в Mozilla;

HTML-редакторы

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

— Macromedia HomeSite — редактор HTML/XML;

— Notepad++ специально не ориентирован на разработку Web-страниц, но подсвечивать синтаксис умеет;

— QuantaPlus — тоже достаточно хороший редактор html-кода. В Linux используют чаще всего именно его. Хорошая реализация, поддержка подключаемых модулей;

— BlueFish — редактор с подсветкой синтаксиса для Linux. Поддерживает js, php, html, css и т.п. Есть примеры готовых решений и инструменты проверки кода.

— Если ничего этого нет — используйте Блокнот (win) или Write (lin). Последний опять же умеет подсвечивать синтаксис;

Создание PHP/Perl:

— ZendStudioсоздан для работы с PHP-проектами. Теоретически можно использовать любой html-редактор;

— PHP ExpertEditor — редактор PHP-файлов с богатыми возможностями.

— DzSoft PHP Editor — мощный инструмент для написания, редактирования и отладки PHP сценариев и HTML страниц.

— DzSoftPerlEditor — инструмент для записи, редактирования, и отладки Perl-скриптов с удобным и инутитивно понятным интерфейсом.

После того, как код написан, его необходимо просмотреть и протестировать. Лучше всего для этих целей использовать локальный сервер, который покажет, как будет выглядеть Ваш сайт в интернете. Для PHP проектов лучше всего использовать DenWer, для ASP проектов — Microsoft IIS, который входит в дистрибутив Windows, для простых статистических HTML проектов можно вообще ничего не использовать — двойной клик решает :).

Локальные серверы:

— DenWer — пакет программ для локального поднятия и разработки сайта на PHP+MySQL. Очень маленький размер и очень большая функциональность;

— XAMPP (+дополнения) — один из лучших. Большой набор сервисов, небольшой дистрибутив и удобное управление.

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

— TopServer — бесплатный полнофункциональный сервер приложений: Apache + PHP + MySQL + PERL + SQLite + FTP в одном пакете !

3.4 Инструментальные средства создания web-сайтов. Основы web-дизайна

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

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

Пять областей охватывают основные аспекты Web-дизайна.

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

• Зрительные образы. Это относится к компоновке экранного пространства на сайте. Эта компоновка обычно создается с помощью HTML, CSS или даже Flash и может включать графические элементы, выполняющие функции украшения или навигации. Визуальная сторона сайта — это наиболее очевидный аспект Web-дизайна, но не единственная, и не самая важная, сторона дисциплины.

• Технология. Хотя применение разнообразных базовых Web-технологий вроде HTML или CSS попадает в эту категорию, под технологией в этом контексте чаще подразумеваются различные интерактивные элементы сайта, в особенности созданные с использованием программных методов.Это могут быть элементы в диапазоне от языков сценариев, работающих на стороне клиента, наподобие JavaScript, до серверных приложений, таких как Java-сервлеты, PHP-сценарии.

• Доставка. Скорость и безотказность доставки сайта по сети Internet или внутренней корпоративной сети связаны с применяемым аппаратным программным обеспечением и задействованной сетевой архитектурой.

• Назначение. Причина, по которой сайт существует, часто связанная с экономическими вопросами, вероятно, является наиболее важной частью Web-дизайна. Этот элемент следует учитывать при принятии любых решений, затрагивающих другие области. Конечно, степень, в которой каждая сторона Web-дизайна оказывает воздействие на сайт, может изменяться в зависимости от типа создаваемого сайта. Личная домашняя страничка обычно не связана с экономическими соображениями, характерными для Internet-магазина. Внутренняя сеть производственной компании может не попадать под влияние соображений, связанных с визуальным представлением, важных для общедоступного Web-сайта, рекламирующего остросюжетный фильм.

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

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

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

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

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

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

Процесс разработки сайтов проходит в несколько этапов.

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

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

2. Верстальщик получает макеты шаблонов в виде простых изображений (например, в формате JPEG или PNG), либо разбитых по слоям (например, в PSD или AI). Его основная задача — получить из этих графических макетов гипертекстовые веб-страницы с подготовленными для интернета изображениями.

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

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

Существует множество инструментов, с помощью которых веб-дизайнер осуществляет верстку страниц. Такие программы называются HTML-редакторами. В веб-дизайне используется два типа редакторов — визуальные и невизуальные (текстовые).

Первые работают по принципу WYSIWYG (от англ. — What You See Is What You Get — что видишь, то и получаешь. Другими словами, это способ подразумевает, что при редактировании материал выглядит так же, как он и будет выглядеть в конечном результате.

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

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

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

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

Разработчики утверждают, что Macromedia Dreamweaver MX предназначена для проектирования, разработки и администрирования профессиональных web-сайтов и приложений. Кроме того Dreamweaver легко интегрируется с другими программами от Macromedia, например, такими, как Flash. Т.е. Dreamweaver гораздо больше, чем просто визуальный редактор, это достаточно мощный и сложный инструмент, а всякий сложный инструмент требует, чтобы на его освоение было потрачено какое-то время, прежде, чем пользователь сможет работать в нем. Однако, я считаю, что вас не должно смущать, что придется изучать, как пользоваться программой, Dreamweaver стоит того.

Adobe GoLive и LiveMotion. Возможно, Adobe GoLive понравится тем, кто любит программы от Adobe, и много с ними работал: знакомая среда, достаточно легко разобраться, что к чему. Кроме того, еще один плюс для любителей Adobe — все программы от Adobe прекрасно взаимодействуют друг с другом и дополняют друг друга, GoLive не исключение, он прекрасно дружит с собратьями. Однако, GoLive не более, чем визуальный редактор для верстки веб-страниц, больше чем поддержки таких технологий, как Html, Dhtml, CSS, XML и нескольких готовых Javascript`ов не стоит ждать от этой программы. Однако, следует отметить, что встроенный редактор кода (текстовой) в этой программе очень хороший. Т.е. возможно, GoLive оптимальное сочетание визуального и текстового редактора (два в одном). 

Microsoft FrontPage —  считается простейшим визуальным редактором и популярным среди тех, кто отдает предпочтение программным инструментам Microsoft Office и создает сайт специально для сервера на основе технологий Microsoft. FrontPage поддерживает HTML, JavaScript (скриптовый язык), CSS (каскадные таблицы стилей), DHTML (сочетание HTML, JavaScript, CSS и DOM — объектной модели документа), совместим с технологиями ASP (создание веб-приложений), XML (язык разметки, текстовый формат, применяемый для хранения структурированных данных), VBScript (скриптовый язык программирования), XSL (расширяемый язык таблиц стилей — смена CSS). FrontPage также имеет неплохие возможности по управлению изображениями, flash-роликами.

По сути, FrontPage является чуть ли не типичным приложением Microsoft Office, и интеграция редактора с этой серией является его очевидным преимуществом. Любой пользователь, имеющий опыт работы с такими приложениями как Word, Excel, Access, не будет испытывать особых сложностей в работе с редактором FrontPage — знакомые панели инструментов, наборы мастеров и редакторов, шаблонов, автоматических функций и т. д. Другими словами, FrontPage — прекрасное решение для начинающих пользователей и веб-мастеров.

Microsoft Expression Web и SharePoint Designer отличается тем, что предоставляет своим пользователям больше свободы, производит чистый, совместимый со стандартами, код, работает с CSS и CSS-макетами. По сути, это не приемник FrontPage, он, скорее, представляет собой конструктор и имеет большее сходство с SharePoint Designer, делая акцент на разработке и адаптации к сайтам, выполненных с помощью последнего. Приемником является SharePoint — хотя и не предлагает ничего революционного и также вызывает недовольство среди веб-мастеров. Среди возможностей — поддержка интерактивных страниц ASP. NET, создание вида данных из RSS, XML, Office XML, сотрудничество со встроенным Workflow Designer, инструменты CSS, отслеживание статистики страниц, проверка орфографии, интеграция с SharePoint Server 2007.

Hotdog — программа имеет простой и понятный пользователю интерфейс. Кроме того, что Hotdog дружит с пользователем, эта программа дружит также с Flash, SQL, PHP, ASP, имеет работать с GIF-изображениями (оптимизация, анимация), включает в себя Html-компрессор, может создавать файлы справки (CHM).

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

Homesite— этот редактор, пожалуй, самый популярный и мощный среди текстовых. Кроме того, что в нем достаточно легко работать не только с Html-кодом (есть все, от списка всевозможных атрибутов ко всем тегам вплоть до проверки кода (правильность проверяется с точки зрения W3C.org)), но также есть поддержка XHTML, CSS-редактор, и так далее.

HTML Pad — эта программа тоже пользуется большой любовью пользователей. Помимо всего стандартного HTMLPad поддерживает JavaScript, VBScript, SSI, ASP и Perl, умеет создавать макросы (нападобие Word`a и Excel’я), включает в себя много различных справочных материалов по CSS и Html, и многое другое.

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

Популярные конструкторы сайтов

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

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

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

uCoz — это бесплатная система управления сайтом и хостинг для сайтов, созданных с её использованием.

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

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

Taba.ru — онлайн-конструктор сайтов позволяет быстро создать многофункциональный сайт, предоставляя доменное имя 2-го или 3-го уровня и хостинг от 1 Гб.

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

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

APS — cтандарт пакетов автоматической установки для модели SaaS.

APS-формат разработан, чтобы упростить реализацию бизнес-модели Software-as-a-Service (SaaS) для облачных сервис-провайдеров и разработчиков ПО. APS-пакет – упакованное в соответствии с APS-стандартом веб-приложение.

На данный момент, APS-стандарт поддерживается хостинг-панелями Parallels: Plesk, Small Business Panel, POA и SysCP.

Всего в APS-каталоге опубликованы более 200 наименований CMS и различных веб-приложений (как коммерческих, так и open source).

Wix — имеет огромное количество качественных и разнообразных шаблонов (более 1000). Наряду с HTML5 есть возможность создания сайтов на flash и поддерживается функции Drag & Drop. Сайты на Wix хорошо индексируются поисковыми системами.

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

Динамический сайт — Википедия

Динамический сайт — сайт, состоящий из динамичных страниц — шаблонов, контента, скриптов и прочего, в большинстве случаев в виде отдельных файлов (в Lotus Notes/Domino данные и все элементы дизайна, включая пользовательские скрипты, хранятся в одном файле). Страница сайта, показываемая в итоге браузеру пользователя, формируется на стороне сервера динамически, по запросу, из страницы-шаблона и отдельно хранимого содержимого (информации, скриптов и др.). Как правило, для отображения любого количества однотипных страниц используется одна страница-шаблон, в которую подгружается соответствующее содержимое, это позволяет единомоментно корректировать внешний вид сайта (множество всех его страниц), редактируя всего лишь один шаблон.

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

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

1. Генерация содержимого на стороне сервера;
2. Передача сгенерированной странички клиенту;
3. Генерация содержимого на стороне клиента.

Генерация содержимого на стороне сервера[править | править код]

Сервер получает запрос от Клиента (например, page.ru/index.php) и запускает обработку файла-скрипта (в данном случае — index.php) интерпретатором. Языки программирования на Серверной стороне используются разные, наиболее часто встречаются, например: Java, PHP, Perl, ASP.NET, Ruby и другие.

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

Генерация содержимого на стороне клиента[править | править код]

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

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

Комбинированная генерация[править | править код]

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

Управление содержимым (редактирование сайта)[править | править код]

Системы управления контентом или движки (англ. Content management system, CMS) — серверные информационные системы или серверные компьютерные программы, используемые для обеспечения и организации совместного процесса создания, редактирования и управления контентом (то есть содержимым) интернет-сайта или сервера локальной сети.

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

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

14 инструментов для веб-дизайна и веб-разработки на 2014 год / Habr

Вместе с WEB движущимся семимильными шагами (адаптивным дизайном, CSS препроцессорами, постпроцессорами и другими вещами) может оказаться проблемой попытка не отставать от чего-то нового и полезного.
Ниже Вы найдете 14 инструментов, 7 для веб-дизайнеров и 7 для веб-разработчиков, которые помогут веб-сайту перерасти из концепции в действительность.

Для веб-дизайнеров

1. Adobe Creative Cloud

Разумеется, что Photoshop и Illustrator являются двумя важными инструментами для любого веб-дизайнера. Вместе с Creative Cloud у вас будет доступ к обоим из них, и плюс к некоторым другим инструментам, таких как: Typekit, InDesign и Kuler. Все инструменты Creative Cloud очень хорошо взаимодействуют друг с другом, и должны иметься у любого дизайнера.

2. UI Faces

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

3. 0to255

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

4. Google Fonts

Типографика в WEB проделала длинный путь со дней Arial, Courier и Georgia. Google Fonts это огромная библиотека свободных, готовых шрифтов которые могут быть загружены на стадии макета.

5. Samuel L. Ipsum

Поклонникам фильма «Змеиный полёт», я представляю «Samuel L. Ipsum» (Сэмюель Л. Ipsum). Это Lorem Ipsum генератор цитат. Имейте в виду, существует три варианта на выбор: цитаты ненормативной лексики ладена из фильмов Джексона, чистые цитаты из фильмов Джексона и обычные ol’ lorem ipsum.

6. Responsive Sketch Pad

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

7. Macaw

Этот инструмент еще не выпущен, но он уже выглядит довольно интересным предложение. Macaw обещает ту же гибкость, что и редактор изображений, но при этом будет происходить написание семантического HTML и лаконичного CSS.

Для веб-разработчиков

1. Coda 2

Это мой любимый из-за его «все-в-одном» редактор кода, FTP клиент и встроенный MySQL редактор. Coda 2 также включает в себя справочную библиотеку по программированию и визуальный CSS-редактор.

2. CSS Pre-processor

В зависимости от того, что вы разрабатываете, здесь вам поможет руководство. SASS требует, чтобы работал Ruby (встроен в любой Mac) и и на базовом уровне делает тоже что и LESS, другой препроцессор. Оба являются отличными инструментами и предлагают экономящие время функции, такие как вложенные правила, смешивания, переменные и логику.

3. Front-end Framework

Снова, есть два отличных предложения которые рассмотрим. Вместе Twitter Bootstrap и Zurb’s Foundation поможет сделать прототипирование и разработку для современного WEB быстрее и проще. Оба пакета это адаптивная сеточная система с элементами стилей и javascript по умолчанию, для реализации богатого WEB.

4. Browserstack

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

5. Pingdom

Раскройте DNS и проблемы загрузки с Pingdom. Вы увидите, сколько времени забирает загрузка различных ресурсов на вашем сайте вместе с общим показателем производительности.

6. Chrome Developer Tools

Если вы используете один из инструментом входящим в Chrome Developer Toolkit, то пусть это будет называться веб-инспектор. Вместе с инспектором вы сможете быстро диагностировать проблемы и внести изменения в разметку. Вы также можете эффективно использовать консоль для логирования и взаимодействия с JavaScript.

7. MAMP Pro

С легкостью крутите сайты локально. MAMP Pro позволяет легко установить и администрировать Apache, MySQL и среду разработки PHP. Если вы работаете над большим количество сайтов для клиентов, вам необходимо иметь такой сервер.